移動端rem計算

時間 2019-11-24

標籤移動 rem 計算欄目無線简体版

原文原文鏈接

教你如何用 lib-flexible 實現移動端H5頁面適配

2017年07月22日 16:01:24 Pwcong 閱讀數：18872

前話

很久沒寫教程了（可能會誤導新手的菜鳥教程(￣▽￣)」）。javascript

這是個人github，歡迎前端大大們和我一塊兒學習交流
https://github.com/pwcongcss

最近入職公司作前端實習，這幾個星期來學到了移動端H5頁面適配。（之前根本沒作過移動端網頁/(ㄒoㄒ)/~~，仍是微信端的）html

因此把我學到的一個小知識點寫下來，也分享給前端新手們。前端

正文

0x00 大概說明

作移動端網頁和pc端很大不一樣的即是如今移動端窗口分辨率繁多。java

不少時候UI給的設計圖只有一份，仍是按照iphone6設計的，這就讓前端適配其餘例如6plus或安卓等其餘移動端頭疼。git

還好，阿里巴巴2015年末公開了其成熟的適配方案，lib-flexible，至於其可靠性可參考每一年天貓活動的移動端頁面。github

這個方案的用法大概是這樣的，HTML 頭部引入 lib-flexible 的樣式和js庫，容器或組件寬高主要使用單位 rem ，字體大小則不變仍然使用單位 px。微信

還有一個約束是，由於只面向移動端，所以咱們限制最外層包裹的div最大寬度爲 640pxmarkdown

我這裏只簡單介紹怎麼使用 lib-flexible 實現移動端適配，若是須要深刻解釋的知識，請閱讀以下文章：
https://github.com/amfe/article/issues/17iphone

0x01 引入 lib-flexible

最新的庫文件能夠到這裏下載：
https://github.com/amfe/lib-flexible

clone 下來後在 build 目錄下找到 flexible.css 和 flexible.js 在HTML頭部引入便可，例如：

<!DOCTYPE html> <html lang="zh-CN"> <head> <title>lib-flexible demo</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> ... <link href="css/flexible.css" rel="stylesheet"> <script src="js/flexible.js"></script> </head> <body> ... </body> </html>

0x02 計算`rem`值

谷歌 rem 的用法後不少人應該大概瞭解 rem 的原理了，大概就是 rem 依賴 font-size 的值，例如默認下 1rem = 16px，所以經過在不一樣分辨率修改 font-size 就能夠達到適配不一樣分辨率的移動端了。

須要詳細瞭解 rem 值計算可參考這篇文章 http://www.cnblogs.com/azhai-biubiubiu/p/6003597.html

rem 來作寬高定型有個最大的問題是，font-size 如何計算的問題，如何算得的 font-size 能夠在不一樣分辨率下顯示效果一致呢？

不用擔憂，lib-flexible 已經幫你算好了，在你調整窗口大小的時候自動計算調整 rem 的基準，你只要作的是，按照設計圖算出能適配不一樣分辨率的移動端的 rem 值。

這裏有個關係圖：

看不懂不要緊，看那麼多flexible的教程都放了我也就跟着放出來好了。

假如UI給了這個設計圖（找不到工做的UI (/▽＼)）：

好，我這辣雞一眼看出了：

這是以iphone5爲標準的ui設計稿，設備窗口寬度爲 640px
中間一個色塊，居中，背景色爲 #0075a9，margin-top 爲 100px， width 爲 240px，height 爲 120px

接下來，咱們來計算rem值，計算公式很簡單：

需轉換的px值 / 設計稿寬度px值 * 10

上面的尺寸計算一下轉換成下面的說法：
1. 這是以iphone5爲標準的ui設計稿，設備窗口寬度爲 10rem
2. 中間一個色塊，居中，背景色爲 #0075a9，margin-top 爲 1.5625rem， width 爲 3.75rem，height 爲 1.875rem

0x03 按照找不到工做的UI給的設計稿敲出代碼

<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/flexible.css" rel="stylesheet"> <script src="js/flexible.js"></script> <style> html, body{ width: 100%; height: 100%; position: relative; padding: 0; margin: 0; overflow: hidden; } body{ background: #333; } .container{ overflow-x: hidden; overflow-y: auto; position: relative; height: 100%; max-width: 640px; background-color: white; margin: 0 auto; } .block{ margin: 0 auto; margin-top: 1.5625rem; width: 3.75rem; height: 1.875rem; background-color: #0075a9; } </style> </head> <body> <div class="container"> <div class="block"></div> </div> </body> </html>