通过media媒体查询设置ie7/8样式

PlatformThinking 2017-12-03

@media all and (min-width:1280px){
     /* 所有设备宽度大于1280干嘛干嘛嘞... */ 
     body{
          background:#f00;
     }
}

@media (min-width:1280px){
     /* 所有设备宽度大于1280干嘛干嘛嘞... */ 
     body{
          background:#f00;
     }
}
其中all and可省略
@media print{
    /*打印时设置的样式*/
    body{
        background:pink;
    }
}

插曲:
Lake Hillier is a lake in Western Australia that is completely and naturally PINK!!!
@media \0screen\,screen\9{
    /*IE 8 、IE 7上场了*/
    body{
         background:#ccc;
    }
}

@media screen\9{
    /*IE7来了*/
   body{
      background:#0f0;
   }
}

屏幕分辨率

指在横纵向上的像素点数,单位是px,1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率,如iphone6/6s的分辨率:1334*750(这里的1像素指的是物理设备的1个像素点)其他机型的分辨率见http://blog.csdn.net/qq_27080247/article/details/78665450

iphone6/6s的deviceRatio为2(获取deviceRatio的方法见:https://www.w3cplus.com/css/towards-retina-web.html),此处有一公式:

window.devicePixelRatio = 物理像素/dips(CSS像素被称为与设备无关的像素----device-independent像素,简称为“DIPs”)

iphone6/6s的分辨率:1334*750

iphone6/6s的deviceRatio:2

因此:dips=667px*375px(也就是设备屏幕高度*宽度),各浏览器的模拟器中展示的即为设备屏幕宽度*设置屏幕高度(css像素,获取方法:window.innerWidth*window.innerHeight)

iPhone6屏宽不一定是375px,iPhone6 Plus屏宽不一定是414px。

iPhone系列设备媒体查询:

@media only screen and (min-device-width: 320px){
         //针对iPhone 3
}
 
@media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {
         //针对iPhone 4, 5c,5s, 所有iPhone6的放大模式,个别iPhone6的标准模式
}
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {
     //针对大多数iPhone6的标准模式
}
 
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {
      //针对所有iPhone6+的放大模式
 
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {
      //针对所有iPhone6+的标准模式,414px写为412px是由于三星Nexus 6为412px,可一并处理
 
}

参考:

http://blog.csdn.net/qq_27080247/article/details/78665450

https://www.w3cplus.com/css/towards-retina-web.html

http://blog.csdn.net/freshlover/article/details/44454991(判断iphone6 plus/iphone6标准及放大模式)

相关推荐