[TOC] # 多種方案 ## [PC及移動端頁面適配方法](http://www.cnblogs.com/qijunjun/p/7152236.html) 設備有多種不同的分辨率，頁面適配方案有如下幾種： 1. 全適配：流體布局+響應式布局 2. 移動端適配： 使用百分比自適應布局（流式布局）同時需要對移動端的 `viewport` 視口進行設置，就可以達到適配的目的： 1. 流體布局+少量響應式（就是使用百分比來設置元素的寬度，元素的高度按實際高度寫固定值） 2. 基于 `rem` 的布局 3. `flex`彈性合模型 這種界面有個特點就是頁面元素的復雜度比較高，而使用 `flex` 進行布局會導致頁面被拉伸，但是上下的高度卻沒有變化等問題。 淘寶最近開源的一個框架和網易的框架有同工之異。都是采用 `rem` 實現一稿解決所有設置自適應。在沒出來這種方案之前，第一種做法的人數也不少。 ## 移動端布局終極解決方案 隨著移動web的需求越來越多，當然伴隨著的方案也多，但是大體都是和手淘同樣的實現方案，來對應各種不同設備： 1. [淘寶彈性布局方案lib-flexible](https://github.com/amfe/lib-flexible) 2. [hotcss --- 讓移動端布局開發更加容易](https://github.com/imochen/hotcss) 3. [https://github.com/cllgeek/godcss](https://github.com/cllgeek/godcss) ## 參考 > [移動端自適應方案](http://caibaojian.com/mobile-responsive-demo.html) > [自適應網頁設計（Responsive Web Design）](https://www.w3cways.com/1243.html) > [【移動適配】移動Web怎么做屏幕適配（三）](https://segmentfault.com/a/1190000004562630) > [移動端H5解惑-概念術語（一）](https://github.com/sunmaobin/sunmaobin.github.io/issues/27) > [rem是如何實現自適應布局的？](http://caibaojian.com/web-app-rem.html) > [白樹-【原】移動web資源整理](http://www.cnblogs.com/PeunZhang/p/3407453.html) > [jtyjty99999/mobileTech](https://github.com/jtyjty99999/mobileTech) > [zhiqiang21's Blog](https://github.com/zhiqiang21/blog/blob/master/README.md) # px、em 與 rem px 是相對固定單位，字號大小直接被定死，所以用戶無法根據自己設置的瀏覽器字號而縮放，em 和 rem 雖然都是相對單位，但em是相對于它的父元素的`font-size`，頁面層級越深，em的換算就越復雜，而 rem 是直接相對于根元素，這就避開了很多層級關系。移動端新型瀏覽器對 rem 的兼容很好，可以放心使用。 ## em **任意瀏覽器的默認字體高都是16px**。 **所有未經調整的瀏覽器都符合: `1em=16px`。** 那么`12px=0.75em`，`10px=0.625em`。為了簡化 `font-size` 的換算，需要在 css 中的 body 選擇器中聲明`font-size=62.5%`，這就使 em 值變為 `16px*62.5%=10px`, 這樣`12px=1.2em`, `10px=1em`, 也就是說只需要將你的原來的 px 數值除以 10，然后換上 em 作為單位就行了。 ## rem 然而，這里面有兩個深坑： 1. 我看了網上很多關于 rem 的資料，基本都說瀏覽器的默認字號就是 16px ，然后直接定義 `font-size:62.5%` 。但是，rem 屬于 css3 的屬性，有些瀏覽器的早期版本和一些國內瀏覽器的默認字號并不是 16px，那么上面的 `10/16` 換算就不成立，直接給 html 定義 `font-size: 62.5%` 不成立。 2. chrome 強制字體最小值為 12px，低于 12px 按 12px 處理，那上面的 1rem=10px 就變成 1rem=12px，出現偏差（下面給demo）。 **解決方案**： 將 `1rem=10px` 換為 `1rem=100px`（或者其它容易換算的比例值）；不要在 pc 端使用 rem。 ~~~css 再用本工廠總結得出的各分辨率媒體查詢換算： @media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) { html { font-size: 703%; } } @media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) { html { font-size: 732.4%; } } @media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) { html { font-size: 750%; } } @media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) { html { font-size: 781.25%; } } @media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){ html { font-size: 808.6%; } } @media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){ html { font-size: 843.75%; } } ~~~ # 手機端rem推薦的一種寫法 ```css :root { font-size: 16px; } /* Or you can use html */ /* html { font-size: 16px; } */ body { font-size: 1rem; } button { font-size: 0.875rem; // All the internal/external value use in 'em' // This value use of your "font-size" as the basic font size // And you will not have any problem with the font size of the container ( Example bottom ) padding: .5em 1em; border: .125em solid #e3e3e3; @media (min-width: 48rem){ // min-width: 768px font-size: 1.125rem; } @media (min-width: 62rem){ // min-width: 992px font-size: 1.375rem; } } /* Example*/ .container { // font-size: 14px; font-size: .875rem; width: 80rem; button { font-size: .875rem; // Still use font-size: 14px padding: .5em 1em; border: .125em solid #e3e3e3; @media (min-width: 48rem){ // min-width: 768px font-size: 1.125rem; } @media (min-width: 62rem){ // min-width: 992px font-size: 1.375rem; } } } ``` # 移動端設計稿項目(尺寸640寬度) ``` html { font-size: 12px; } @media(min-width:319px) and (max-width: 359px) { html { font-size: 100px!important; /*1rem=100px*/ } } @media(min-width:360px) and (max-width: 399px) { html { font-size: 112.5px!important; /*1rem=112.5px*/ } } @media(min-width:400px) and (max-width: 639px) { html { font-size: 125px!important; /*1rem=125px*/ } } @media(min-width:640px) and (max-width: 768px) { html { font-size: 200px!important; /*1rem=200px*/ } } ``` # 前端頁面適配的 rem 換算 http://www.cnblogs.com/zjzhang/p/6885790.html