響應式開發中的rem
阿新 • • 發佈：2018-12-23
用rem做為響應式開發中的單位（包括字型，寬度，高度），頁面的顯示可以自適應裝置寬高。比如我們的設計稿是根據iphone6（375 X 667）的尺寸設計的，我們用rem為單位，就按照inphone6的尺寸做好頁面就ok了，頁面在其他裝置裡就可以響應顯示。
1.設定rem;字型和高度我們可以使用rem,寬度的話我們依然可以使用百分比。
rem是相對於根元素<html>的。瀏覽器的預設字號是16px。即：1rem= 16px = 100%;
我們是從小螢幕到大螢幕的開發模式，那麼我們的設定如下：（下面的height是例子，實際開發中不需要的。）
2.通過下面的設定，高度自適應是可以解決的，但是有的瀏覽器或移動端裝置有最小字型的限制，下面我總結一下最小字型的限制情況可以參考http://www.cnblogs.com/he-lian/p/4512276.html。
移動端最小字型為12px(僅chrome有此限制)，inphone類移動裝置沒有最小字型限制。其他裝置可能會受8px的限制。
html {
font-size: 62.5%;/* 相當於font-size:10px; 1rem=10px */
height:10rem;/* height:100px; */
}
@media screen and (min-width:414px) {
html {
font-size:75%;/* 相當於font-size:12px; 1rem=12px */ height:10rem; /* height=120px */
}
}@media screen and (min-width:640px) {
html {
font-size:87.5%;/*相當於font-size:14px*/ height:10rem; /* height:140px; */
}
}@media screen and (min-width:1024px) {
html {
font-size:100%;/*相當於font-size:16px*/ height:10rem; /* height:160px;*/
}
}