手机端适配方案 媒体查询和flexbale

Posted tiangeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手机端适配方案 媒体查询和flexbale相关的知识,希望对你有一定的参考价值。

方法一  flexible

一、npm 包安装

lib-flexible 淘宝适配方案 
px2rem px自动转rem

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

二、在main.js中引入lib-flexible**
import ‘lib-flexible/flexible.js‘

三、配置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
})
})
}
方法二媒体查询

 

 

 

 























以上是关于手机端适配方案 媒体查询和flexbale的主要内容,如果未能解决你的问题,请参考以下文章

前端移动端适配 - 媒体查询适配方案

前端移动端适配 - 媒体查询适配方案

浅谈媒体查询

antdesignvue手机怎么适配

Rem实现移动端适配

适配方案之移动端适配