vue移动端h5适配解决方案(lib-flexible+px2rem-loader)

骑猪看日落 2022-03-15 02:58 544阅读 0赞

先介绍用到的两个工具：   
px2rem-loader：将css中的px转为rem单位，用了它就不用自己计算rem值了   
lib-flexible：根据设备宽度，修改根元素html的font-size，以适配不同终端

配置  
安装1：npm i px2rem-loader --save -dev  
安装2：npm i lib-flexible --save  
配置1：入口文件main.js中引入：import 'lib-flexible/flexible.js'  
配置2：   
build/utils.js中：

const cssLoader = \{  
    loader: 'css-loader',  
    options: \{  
      minimize: process.env.NODE\_ENV === 'production',  
      sourceMap: options.sourceMap  
    \}  
  \}

const px2remLoader = \{  
    loader: 'px2rem-loader',  
    options: \{  
      remUnit: 75 //默认换算为1rem为75px，可根据你的原型图修改  
    \}

\}  
\---------------------   
同时，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) \{  
　　**const loaders = options.usePostCSS ? \[cssLoader, postcssLoader, px2remLoader\] : \[cssLoader, px2remLoader\]**

if (loader) \{  
　　loaders.push(\{  
　　loader: loader + '-loader',  
　　options: Object.assign(\{\}, loaderOptions, \{  
　　sourceMap: options.sourceMap  
　　\})  
　　\})  
　　\}

if (options.extract) \{  
　　return ExtractTextPlugin.extract(\{  
　　use: loaders,  
　　fallback: 'vue-style-loader'  
　　\})  
　　\} else \{  
　　return \['vue-style-loader'\].concat(loaders)  
　　\}  
\}

发表评论取消回复

表情：

评论列表（有 0 条评论，544人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5 移动端适配

H5 移动端适配 * 前言 * 一、案例说明 * 二、移动端适配的两大要素 * 三、使用示范前言移动端的适配是前端开发者必须考虑的一个问题...

「爱情、让人受尽委屈。」/ 2024年04月19日 10:09/ 0 赞/ 110 阅读

相关移动端适配方案

* rem * 媒体查询 * vw,vh（安装postcss-px-to-viewport插件后进行简单配置就可以在页面直接使用px单位，项目编译后自动转换为对...

约定不等于承诺〃/ 2024年04月17日 15:18/ 0 赞/ 99 阅读

相关 PC、移动端适配 - Vue、H5、 Jquery

Vue 移动端、PC 端适配可以使用lib-flexible、amfe-flexible、postcss-pxtorem、postcss-px2rem、postcss-px-t

野性酷女/ 2024年03月22日 15:41/ 0 赞/ 84 阅读

相关移动端适配方案

舍弃flexible.js,使用vw+rem进行适配由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本

本是古典何须时尚/ 2023年10月05日 13:07/ 0 赞/ 36 阅读

相关移动端适配方案

1、按照比例缩放相对单位：vw、vh、rem… 下面以html标签为例： html { font-size: 26.6667vw;

╰+哭是因爲堅強的太久メ/ 2023年07月13日 15:15/ 0 赞/ 34 阅读

相关 H5移动端—移动端布局及适配

1.移动端基本环境 viewport 视口(可视区窗口) 默认不设置viewport一般可视区宽度在移动端是980 widt

布满荆棘的人生/ 2023年06月08日 13:56/ 0 赞/ 31 阅读

相关移动端适配的解决方案

原文参考链接： [https://github.com/amfe/article/issues/17][https_github.com_amfe_article_issu

雨点打透心脏的1/2处/ 2022年06月13日 04:39/ 0 赞/ 269 阅读

相关移动端 - 适配方案

1. 百分比适配 2. viewport 适配 3. rem 适配 4. 弹性盒模型 box flex 补充

╰+攻爆jí腚メ/ 2022年05月26日 10:10/ 0 赞/ 311 阅读

相关 vue移动端h5适配解决方案(lib-flexible+px2rem-loader)

先介绍用到的两个工具： px2rem-loader：将css中的px转为rem单位，用了它就不用自己计算rem值了 lib-flexible：根据设备宽度，修改根元

骑猪看日落/ 2022年03月15日 02:58/ 0 赞/ 545 阅读

相关移动端 H5页面适配

![这里写图片描述][1] 一、基础概念 -------------------- 在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：dpr

谁借莪１个温暖的怀抱￠/ 2021年09月18日 09:04/ 0 赞/ 704 阅读