layout 和 screen的寬度

在比較遙遠的時候，網(wǎng)頁還是在pc端流行，很少有人開發(fā)移動端網(wǎng)頁观蜗，所有網(wǎng)頁的寬度比較大。 隨著移動端開發(fā)的慢慢崛起持搜，我們就想把pc端的頁面放到移動端也能正常的查看备韧，但是手機屏幕那么小，怎么才能完全的顯示整個頁面的布局呢吗垮？

我們通過手機瀏覽器打開網(wǎng)頁垛吗，盡然手機屏幕的大小改變不了，那么有沒有一種辦法烁登，讓手機瀏覽器的內(nèi)部寬度變得和pc端的大小相近呢怯屉？瀏覽器的廠商開始發(fā)現(xiàn)了這個商機，紛紛的開始開發(fā)饵沧，終于達成了锨络，在一般情況下，手機瀏覽器的內(nèi)置寬度是980px捷泞。這樣足删，我們用手機瀏覽器打開pc端的頁面也可以看了，但是需要用戶滾動和縮放才可以清除的查看網(wǎng)頁锁右，但是作為一個開發(fā)人員失受，對用戶這么不友好讶泰，飯碗都沒有了。

// iphone 7
document.documentElement.clientWidth  // 980px
screen.width // 375px

上面提到了2個寬度拂到，屏幕寬度（visual width）和手機瀏覽器內(nèi)部寬度(layout width)

1.png

之后出現(xiàn)了<meta name='viewport>可以進行設(shè)置和開發(fā)痪署， 下面再探討。

通過meta改變layout width

我們從上面知道兄旬，如果不設(shè)置狼犯，瀏覽器默認的layout width的值是980px，但是我們在移動端開發(fā)的時候领铐，不希望用戶非要通過方法頁面和滾動頁面來展示內(nèi)容悯森，有沒有一種方法，讓我們的在開發(fā)移動端頁面的時候layout width和visual width一樣呢绪撵？這樣我們設(shè)置的css的像素就會很清晰的反應(yīng)在頁面中瓢姻。用戶也可以不需要縮放的查看頁面。

這個時候meta標簽就登場了音诈。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

通過上面代碼layout width===visual width幻碱。

initial-scale縮放什么

直接上公式：

initial-scale = layout width(布局寬度) / visual width(視口寬度)

我是這樣理解的，如果我們設(shè)置了initial-scale = 0.5细溅，意味著縮小一半褥傍，那應(yīng)該是什么縮小呢？ 通過測試喇聊，我得到是頁面的元素縮小了恍风，例如：本來10px可以展示30長度，現(xiàn)在要縮小一半承疲，10px不能變邻耕，30長度也不能變，要讓30長度在layout width中顯示的區(qū)域縮小一半燕鸽，只能是放大layout width了

動態(tài)REM移動端方案

1. 把html的font-size設(shè)置成設(shè)計稿的寬度

<meta name="viewport" content="width=device-width ,initial-scale=1,maximum-scale=1,minimum-scale=1" >  <!--如果不設(shè)置width= device-width,則瀏覽器默認模擬的是980px-->
<script>
  var css = `html{
    font-size: 320px
  }`    
  document.write(`<style>${css}</style>`)
<script>  

1. 設(shè)計稿頁面的寬度 === 320px === html的font-size
2. 1rem === html的font-size
3. 由1和2 推出 1rem = 設(shè)計稿頁面的寬度

2. 根據(jù)設(shè)備的尺寸調(diào)正html的font-size

把html的font-size*修改后的數(shù)據(jù)

<meta name="viewport" content="width=device-width ,initial-scale=1,maximum-scale=1,minimum-scale=1" >  <!--如果不設(shè)置width= device-width,則瀏覽器默認模擬的是980px-->
<script>
  var width = document.documentElement.clientWidth  //如果不設(shè)置寬度兄世，瀏覽器默認模擬的是980px
  var scale = width/320;
  console.log(scale)
  var css = `html{
    font-size: ${320*scale}px
  }`    
  document.write(`<style>${css}</style>`)
</script>  

1. 實際頁面的寬度 === ? === html的font-size
2. 1rem === 實際頁面的寬度

3. 設(shè)置好font-size后根據(jù)比例換成rem

統(tǒng)一根據(jù)自身尺寸/設(shè)計稿尺寸來設(shè)置rem

1. 由于1rem=320px(設(shè)計稿尺寸) ,所有我們需要把對應(yīng)的比例px變成rem
2. 例如原來的16px的margin-top,變成現(xiàn)在的16/320rem 是不是覺得會變得很小，不方便計算啊研，所以又有一個方案御滩，統(tǒng)一的把html的font-size除以10，然后我們在轉(zhuǎn)換的時候再乘以10

