引用http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html的方案

下載地址https://github.com/hupan508/lib-flexible

注意點。

　　1、如果html設置過?meta ?，js將使用meta 標簽的縮放。

　　　　<meta http-equiv="X-UA-Compatible" content="IE=edge">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
　　　　<meta content="telephone=no" name="format-detection" />
　　　　<meta content="yes" name="apple-mobile-web-app-capable" />
　　　　<meta content="yes" name="apple-touch-fullscreen" />
　　　　<meta content="telephone=no,email=no" name="format-detection" />

　　　　如果加入meta字體寫一種px就可以

　　　　關于媒體查詢在不同設備下使用圖片請查看

　　　　http://www.uigreat.com/api/client_manager/index.php?aid=239&module=content&wenzhang

　　　　常見媒體查詢

　　　　https://segmentfault.com/a/1190000002711737

　　2、cssrem

　　　　使用cssrem工具，換算px--rem?

　　　　修改換算比例

　　　　參數配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem

• 　　px_to_rem?- px轉rem的單位比例，默認為40。
• max_rem_fraction_length?- px轉rem的小數部分的最大長度。默認為6。
• available_file_types?- 啟用此插件的文件類型。默認為：[".css", ".less", ".sass"]。

?

　　把視覺稿中的px轉換成rem

　　　　首先，目前視覺稿大小分為640，750以及，1125這三種。

　　　　當前方案會把這3類視覺稿分成100份來看待（為了以后兼容vh，vw單位）。每一份被稱為一個單位a。同時，1rem單位認定為10a。拿750的視覺稿舉例：

　　　　1a = 7.5px1rem = 75px

　　　　因此，對于視覺稿上的元素的尺寸換算，只需要原始px值除以rem基準px值即可。例如240px * 120px的元素，最后轉換為3.2rem * 1.6rem。

?

　　　　3、

轉載于:https://www.cnblogs.com/hupan508/p/6159206.html

總結

以上是生活随笔為你收集整理的移动端REM布局方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。