手機端適配方案媒體查詢和flexbale

時間 2019-11-13

標籤手機適配方案媒體查詢 flexbale 简体版

原文原文鏈接

方法一  flexible
1、npm 包安裝
lib-flexible 淘寶適配方案 
px2rem px自動轉rem

npm install lib-flexible --save
npm install px2rem-loader 

2、在main.js中引入lib-flexible**
import 'lib-flexible/flexible.js'

3、配置build/utils.js
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}


// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
方法二媒體查詢

/* 定一個基準值：100 給設計圖中 1rem應該等於多少px 100 */
/* 根據基準值適配不一樣的屏幕 設計圖的大小100/750 = 當前屏幕的fontsize/當前屏幕的大小 */
@media (min-width: 320px) {
html {
font-size: 42.67px
}
}

@media (min-width: 375px) {
html {
font-size: 50px
}
}

@media (min-width: 750px) {
html {
font-size: 100px
}
}
@media (min-width: 414px) {
html {
font-size: 55.2px
}
}

@media (min-width: 420px) {
html {
font-size: 56px
}
}

@media (min-width: 480px) {
html {
font-size: 64px
}
}
 
js 適配

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.rem {

width: 2rem;

height: 2rem;

font-size: 0.5rem;

background-color: red;

}

p {

width: 3rem /* 300/100 */