一，最近在做項目，寫移動端的網頁，主要是自適應的問題。bootstrap等前端框架用的不好，又不想耽誤時間，不能自適應很煩人，這里給大家介紹下我的方法，
也是結合了很多人的思路。
1.在頭部加入這樣的一行代碼：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
這句話是自動設置縮放，然而，它並不能完全適應所有的手機，並且你在用瀏覽器手機模式調試的時候可能正常，但是換到真實的手機端其實是不正常的。所以我們還要進行改動。
2.這里推薦大家在用magin,padding,font-size,等屬性的時候用rem替代px，你可能對rem比較陌生，這里我提供好了一段js代碼，直接引入即可，不需要糾結rem是怎么回事，關於原理，我再寫篇博客做介紹，這篇博客講怎么使用。就是以下的這段js代碼，再寫網頁的時候放入html中即可。下面代碼中的640指的是手機的屏幕寬度，一般來講市面上的手機屏幕的寬度最大是640px，所以這里用i=640指代屏幕的最大寬度，最小是320px，然后通過引用下面的js你就可以書寫自己的網頁了，要記得本js的1rem=100px哦，其實是為了好換算，比如font_size:14px;我們就可以寫成，font_size:0.14rem。
<script>
!function(n) {
var e = n.document,
t = e.documentElement,
i = 640,
d = i / 100,
o = "orientationchange" in n ? "orientationchange": "resize",
a = function() {
var n = t.clientWidth || 320;
n > 640 && (n = 640),
t.style.fontSize = n / d + "px"
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
} (window);
</script>
注：本文出自(https://blog.csdn.net/Fredrik/article/details/81557433)