轉自：http://www.w3cfuns.com/notes/23659/5e3cd2904a56f5e6b86c4d49e90e0f34.html 一、 首先我們先來看看淘寶不同分辨率下的適配頁面 可以看出來 ...

最近翻了一下關於移動端的rem的使用，怎樣最方便。在讀到流雲諸葛的一篇關於《從網易與淘寶的font-size思考前端設計稿與工作流》的文章后，來總結一下。 然而根據我以往做移動端web項目的時候，設計稿一般是640或者750的，我一般會在head里面這樣寫： 做移動端活動 ...

rem和vw布局主要都是為了更好地適配移動端，畢竟手機的型號太多了。 在進行移動端設計的時候，首先要引入一個meta標簽。（禁止用戶縮放） 我們在剛開始接觸移動端的時候，可能都會遇到這種情況： PS中量取像素和web中手機預覽的大小不太一樣，似乎感覺web預覽效果上要比UI ...

關於移動端的適配方案，現在其實已經有很多了，什么百分比、font-size+rem、視窗單位（vw、vh）等等，在介紹懶適配之前，先說說我常用的百分比吧。 百分比布局 　　元素的size：頁面上的元素的width都使用百分比來實現，比如一行三列，每列就是33.33%，高度 ...

隨着手機等移動設備的普及，移動端帶來的流量已經不可忽視，一個網站不只是只有pc的頁面就足夠了，移動端的適配已經勢在必行。但是移動設備種類繁多，屏幕尺寸也千奇百怪，能不能找到一種方式可以適配所有的手機屏幕呢？ 答案就是rem。 俗話說 “授人以魚不如授人以漁”，但今天我就反其道而行，就是授人以魚 ...

移動端 H5 頁面不可遺忘的 meta 標簽 viewport 這行代碼的作用是設置視口的寬度（其實就是頁面的寬度）等於設備寬度，頁面不縮放並且也不允許用戶進行縮放。 把一個普通的PC端頁面（未加入上面 meta 標簽的）直接放在手機端訪問是可以展示完全的，但是頁面明顯經過縮放。可以用 ...

主要要解決的適配問題有 1. 元素自適應問題 2. 文字大小和邊框問題 3. 高清圖問題 4. 1像素問題 5. 橫豎屏顯示問題 我們css中的1px，通常叫做css像素（虛擬像素），物理像素 與虛擬像素的比就稱為設備像素比(dpr) 現在現代瀏覽器都支持 ...

考慮到網站的在多種設備下的兼容性，有很多網站會有手機版和電腦版兩個版本。訪問同一個網站URL，當服務端識別出用戶使用電腦訪問，就打開電腦版的頁面，用戶如果使用手機訪問，則會得到手機版的頁面。 nginx判斷設備根據useragent,國外有個開源的User-Agent區分pc和手機的解決方案 ...