px2rem

很多同学可能在写h5的时候，也会遇到移动端如何控制屏幕自适应问题！ 在移动端网页开发中，我们可以用手机淘宝的flexible．那么在vue当中，也同样可以用！ 接下来就介绍下如何在vue-cli配置的项目里来实现屏幕自适应 一、首先，我们需要安装flexible库． 项目目录下 cmd命令：npm install lib-flexible 二、然后在项目入口文件main.js里引入lib-flexible import 'lib-flexible' 三、记得配置meta标签,在index.html文件当中（有的已经是有的，就不用修改了） <meta name="viewport" content="width=device-width, initial-scale=1.0"> 四、接着，我们在项目当中写css的时候将px转成rem,我们可以借助px2rem这个工具，也是同样要安装 npm install px2rem-loader 五、然后就是配置这个工具，由于是loader文件，所有的loader文件都是在until.js文件里的一个方法生成的． 我们只要在until.js里找到cssLoader这个对象，在它下面再加一个px2remLoader对象即可 代码如图： 这样就配置完成了，之后命令重启项目，我们只需要在设计稿里量到多少写多少了！ 比如

cnpm i postcss-px2rem -- save cnpm install px2rem -loader -- save 2 、配置px2rem build目录下vue - loader.conf.js中，做如下修改： module.exports = { loaders: utils.cssLoaders({ sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap, extract: isProduction }), transformToRequire: { video: ' src ' , source: ' src ' , img: ' src ' , image: ' xlink:href ' }, postcss:[require( ' postcss-px2rem ' )({ ' remUnit ' : 37.5 , ' baseDpr ' : 2 })] /* 因为我是以750px(iphone6)宽度为基准，所以remUnit为37.5 */ } 3 、在static目录中，建js文件夹，放flex.js: (function(win, lib) { var doc = win.document; var docEl = doc

Vue插件与ui组件样式冲突 vuecli3.x搭建项目 安装了postcss-px2rem但是影响了ui组件的样式 1.因为postcss-px2rem不能忽略指定文件 需要安装postcss-px2rem-exclude （安装前需要先卸载postcss-px2rem，未安装postcss-px2rem直接安装postcss-px2rem-exclude ） （1）安装 （如果安装了 postcss-px2rem ，记得卸载一下 npm uninstall postcss-px2rem） // 安装插件 //如果安装了 postcss-px2rem ，卸载 npm uninstall postcss-px2rem npm install amfe - flexible -- save npm i postcss - px2rem - exclude -- save （2）main.js引入 // main.js引入 import 'amfe-flexible' 2. 在根目录下创建 postcss.config.js内修改 exclude 里是要忽略的文件 //在根目录下创建 postcss.config.js内修改 module . exports = { plugins : { autoprefixer : { } , "postcss-px2rem-exclude" :

配置 less 安装less-loader yarn add less-loader 打开 webpack.config.dev.js 和 webpack.config.prod.js 找到 test: /\.css$/ , 修改为 test: /\.(css|less)$/, 找到 text 字段下的 use ，给use数组在添加一个对象 { loader: require.resolve('less-loader')} 重启服务 启用css作用域 （css只对本页面生效） 打开 webpack.config.dev.js 和 webpack.config.prod.js 找到 loader: require.resolve('css-loader') 下的 options 字段， 给这个对象新增一个字段 modules: true 页面调用 import style from './style.less' console.log(style) // class名均为style对象的key，所以调用必须使用style.App render() { return ( <div className={style.App}> </div> ) } 重启服务 & 查看效果 px转换成rem 安装 postcss-px2rem yarn add postcss-px2rem 打开

本文相关代码地址： github 效果展示： react-demo 项目创建 创建项目文件夹 mkdir react-demo cd react-demo npm init -y 复制代码 依赖安装 yarn add react react-dom yarn add webpack webpack-cli webpack-dev-server webpack-merge babel-core babel-loader babel-polyfill babel-preset-env babel-preset-react babel-preset-stage-0 cross-env file-loader jsx-loader css-loader style-loader url-loader less less-loader --dev 复制代码 webpack 配置 区分开发环境 development 和生产环境 production 配置 分别创建对应的 配置文件 antd-mobile 按需加载 安装插件 yarn add babel-plugin-import -D 复制代码 修改 babel.config.js 配置 module .exports = { presets : [ "@babel/preset-env" , "@babel/preset-react" ]

vue 适配移动端 假设设计图是375 第一步 安装 lib-flexible npm i lib-flexible --save 第二步 安装 px2rem-loader 　　npm install px2rem-loader --save-dev 第三步 引入lib-flexible 　　import 'lib-flexible/flexible' 第四步 最重要的一步 配置utils文件 const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 37.5 } } //在generateLoaders方法中添加px2remLoader const loaders = [cssLoader,px2remLoader] ps:npm的安装命令--save是将包装到package.json的dependencies 而--save-dev是将包装到package.json的devDependencies中 第一个相当于是安装插件 第二个是安装依赖包 注意！！：如果是750的设计图需要将第四步的remUnit替换成750 这样生成出来的比例就是1rem=100px 最后测试下。。 测试没问题 来源： oschina 链接： https://my.oschina.net/u/4370628/blog

依赖 项目基础配置使用 vue-cli 生成（可参考上一篇随笔） 移动端自适应方案核心：阿里可伸缩布局方案 - lib-flexible px 转 rem： px2rem ，它有 webpack 的 loader： px2rem-loader 开始 首先，我们使用 vue 的脚手架 vue-cli 来初始化一个 webpack 项目 没有安装过 vue-cli 的请先安装 vue-cli 安装所需依赖后安装 lib-flexible 和 px2rem-loader 1.下载lib-flexible npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.安装px2rem-loader npm install px2rem-loader 4.配置px2rem-loader 在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如： const cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } }

