經過media媒體查詢設置ie7/8樣式、使用media判斷各機型、手淘flexible.js

@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，可一併處理
 
}
/*iPhoneX的適配*/
 @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { 
　　header { background-color: black; } 
} 
/*iPhone8P的適配*/ 
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) { 
　　header { background-color: deepskyblue; }
}

 

 

參考：

iphoneX適配方案（各機型分辨率，缺乏iphone6 plus分辨率：標準模式下設備寬度爲414px*812，分辨率爲2436*1242px=414px*3，有實例）

走向視網膜(Retina)的WEB時代

iPhone6屏寬不必定是375px，iPhone6 Plus屏寬不必定是414px（判斷iphone6 plus/iphone6標準及放大模式）

關於h5頁面在iphoneX中的適配(各機型開發尺寸，較全)

Human Interface Guidelines 

design website for iphoneX

手淘移動端適配的方案學習和相關思考（flexible.js源碼分析）