新手開發移動端網站遇到的適配問題，隨意看看就好哈：

1、不同的手機螢幕會出現佈局錯亂的現象；比如盒子高度溢位、盒子跳行之類、圖片變形的情況

2、字型大小不會隨著螢幕的變化而變化，在大螢幕上面的字型合適，在小螢幕上面顯得很大；

解決方法：響應式佈局，高度和字型的大小的單位不用PX;因為px是固定的，這時候用rem，跟隨不同螢幕的大小字型和高度響應式變化;當然寬度的話用百分比就好；

3、關於rem;

rem是css3新增的一個相對單位；是相對於根節點的一個單位（也就是html節點）；

例如：html{font-size:16px;};

p{font-size:1rem;}--->p標籤的大小就是1x16px=16px;

一 、第一種解決方法

要做到響應式的變化，需要在css裡面加入下面這一段程式碼；表示不同大小的螢幕的根元素的大小不一樣；

@media screen and (min-width: 320px) {
    html,body {font-size: 14px;}
}

@media screen and (min-width: 360px) {
    html,body {font-size: 16px;}
}

@media screen and (min-width: 400px) {
    html,body {font-size: 18px;}
}

@media screen and (min-width: 440px) {
    html,body {font-size: 20px;}
}

@media screen and (min-width: 480px) {
    html,body {font-size: 22px;}
}

@media screen and (min-width: 640px) {
    html,body {font-size: 28px;}
}
 

目前除了IE8以及更早的瀏覽器以外，幾乎所有的瀏覽器都支援rem；對於不支援的瀏覽器設定絕對單位；例如：

p {font-size:14px; font-size:.875rem;}

以上是個人初次開發移動端網頁遇到的佈局問題。

----說到這說一說em

em:em是相對長度單位；相對於當前物件內文字的字型尺寸。如果當前對行內文字的字型尺寸沒有被設定，則相對於瀏覽器的預設字型；一般瀏覽器的預設字型為16px；1em=16px;一般為了換算方便，就設定為body{font-size:62.5%;}-->body的字型為10px;

em的特點：值不是固定的,會繼承父元素的字型大小；例如：父元素的字型大小設定為1.2em;子元素的字型大小如果也想這麼大，那麼就設定為1em，這是因為繼承性；

二、第二種方法

用javascript控制獲取到移動裝置的寬度、控制不同裝置的字型的大小

例如：(function() {
                 // 獲取到html文字
                 var oHtml = document.getElementsByTagName("html")[0];
                 console.log(oHtml);
                // 獲取到裝置的寬度
                 var oScreenWidth = oHtml.getBoundingClientRect().width;
                // 獲取到裝置的固定的html文字字型大小
                oHtml.style.fontSize = oScreenWidth / 16 + 'px';
                console.log(oHtml.style.fontSize);
           })();

元素的大小就以rem來控制