- 響應式布局的基礎
如果進行響應式開發(fā)需要加入以下代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
我們把html5頁面放到手機上預覽漾岳，默認情況下祝懂，不管手機設備有多寬咕娄，HTML都是按照
980<安卓腾么，iOS>(或者1024<黑莓>)寬度渲染的奈梳，這樣頁面會整體縮小(內(nèi)容也都會縮小)
解決方案：viewport 視口（layout viewport 布局視口），設定頁面渲染中的一些規(guī)則
content(規(guī)則內(nèi)容):
width=device-width:讓頁面渲染的寬度和設備寬度保持一致
initial-scale=1.0 :初始縮放比例1:1
maximum-scale=1.0: 最大縮放比例1:1 (適配一些低版本安卓解虱，如果不加user-scalable禁止會失效)
minimum-scale=1.0: 最小縮放比例1:1 (適配一些低版本安卓攘须，如果不加user-scalable禁止會失效)
user-scalable=no:是否可對頁面進行縮放，no 禁止縮放
- 如何實現(xiàn) PC端和移動端用同一套項目：
第一種 @media：
css中設定條件就是基于@media完成的（類似if）
1. 媒體設備 all(所有的設備)/print(打印機設備)/screen(屏幕設備<電腦殴泰，手機于宙，ipad等>)
2. 媒體條件 符合某個條件，寫對應的樣式
- max-width 最大寬度為
- min-width 最小寬度為
- width
- 橫屏/豎屏
...
@media screen and (max-width: 500px){
/* 如果當前頁面寬度<=500 */
/* .person {
width: 200px;
} */
}
第二種 rem響應式布局方案(等比縮放)：
使用的時候按照1920的設計稿來做悍汛。100px=1rem捞魁，font-size設置成100px; 750px的設計稿 1rem = 100px 設置屏幕超過2560及以上，就固定1rem = 200px离咐， 寬度小于600及以下谱俭，就固定1rem = 32px
第三方庫用的一般是使用px單位，無法使用rem適配不同設備的屏幕宵蛀。
解決辦法：使用px2rem-loader插件將第三方ui庫的px轉(zhuǎn)換成rem單位昆著。
第一步：拿到設計稿后(現(xiàn)在移動端設計稿一般都是750px的)，我們設定一個
初始的REM和PX的換算比例(一般設置為1rem=100px糖埋，為了方便后期換算)
第二步：測量出設計稿元素的尺寸(PS測出來的是PX單位)宣吱，在編寫樣式的時候全部
轉(zhuǎn)換為REM的單位(除以100即可) =>100%還原設計稿，最外層一般按照100%設置
第三步：編寫一段JS瞳别，獲取當前設備的寬度征候，讓其除以設計稿的寬度(設計稿是750PX或者1920PX)，在乘以初始
的換算比例100祟敛，計算出當前設備下疤坝，一個rem應該=多少像素(只要改變HTML的font-size就
可以)；這樣HTML字體大小一改馆铁，之前所有以REM單位的元素都會跟著自動縮放..
現(xiàn)在真實項目中跑揉，主體響應式布局以REM為主，部分效果實現(xiàn)可以基于flex來做，需要樣式微調(diào)整還是要基于@media來完成的...
<style>
html {
font-size: 100px;
}
</style>
<script>
function computedREM() {
let HTML = document.documentElement;
winW = HTML.clientWidth || document.body.clientWidth;;
HTML.style.fontSize = winW / 1920 * 100 + 'px';
}
// 進入時執(zhí)行computedREM
computedREM();
// 當瀏覽器窗口大小發(fā)生改變的時候執(zhí)行computedREM
window.addEventListener('resize',computedREM);
</script>
- DPR適配：屏幕像素密度比历谍，@2x @3x
通過在F12進入網(wǎng)頁調(diào)試模式现拒，可以看到iphoneX 的DPR為3.0
image.png
iphone6/7/8 的DPR維2.0
image.png
如果圖片的真實大小是2020的話，那在DPR為2.0的手機上 會按照4040來渲染
如果圖片的真實大小是2020的話望侈，那在DPR為3.0的手機上 會按照6060來渲染
這樣一來圖片就因為被放大而渲染"模糊"印蔬，所以需要設計師提供對應的4040(@2x) 6060(@3x)的圖片。
原生app開發(fā)或者H5移動端開發(fā)中脱衙，理論上應該按照多張素材準備:
logo.png,
logo@2x.png,
logo@3x.png
樣式布局(CSS中)基于@media指定不同DPR下用不同的素材圖侥猬；在或者在JS中，監(jiān)聽DPR值捐韩，讓其加載不同的素材圖退唠；這樣的好處是，在DPR為1.0的時候荤胁，加載小圖瞧预，速度會更快
真實開發(fā)中:
只準備最大的，不管DPR多少,都加載最大的寨蹋，DPR1.0也不會失真松蒜，只是多加載一些圖片資源，速度慢一些已旧，所以需要做圖片懶加載秸苗，BASE64、雪碧圖
移動端設計稿一般都是750px的运褪，所切的圖就是@2x 的惊楼，在一些DPR為3.0的手機上使用@2x圖片大多數(shù)也會顯示的很清晰，這樣就是為什么設計稿要750px的
