一、CSS像素、物理像素、邏輯像素、設(shè)備像素比、PPI、Viewport
參考鏈接：https://github.com/jawil/blog/issues/21
要點(diǎn)歸納
- DPR = 設(shè)備像素/CSS像素
- viewport的值取
width與initial-scale的最大值 - viewport只是改變
document.documentElement.clientWidth或window.innerWidth - 為了防止有滾動(dòng)條，禁止縮放：
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
二、響應(yīng)式開(kāi)發(fā)最佳實(shí)踐（參考淘寶響應(yīng)式）
參考鏈接： http://www.cnblogs.com/lyzg/p/4877277.html
響應(yīng)式開(kāi)發(fā)最佳實(shí)踐原理分析：
- 在實(shí)際項(xiàng)目中，把與元素尺寸有關(guān)的css，如
width,height,line-height,margin,padding等都以rem作為單位，這樣頁(yè)面在不同設(shè)備下就能保持一致的網(wǎng)頁(yè)布局。 - font-size用
媒體查詢(xún)改變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)式多寫(xiě)了下面這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）：
由此可見(jiàn)：兩者最終視覺(jué)上的寬高是一致的，但同樣視覺(jué)寬高，淘寶做法顯示更多的像素點(diǎn)，所以將會(huì)更加高清，效果更好，推薦使用。
- 技術(shù)要點(diǎn)：
<script>
document.addEventListener("DOMContentLoaded",function(){
// 淘寶做法多寫(xiě)了下面這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的時(shí)候，即使屏幕變寬（從375px-->750px），但因?yàn)閒ont-size也跟著變大同樣的倍數(shù)（從37.5-->75px），所以用rem做單位的元素，寬高在視覺(jué)上沒(méi)有變化。
- 淘寶響應(yīng)式，先將頁(yè)面的寬高根據(jù)DPR，由CSS像素(375px)還原成設(shè)備像素(750px)，再由此時(shí)的clientWidth(750px)按照相對(duì)值設(shè)置font-size，再由rem設(shè)置相對(duì)尺寸，這樣根據(jù)750px設(shè)計(jì)稿便可輕松設(shè)計(jì)出設(shè)配不同像素的手機(jī)了
- 若rem計(jì)算不方便，可設(shè)置font-size=cilentWidth/7.5=100px，如此便可方便換算了
附、Domready使用“DOMContentLoaded”事件監(jiān)聽(tīng)
參考鏈接：https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded
參考鏈接：http://www.itdecent.cn/p/88b9d3874749
