zoukankan      html  css  js  c++  java
  • css3 媒体查询常用适配

    @media (max-1300px) {}

    @media (max-1080px) {}

    @media (max-799px) {}

    @media (max-720px) {}

    @media (max-460px) {}

    @media (max-height:750px) {}

    @media (max-height:310px) {}

    @media (max-height:260px) {}

    @media (min-1921px),(min-height:1201px) {}

    @media (max-1280px) and (max-height:800px) {}

    @media (max-960px) and (max-height:600px) {}

    @media (max-800px),(max-height:480px) {}

    /*orientation:landscape 宽度大于高度*/
    @media
    (orientation:landscape) and (max-height:480px),(orientation:portrait) and (max-699px) {}

    @media (orientation:landscape) and (max-height:300px) {}

    @media (orientation:landscape) and (max-height:650px) {}

    @media (orientation:landscape) and (max-height:650px) and (max-660px) {}

    @media (orientation:landscape) and (max-height:650px) and (max-540px) {}

    @media
    (orientation:landscape) and (max-height:650px) and (max-460px),(orientation:landscape) and (max-height:300px),(orientation:portrait) and (max-height:380px) {}

    手机端


    /* 小于400 */
    @media screen and (max-300px) {
    html,body {
    font-size:0.58rem;
    }
    }/* 大于960 小于1200 */
    @media screen and (min-301px) and (max-350px) {
    html,body {
    font-size:0.6rem;
    }
    }/* 大于960 小于1200 */
    @media screen and (min-351px) and (max-420px) {
    html,body {
    font-size:0.7rem;
    }
    }/* 大于960 小于1200 */
    @media screen and (min-421px) and (max-490px) {
    html,body {
    font-size:0.9rem;
    }
    }/* 大于960 小于1200 */
    @media screen and (min-491px) and (max-620px) {
    html,body {
    font-size:1rem;
    }
    }/* 大于960 小于1200 */
    @media screen and (min-621px) and (max-720px) {
    html,body {
    font-size:1.2rem;
    }
    }/* 大于960 小于1200 */
    @media screen and (min-721px) and (max-820px) {
    html,body {
    font-size:1.4rem;
    }
    }/* 大于960 小于1200 */
    @media screen and (min-821px) and (max-920px) {
    html,body {
    font-size:1.6rem;
    }
    }/* 大于960 小于1200 */
    @media screen and (min-921px) and (max-1020px) {
    html,body {
    font-size:1.8rem;
    }
    }/* 大于960 小于1200 */
    @media screen and (min-1021px) and (max-1120px) {
    html,body {
    font-size:2rem;
    }
    }/* 大于960 小于1200 */
    @media screen and (min-1121px) and (max-1220px) {
    html,body {
    font-size:2.2rem;
    }
    }/* 大于960 小于1200 */
    @media screen and (min-1221px) and (max-1320px) {
    html,body {
    font-size:2.4rem;
    }
    }/* 大于960 小于1200 */
    @media screen and (min-1321px) and (max-1420px) {
    html,body {
    font-size:2.6rem;
    }
    }/* 大于960 小于1200 */
    @media screen and (min-1421px) and (max-1520px) {
    html,body {
    font-size:2.8rem;
    }
    }/* 大于960 小于1200 */
    @media screen and (min-1521px) and (max-1620px) {
    html,body {
    font-size:3rem;
    }
    }

  • 相关阅读:
    JS函数调用的方法
    JS 正则表达式
    JS replace()方法-字符串首字母大写
    JS案例之3——倒计时
    JS案例之2——cycle元素轮播
    jsp自定义标签
    每日记载内容总结23
    maven项目部分知识
    eclipse中整合springMvc,velocity和sitemesh
    eclipse中整合springMvc和velocity
  • 原文地址:https://www.cnblogs.com/yszr/p/8041719.html
Copyright © 2011-2022 走看看