在我看來，rem就是1rem單位就等於html節點fontsize的畫素值。所以改變html節點的fontsize是最為關鍵的一步。根據手機寬度改變相對大小就可以實現自適應了，就不用什麼**查詢那些的。
我們的設計圖往往寬度是640或者其他尺寸的，不過我建議是用這個尺寸，以640為基準，以小到大，實現自適應，下面實現的比例為1rem=40px(640寬度)。
這樣一套**就搞定手機端尺寸自適應，不需要**查詢，而且利用sass和less能夠給我們節約更多的時間，以及更好的體驗。
開啟頁面，1-400的相對變數都在上面，只需要全選複製，然後放入你的專案中，直接拿來用就是了，當然我寫的css雪碧圖生成工具也會用到裡面的變數，大家不妨一試。
!function(win)
win.rem = domwidth / 16;
domele.style.fontsize = win.rem + "px";
}var v, initial_scale, timecode, dom = win.document, domele = dom.documentelement, viewport = dom.queryselector('meta[name="viewport"]'), flexible = dom.queryselector('meta[name="flexible"]');
if(viewport)
} else
if(flexible)
}if (!v && !initial_scale)
//沒有viewport標籤的情況下
if (domele.setattribute("data-dpr", v), !viewport)
else
}win.dpr =v;
win.addeventlistener("resize", function
() ,
false
); win.addeventlistener("pageshow", function
(b) ,
false
); resize();
}(window);
執行完**後你的頁面就會跟隨手機的寬度而自適應了，根本就不用什麼**查詢那些，很簡潔，很使用，站在巨人的肩膀上吧這就叫做！
手機端 自適應頁面rem
一 手機端自適應rem 1 樣式重置 定義字型大小 樣式重置這塊省略，大同小異 定義字型大小 media screen and min width 320px body media screen and min width 360px body media screen and min width ...
手機端頁面自適應解決方案 rem布局
只需在頁面引入這段原生js 就可以了 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function doc,win else if doc.addeventlistener return win.addeventlistener resizeevt,recal...
手機端頁面自適應解決方案 rem布局
相信很多剛開始寫移動端頁面的同學都要面對頁面自適應的問題，當然解決方案很多，比如 百分比布局，彈性布局flex 什麼是flex 也都能獲得不錯的效果，這裡主要介紹的是本人在實踐中用的最順手最簡單的布局方案 rem 什麼是rem 布局 rem布局非常簡單，首頁你只需在頁面引入這段原生js 就可以了 f...