rem是相對於根元素的字型大小單位。假設html的字型大小為16px,那麼1rem = 16px;一旦根元素html定義的font-size變化,整個頁面中運用到的rem都會隨之變化。
#1. 100等分法
1. html的font-size設定為100px -- 便於換算
2. body的font-size設定為0.16rem -- 使用rem重置字型大小
3. 通過**查詢在不同裝置下修改html的font-size -- 整個頁面中的rem會隨之改變
#2. calc視口換算
當前裝置尺寸 / 基準尺寸 *100
font-size: calc(100vw / 375*100);
#3. scss函式+js改變html字型
$base-fontsize:37.5px; //基準值
@function rem($px)
var html = document.documentelement;
html.style.fontsize = html.clientwidth / 375 * 37.5 + 'px';
手機**團隊開發的移動端適配外掛程式
data-dpr: 裝置畫素比
device-width：裝置的寬度
width:視口的寬度
initial-scale: 縮放的比例
user-scalable=no 是否允許使用者縮放頁面 no|yes 0|1
預設以750的設計稿做為基準值
class="container">
>>
>>
>>
>
父容器box需要設定
display:flex;
flex-direction:column
height:100vh 也可以設定100% 但是要注意html，body也要設定
header、footer高度是乙個固定的值
中間的容器main
width:100%;
height:100%;
overflow:auto;
JS PC端設定rem 移動端設定rem
window.onresize function 頁面剛重新整理時呼叫 init function init const basesize 32function setrem 初始化 setrem window.onresize function 這裡是乙個pc和h5的 rem樣式 寫在了乙個htm...
移動端rem使用
1 移動端設計圖750時，html font size 50px。使用方法 1 新增viewport。2 在頁面最裡面引入該段js 建議在head裡面引入 3 css 的編寫，設計圖為750px時，頁面標註大小除以100即可，例如 設計圖標註的是，寬300px,高300px。使用rem就是，widt...
移動端rem布局
時隔半年，再次回顧移動端開發，感覺自己又張知識了 我們平常用的較多的單位是px,百分比，rem,em,vw,vh，但是在移動端用的比較多的還是rem，但是他在用的過程中要注意什麼呢，怎麼用呢，下面就開始啦。他是乙個度量單位，可以用他作為高寬，字型的單位。他以html中設定font size的大小為基...