實現手機端自適應布局的幾種方法

1.固定寬度

頭部設定

，意思為根據設計稿的大小（640px），以320(iphone5)為基準進行縮放，此方法簡單粗暴高效，在後面的css樣式中只需要根據設計稿的實際大小，根據px來寫即可，可完美自適應大小不同的螢幕。

這種方法目前見到的缺點有：

縮放會導致有些頁面元素會糊的情況。

如果此頁面有可能巢狀在別的系統或者頁面中，如果上層頁面width=device-width就會整個錯亂。

（歡迎補充）

2，使用rem適配

html

@media only screen and (min-width: 371px)
} @media only screen and (min-width: 401px)
} @media only screen and (min-width: 428px)
} @media only screen and (min-width: 481px)
} @media only screen and (min-width: 569px)
}

例如：設計稿btn的寬度為48px，高度為24px,字型大小為24，那麼在**中對應為

.btn

2.使用js控制根元素font-size大小

(function
(win,doc)
win.addeventlistener('resize',setfont,false);
setfont();
})(window,document);
script>

如引用上面的**，設計稿大小為750，如果為640 將html.style.fontsize=100*(cliwidth/750)+'px';中750改為640

在這裡1rem=50px；

例如在寬度為750的設計稿中btn的寬度為100px，高度為50px,字型大小為30px那麼對應的css為

.btn

此處以375螢幕（iphone6）為基準，設計稿為實際尺寸的2倍，所以設計稿大小/2/50為你所需要的rem大小。

注：chrome預設最小限制字型為12px。

第一次寫部落格，如有錯誤，請指出並多多包涵。

多種方法實現自適應布局

最近切了幾個手機端的網頁，第一次切的是美團的首頁，為了自適應不同的手機解析度，需要用到自適應布局，切圖的時候是用的第一中方法，用到了定位，後來查詢了一些其他方法，現在就介紹幾種自適應布局的實現方法 美團網頁頭就用到了自適應 html部分 1 div class main 2 div class di...

針對移動端自適應的幾種方法集合

第一種 function doc,win else if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc,fals...

CSS布局 左固定右自適應的幾種方法

實現乙個左右布局，左邊固定寬度200px，右邊自適應寬度。html 固定寬度200px 自適應寬度 css fixed autofloat會脫離正常流的規則，右側的塊級元素會自動向父級元素靠攏，這個時候再設定padding left把內容推出來就可以了。然後說一下這個box sizing這個屬性，當...