一、CSS像素彬坏、物理像素、邏輯像素膝晾、設(shè)備像素比栓始、PPI、Viewport
參考鏈接：https://github.com/jawil/blog/issues/21
要點歸納
- DPR = 設(shè)備像素/CSS像素
- viewport的值取
width與initial-scale的最大值 - viewport只是改變
document.documentElement.clientWidth或window.innerWidth - 為了防止有滾動條血当，禁止縮放：
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
二幻赚、響應(yīng)式開發(fā)最佳實踐（參考淘寶響應(yīng)式）
參考鏈接： http://www.cnblogs.com/lyzg/p/4877277.html
響應(yīng)式開發(fā)最佳實踐原理分析：
- 在實際項目中，把與元素尺寸有關(guān)的css臊旭，如
width,height,line-height,margin,padding等都以rem作為單位落恼，這樣頁面在不同設(shè)備下就能保持一致的網(wǎng)頁布局。 - font-size用
媒體查詢改變px离熏，不能設(shè)為rem佳谦。 - 網(wǎng)易響應(yīng)式：只修改
font-size - 淘寶響應(yīng)式：即修改
font-size，又修改viewport【看下面<script>的源碼】 - 例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script>
document.addEventListener("DOMContentLoaded",function(){
// 淘寶響應(yīng)式多寫了下面這2句滋戳，修改viewport
let scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
// 淘寶+網(wǎng)易響應(yīng)式都需要的修改font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
},false)
</script>
<body>
<div>
<div style="
background: pink;
height: 2rem;
width: 8rem;
">600px</div>
<div style="
background: lightblue;
height: 2rem;
width: 8rem;
">600px</div>
</div>
</body>
</html>
-
網(wǎng)易響應(yīng)式（只修改font-size）：
-
淘寶響應(yīng)式（既修改font-size钻蔑，又修改viewport）：
由此可見：兩者最終視覺上的寬高是一致的，但同樣視覺寬高胧瓜，淘寶做法顯示更多的像素點矢棚，所以將會更加高清，效果更好府喳，推薦使用蒲肋。
- 技術(shù)要點：
<script>
document.addEventListener("DOMContentLoaded",function(){
// 淘寶做法多寫了下面這2句，修改viewport
let scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
// 通用做法（淘寶+網(wǎng)易都需要）钝满，修改font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
},false)
</script>
- 修改viewport的時候兜粘，即使屏幕變寬（從375px-->750px），但因為font-size也跟著變大同樣的倍數(shù)（從37.5-->75px）弯蚜，所以用rem做單位的元素孔轴，寬高在視覺上沒有變化。
- 淘寶響應(yīng)式碎捺，先將頁面的寬高根據(jù)DPR路鹰，由CSS像素(375px)還原成設(shè)備像素(750px)贷洲，再由此時的clientWidth(750px)按照相對值設(shè)置font-size，再由rem設(shè)置相對尺寸晋柱，這樣根據(jù)750px設(shè)計稿便可輕松設(shè)計出設(shè)配不同像素的手機(jī)了
- 若rem計算不方便优构，可設(shè)置font-size=cilentWidth/7.5=100px，如此便可方便換算了
附雁竞、Domready使用“DOMContentLoaded”事件監(jiān)聽
參考鏈接：https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded
參考鏈接：http://www.reibang.com/p/88b9d3874749