移动端自适应之flexible 作用： flexible的作用是使页面可以适配不同移动终端 原理： 在页面html标签上添加style = "font-size: 36px;"样式，设置字体大小是屏幕宽度的十分之一。然后页面布局使用rem单位。 VUE: 在vue-cli中需要使用lib-flexible 在组建中引入即可 npm i lib-flexible --save import 'lib-flexible' 注意： 需要在html页面中添加移动端兼容代码： < meta name ="viewport" content ="width=device-width, initial-scale=1.0" > 当然，rem的计算是十分麻烦的，在vue中可使用 px 转 rem 工具： px2rem-loader 工具教程详见：http://hjingren.cn/2017/06/16/基于vue-cli配置移动端自适应/ 钻研不易，转载请注明出处。。。。。。 来源： oschina 链接： https://my.oschina.net/u/4385749/blog/3487360

安装插件 npm install lib-flexible --save npm install px2rem-loader --save-dev 2. 配置插件 在入口文件 main.js 中引入 lib-flexible ： import 'lib-flexible' 3. 在 build/utils.js 文件中配置 px2rem-loader 在 cssLoaders 函数最后面添加如下代码 // 增加代码，px转rem配置（需要将px2remloader添加进loaders数组中） const px2remLoader={ loader: 'px2rem-loader', options: { remUnit: 192, //根据视觉稿，rem为px的十分之一，1920px 192 rem remPrecision: 8//换算的rem保留几位小数点 } 最后说明一下，px 写法上会有些不同，可以参考 px2rem 官方介绍，下面简单介绍一下。 1. 直接写 px，编译后会直接转化成 rem； 2. 在 px 后面添加 /*no*/，不会转化 px，会原样输出； 3. 在 px 后面添加 /*px*/，会根据 dpr 的不同，生成三套代码。 ——————————————— 来源： oschina 链接： https://my.oschina.net/u/4280951

今天，我们使用Vue CLI3 做一个移动端适配 。 前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 复制代码 2、在 main.js 引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.config.productionTip = false new Vue({ render : h => h(App), }).$mount( '#app' ) 复制代码 3、在 index.html 编辑 viewport <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > <!-- 加上以下代码 --> < meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" > <