vue開發移動端使用rem的適配方案

一、新增meta

<

meta 
name
="viewport"
content
="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

<

meta 
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

新增完後，你的專案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 =)

.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": ,

"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的，在其中有...