1.rem適配法 - 文字流式，控件彈性，圖片縮放

》物理像素(physical pixel)：設(shè)備上每一個用于顯示的像素單元，固定不變，以'pt'為單位

》設(shè)備獨立像素(density-independent pixel)：虛擬像素，比如CSS像素，由其他設(shè)備轉(zhuǎn)化為物理像素，單位為'dp'，此時，當(dāng)一個元素設(shè)置為'width：200px'時，元素跨越200個CSS像素，而鈣元素在物理設(shè)備上的顯示還取決于另外兩個參數(shù)“頁面縮放”“屏幕dpr”，　　

》設(shè)備像素比(device pixel ratio)：由于前兩者不同，而產(chǎn)生的映射關(guān)系，對于普通屏幕，css與設(shè)備物理像素之間的映射關(guān)系為1:1，非常一致，而在高分屏下需要將不畫布大小對應(yīng)提升，防止位圖像素點不夠

　　js: window.devicePixelRatio

　　css: -webkit-(min/max)-device-pixel-ratio

1.1媒體查詢設(shè)斷點

　　html{font-size:10px}

　　@media screen and (min-width:XXXpx) and (max-width:XXXpx){html{font-size:11px}}

　　......　　//設(shè)置突變點

　　@media screen and (min-width:XXXpx){html{font-size:25px}}

?

　　1.符合響應(yīng)式要求，但是rem在不同分辨率下映射的實際像素不同，無法保證在所有平臺的統(tǒng)一顯示，且斷點設(shè)置無法保證高精度

　　2.1.apple官網(wǎng)將寬度750px一下設(shè)備默認(rèn)為手機設(shè)備，此為手機與pc&平板的斷點

　　2.2.apple官網(wǎng)針對dpr=1，dpr=2/3，設(shè)置兩套圖片，同時針對pc下不同分辨率也設(shè)置了兩組圖片，手機端一圖

　　2.3.apple官網(wǎng)大量采用ul/li布局，雖然還不知道用意何在，靜靜觀望-.-

　　2.4.apple用了relative保證文字在圖片中的位置，在斷點之間修改padding

　　3.1.huawei官網(wǎng)采用圖片縮放，設(shè)置斷點pe和pc兩者，也為750px，由此目前750px應(yīng)該是最高效檢測平臺的方法了吧~

　　3.2.huawei在手機端將圖中文字分離到圖片下方，但是在pc訪問1000px以下，會出現(xiàn)文字錯位現(xiàn)象

　　4.1.WOW官網(wǎng)，直接引入<video>元素，在963px之后，視頻改為背景圖，琢磨著是為了pe用戶著想?

?

1.2利用js預(yù)先計算頁面font-size

　　<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1">

?

　　document.documentElement.style.fontsize = document.documentElement.clientWidth / 6.4 +'px';

?

　　特點是font-size會直接寫到html的style內(nèi),要如此設(shè)置，需要確定參照的值，用此參照值 * rem，最終得到元素的大小，例如：取參照比例為100，那么，設(shè)計稿中500px的元素即為5rem，而此處的6.4也為iphone分辨率 / 100。

　　同時這只scale=1保證了網(wǎng)頁在頁面內(nèi)的顯示寬度始終等于設(shè)備邏輯像素大小，即設(shè)備邏輯像素大小，其中device-width=設(shè)備物理分辨率 / (devicePixelRatio * scale)，在scale=1情況下相等

?

1.3針對高分屏的js預(yù)計算優(yōu)化，設(shè)置viewport縮放

　　var scale = 1 / devicePixelRatio;

?　　document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale 　　+ 　　', maximum-scale=' + scale + 'minimum-scale=' + scale + ', user-scalable=no');

　　//動態(tài)計算scale

　　document.documentElement.style.fontsize = document.documentElement.clientWidth / 10 +'px';

　　例如在retina下設(shè)置border：1px，但實際是需要1寬度的物理像素，在css中可以認(rèn)為是0.5px，因此設(shè)置視口scale，將1px縮小為0.5px，達(dá)到效果

?

1.4視覺設(shè)計流程

?

1.選取基準(zhǔn)手機，現(xiàn)在多為iphone6的 375 * 667

2.針對高分屏（dpr），輸出相應(yīng)的文件

?

?2.柵格布局

看來還是分別開發(fā)pc頁面和移動端頁面比較合理~響應(yīng)式設(shè)計只是網(wǎng)頁設(shè)計的折衷方案！

推薦使用場景：圖文混排，板塊很多，柵格化讓雜亂無章的內(nèi)容有條理，設(shè)計師與前段更好對接

缺點：限制設(shè)計師發(fā)揮，采用960px寬度，最大限度支持所有瀏覽器，但是采用寬度自適應(yīng)能使得網(wǎng)頁容納更多信息，比如Amazon

?

?

參考：http://blog.csdn.net/azureternite/article/details/52528380?

以及這篇文章中的參考，與其參考的參考

轉(zhuǎn)載于:https://www.cnblogs.com/KEVIN--LEE/p/8229183.html

總結(jié)

以上是生活随笔為你收集整理的Web移动适配笔记（ing）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。