一、新增meta
<另外移動端還可以加上以下metameta
name
="viewport"
content
="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>
<二、引入jsmeta
name
="format-detection"
content
="telephone=no"
/>
<
meta
name
="format-detection"
content
="email=no"
>
<
meta
name
="x5-orientation"
content
="landscape"
>
<
meta
name
="screen-orientation"
content
="landscape"
>
try catch (c) }(); !function (a, b) var d, e = a.document, f = e.documentelement, g = e.queryselector('meta[name="viewport"]'), h = e.queryselector('meta[name="flexible"]'), i = 0, j = 0, k = b.flexible || (b.flexible = {}); if (g) else
view code
view code新增完後,你的專案html顯示這樣
此時,1rem等於37.5px
三、當設計稿是750的時候,也就是iphone6的螢幕解析度(750px是iphone6的物理畫素)
例子:當拿到設計稿100*200的矩陣,對於px其實是50*100,當配置了適配方案,為了省事,不用換算,(預設裝好了less)
@rem-base: 75;這樣,直接拿設計稿的尺寸就好了,完全不用我們換算,就可以實現移動端適配。div
為了驗證是不是50px*100px,我們計算一下:
width = 100 * 37.5 / 75 = 50
height = 200 *37.5 / 75 = 100
四、全域性配置引入base.scss,這樣可以直接使用裡面的變數
安裝sass-resources-loader:yarn add sass-resources-loader -d
vue.config.js增加配置:
module.exports =)還有一種方案,需要使用amfe-flexible和postcss-pxtorem.end()
})},
一、安裝amfe-flexible和postcss-pxtorem
yarn add amfe-flexible
yarn add postcss-pxtorem -d
二、main.js引入amfe-flexible
引入後,html標籤顯示這樣
引入成功,既1rem = 37.5px(iphone6尺寸)
三、增加postcss-pxtorem配置
在package.json增加postcss設定
"postcss": ,這裡配置rootvalue為37.5的話,就是1比1寫法了。"postcss-pxtorem": }}
比方寫乙個100px*100px的div,那麼
div{
width:100px;height:100px;
就好了。會自己轉化成rem適配,注意需要重啟專案!!!
以上,over,謝謝閱讀。
移動端rem使用
1 移動端設計圖750時,html font size 50px。使用方法 1 新增viewport。2 在頁面最裡面引入該段js 建議在head裡面引入 3 css 的編寫,設計圖為750px時,頁面標註大小除以100即可,例如 設計圖標註的是,寬300px,高300px。使用rem就是,widt...
vue 專案設定移動端rem
第一種直接設定 fnresize window.onresize function function fnresize 禁止雙擊放大 document.documentelement.addeventlistener touchstart function event false var lastt...
移動端使用rem布局
移動端的px其實指的是pt,也就是邏輯解析度。以iphone6為例,寬度是750px,但是在css中iphone6的寬度是375px,也就是375pt,而設計稿一般是750px的。所以在移動端中css的px是設計稿中px的一半。將設計稿中的px轉換為移動端中的px 如果設計稿是750px的,在其中有...