<!-- 防止數(shù)據(jù)太小党远，統(tǒng)一變化下 -->
<script>
  var width = document.documentElement.clientWidth  //如果不設(shè)置寬度削解，瀏覽器默認模擬的是980px
  var css = `html{
    font-size: ${width/10}px
  }`
  document.write(`<style>${css}</style>`)
</script>

<!--使用css函數(shù)來統(tǒng)一變化rem-->
rem($px)
   ($px/320*10)rem

<!-- 是不是好奇為什么不除以100,因為除以100的話，font-size=320/100 = 3.2px -->
<!-- 3.2px???你想想瀏覽器的最小像素是多少沟娱？是多少氛驮？默認的是12px，你設(shè)置的話济似，最小也是6px矫废，所以不行 -->

4. 結(jié)尾

到這里盏缤，其實已經(jīng)做好了手機端的rem，但是由于設(shè)計師的職業(yè)病蓖扑，就出現(xiàn)了border1px的小小小bug唉铜，你如果覺得1px不重要，到這里就可以了律杠。下面我將要解析下設(shè)計師的處女座情節(jié)

相關(guān)文章

1. 騰訊rem
2. 阿里巴巴UED
3. 騰訊app-rem變革

border-1px的問題

這個問題的來源

1. 人有富貧潭流，屏幕也一樣，好的屏幕的dpr是不同的柜去，展示在我們面前的色彩灰嫉，清晰度都是不一樣的。
2. retina屏幕下诡蜓，dpr = 2或3熬甫，但是在普通的屏下面dpr=1

蘋果手機dpr.png

dpr(設(shè)備像素比)

devicePixelRatio = 物理像素 / 獨立像素 
// 我們的css中的px === 獨立像素
// 實際屏幕像素  ===  物理像素

1. 首先我們手機的分辨率高，就看的東西越仔細蔓罚，這是為什么呢？ 分辨率和我們的dpr又有什么聯(lián)系呢瞻颂？

   在屏幕大小都差不多的情況下豺谈，一個分辨率為750的， 一個分辨率為640的手機贡这，都要展示一個長度為30px的物體茬末，讓這個物體占有同樣的面積，所以只有高分辨率（750）的1物理像素對應(yīng)的獨立像素多盖矫，也就是dpr高丽惭。不然的話，在同等dpr中辈双，css的1px對應(yīng)相同的物理像素责掏，在750的分辨率中就會變小。

2. 通過dpr湃望，我們可以知道該設(shè)備上一個css像素代表多少個物理像素换衬。例如，在Retina屏的iphone上证芭，dpr的值為2瞳浦，也就是說1個css像素相當(dāng)于2個物理像素。

3. 然后得說一下废士，為什么存在retina下叫潦，border: 1px這一說？

我們正常的寫css官硝，像這樣border: 1px;矗蕊，在retina屏幕下四敞，會有什么問題嗎？

設(shè)備像素比

在retina屏幕下拔妥，我們設(shè)計師想要的1px忿危，其實是1物理像素，但是對于css而言没龙，只需要顯示0.5px铺厨，但是在普通的屏下面的，css的0.5px會被默認的當(dāng)成0px處理硬纤，這就是一個矛盾了解滓。

解決border 1px

1. 通過windon.devicePixelRatio獲取頁面的設(shè)備像素比
2. 通過<meta name="viewport" content="width=device-width ,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}" > scale來縮放比例
   var scale = 1 / window.devicePixelRatio; //獲取對應(yīng)的縮放比例
3. 由于initial-scale的改變，引起了設(shè)備獨立像素的改變筝家，也就是document.documentElement.clientWidth的改變洼裤。第二步 把initial-scale變小了，引起了document.documentElement.clientWidth的變大對應(yīng)的倍數(shù)溪王，所以這一縮小腮鞍，一放大就抵消了。
4. 獲取正確的document.documentElement寬度

沒有設(shè)置width=device-width.png

<!-- 由于我們在meta中沒有設(shè)置width=device-width 所以我們
  通過document.documentElement.clientWidth獲取的寬度是物理像素 * dpr 
-->
<script>
  var scale = 1 / window.devicePixelRatio; //獲取對應(yīng)的縮放比例
  var meta = `<meta name="viewport" content="initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale} user-scalable=no">`
  document.write(meta);
  var width = document.documentElement.clientWidth 
  var css = `html{
font-size: ${width / 10}px
}`
  document.write(`<style>${css}</style>`)
</script>

最后鏈接

芳姐線上瀏覽地址加上1px
移動前端開發(fā)之viewport的深入理解