vue 移动端适配 ,px自动转换rem

最新推荐文章于 2024-10-12 11:35:04 发布

weixin_34116110

最新推荐文章于 2024-10-12 11:35:04 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yaokaixin/p/8488686.html

本文介绍了一种使用lib-flexible和px2rem-loader进行响应式布局的方法，包括安装npm包、引入lib-flexible、配置meta标签及px2rem-loader等步骤，适用于基于750px设计稿的项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在命令行安装

npm i lib-flexible --save

2.引入lib-flexible(在main.js内引入)

import 'lib-flexible'

3.添加meta标签(在项目跟目录index.html中添加)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.安装px2rem-loader

cnpm install px2rem-loader

5. 在build下的 utils.js中，找到generateLoaders 方法，在这里添加

var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 64//设计稿宽度/10  或75
    }
  };
  function generateLoaders(loader, loaderOptions) {

　　　var loaders2 = [cssLoader, px2remLoader];

　　　　　　if (loader) {

　　　　　　　　loaders2.push({

　　　　　　　　　　loader: loader + '-loader',

　　　　　　　　　　options: Object.assign({}, loaderOptions, {

　　　　　　　　　　　　sourceMap: options.sourceMap

　　　　　　　　　　　})

　　　　　　　　}

设计搞一般为750px, 所以remUnit:为75,在写项目时,可以直接写px值,会自动转换为rem.

不打算转换原始值:

font-size:26px /* no*/ px不转成rem

font-size:26px px转成rem

转载于:https://www.cnblogs.com/yaokaixin/p/8488686.html