手機端布局

標籤：情況   iphone6   表徵圖   max   imu   viewport   高度   pix   idt   

http://caibaojian.com/mobile-responsive-example.html

它是根據什麼計算的，這就跟設計稿有關了，拿網易來說，它的設計稿應該是基於iphone4或者iphone5來的，所以它的設計稿豎直放時的橫向解析度為640px，為了計算方便，取一個100px的font-size為參照，那麼body元素的寬度就可以設定為width: 6.4rem，於是html的font-size=deviceWidth / 6.4。這個deviceWidth就是viewport設定中的那個deviceWidth。根據這個計算規則，可得出本部分開始的四張中html的font-size大小如下：·

//code from http://caibaojian.com/mobile-responsive-example.htmldeviceWidth = 320，font-size = 320 / 6.4 = 50pxdeviceWidth = 375，font-size = 375 / 6.4 = 58.59375pxdeviceWidth = 414，font-size = 414 / 6.4 = 64.6875pxdeviceWidth = 500，font-size = 500 / 6.4 = 78.125px

• （1）先拿設計稿豎著的橫向解析度除以100得到body元素的寬度：

  //code from http://caibaojian.com/mobile-responsive-example.html如果設計稿基於iphone6，橫向解析度為750，body的width為750 / 100 = 7.5rem如果設計稿基於iphone4/5，橫向解析度為640，body的width為640 / 100 = 6.4rem

• （2）布局時，設計表徵圖注的尺寸除以100得到css中的尺寸
• 播放器高度為210px，寫樣式的時候css應該這麼寫：height: 2.1rem。之所以取一個100作為參照，就是為了這裡計算rem的方便！
• （3）在dom ready以後，通過以下代碼設定html的font-size:

  document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + ‘px‘;

• 6.4隻是舉個例子，如果是750的設計稿，應該除以7.5。
• （4）font-size可能需要額外的媒介查詢，並且font-size不能使用rem，如網易的設定：

  @media screen and (max-width:321px){    .m-navlist{font-size:15px}}@media screen and (min-width:321px) and (max-width:400px){    .m-navlist{font-size:16px}}@media screen and (min-width:400px){    .m-navlist{font-size:18px}}

最後還有2個情況要說明：

第一，如果採用網易這種做法，視口要如下設定：·

//code from http://caibaojian.com/mobile-responsive-example.html<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

第二，當deviceWidth大於設計稿的橫向解析度時，html的font-size始終等於橫向解析度/body元素寬：
原文連結：

之所以這麼幹，是因為當deviceWidth大於640時，則物理解析度大於1280（這就看裝置的devicePixelRatio這個值了），應該去訪問pc網站了。事實就是這樣，你從手機訪問網易，看到的是觸屏版的頁面，如果從pad訪問，看到的就是電腦版的頁面。如果你也想這麼幹，只要把總結中第三步的代碼稍微改一下就行了：·

//code from http://caibaojian.com/mobile-responsive-example.htmlvar deviceWidth = document.documentElement.clientWidth;if(deviceWidth > 640) deviceWidth = 640;document.documentElement.style.fontSize = deviceWidth / 6.4 + ‘px‘;

前端開發部落格

手機端布局