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

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

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

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

　　js: window.devicePixelRatio

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

1.1媒體查詢設斷點

　　html{font-size:10px}

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

　　......　　//設置突變點

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

?

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

　　2.1.apple官網將寬度750px一下設備默認為手機設備，此為手機與pc&平板的斷點

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

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

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

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

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

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

?

1.2利用js預先計算頁面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內,要如此設置，需要確定參照的值，用此參照值 * rem，最終得到元素的大小，例如：取參照比例為100，那么，設計稿中500px的元素即為5rem，而此處的6.4也為iphone分辨率 / 100。

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

?

1.3針對高分屏的js預計算優化，設置viewport縮放

　　var scale = 1 / devicePixelRatio;

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

　　//動態計算scale

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

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

?

1.4視覺設計流程

?

1.選取基準手機，現在多為iphone6的 375 * 667

2.針對高分屏（dpr），輸出相應的文件

?

?2.柵格布局

看來還是分別開發pc頁面和移動端頁面比較合理~響應式設計只是網頁設計的折衷方案！

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

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

?

?

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

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

轉載于:https://www.cnblogs.com/KEVIN--LEE/p/8229183.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。