zoukankan      html  css  js  c++  java
  • CSS3

    语法结构及用法:
    @media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules} 

    实际应用一 判断设备横竖屏:
        /* 这是匹配横屏的状态,横屏时的css代码 */
        @media all and (orientation :landscape){} 
        /* 这是匹配竖屏的状态,竖屏时的css代码 */
        @media all and (orientation :portrait){}
      
    实际应用二 判断设备类型:
        @media X and (min-200px){} 
        X为设备类型》比如print/screen/TV等等


    实际应用三 判断设备宽高:
        /* 宽度大于600px小于960之间时,隐藏footer结构 */
        @media all and (min-height:640px) and (max-height:960px){
              footer{display:none;}
        } 

    实际应用四 判断设备像素比:
        /* 像素比为1时,头部颜色为绿色 */
          .header { background:red;display:block;}或
          @media only screen and (-moz-min-device-pixel-ratio: 1), only screen and (-o-min-device-pixel-ratio: 1), only screen and (-webkit-min-device-pixel-ratio: 1), only         screen and (min-device-pixel-ratio:1) {
          .header{background:green;} } 
        /* 像素比为1.5时,头部背景为红色 */
           @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 1.5),           only screen and (min-device-pixel-ratio:1.5) {
           .header{background:red;} }
        /*像素比为2,头部背景为蓝色 */
          @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only         screen and (min-device-pixel-ratio:2){
          .header{background:blue;} }  

  • 相关阅读:
    云架构师进阶攻略(1)
    针对云主机卡死问题的定位分析方法
    让App飞久一点
    OC静态代码检查实战
    PAT 1010. 一元多项式求导
    PAT 1009. 说反话
    PAT 1008 数组元素循环右移问题
    PAT 1007. 素数对猜想
    PAT 1006 换个格式输出整数
    PAT 1005 继续(3n+1)猜想
  • 原文地址:https://www.cnblogs.com/yangqi1209-com/p/7921233.html
Copyright © 2011-2022 走看看