vue 移动端适配flexible.js使用方法

原理：

flexible.js 适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-size,从而达到每个元素宽高自动变化，适配不同屏幕

操作步骤：

1.安装lib-flexible.js

npm install lib-flexible --save

2.在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible/flexible'

解释：

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem

注意：

1.检查一下html文件的head中，如果有 meta name="viewport"标签，需要将他注释掉，因为如果有这个标签的话，lib-flexible就会默认使用这个标签。而我们要使用lib-flexible自己生成的 meta name="viewport"来达到高清适配的效果。

2.因为html的font-size是根据屏幕宽度除以10计算出来的，所以我们需要设置页面的最大宽度是10rem。

3.如果每次从设计稿量出来的尺寸都手动去计算一下rem，就会导致我们效率比较慢，还有可能会计算错误，所以我们可以使用px2rem-loader自动将css中的px转成rem

使用webpack 的px2rem-loader,自动将px转换为rem

1.安装px2rem-loader

npm install px2rem-loader --save-dev

2.配置px2rem-loader

在build.js/util.js 文件中，添加如下配置

在generateLoaders 函数里将

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

修改为

const loaders = options.usePostCSS ? [cssLoader, px2remLoader, postcssLoader] : [cssLoader, px2remLoader]

添加

var px2remLoader = {

loader: 'px2rem-loader',

options: {

remUnit: 100,

remPrecision:8,

}

注意： flexible.js 转化px时不支持行内样式的转换

vue 移动端适配flexible.js使用方法相关推荐

移动端适配+flexible.js+rem适配
移动端适配前沿: 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问 ...
移动端适配--flexible.js
引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...
移动端适配-flexible.js使用(解决对外部引入css，px2rem能不能转换rem问题)
移动端flexible.js 适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应 1.安装lib-flexible.js npm install lib- ...
移动端适配flexible.js
1.什么是flexible.js 是一个终端设备适配的解决方案. 是一个用来适配移动端的javascript框架.根据宽度的不同设置不同的字体大小,样式间距都使用rem作为单位,不同屏幕大小适配不同的 ...
前端解决移动端适配的五种方法
移动端适配的五种方法所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示第一种方法:viewport适配原理:通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图 ...
element 手机适配_解决手机移动端适配的五种方法
移动端适配的五种方法所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示第一种方法:viewport适配原理:通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图 ...
Vue pc端适配不同分辨率屏幕
前言 pc端一般是不需要适配的,因为现在的显示器分辨率一般都是1920*1080(设计图也是),一般不用管. 但是有一种情况你的设计图是1920*1080,开发完了.发现别人设备因为某些原因不是这个分 ...
解决vue移动端适配问题
解决vue移动端适配问题参考文章: (1)解决vue移动端适配问题 (2)https://www.cnblogs.com/both-eyes/p/10106021.html 备忘一下.
vue、ECharts、flexible.js在移动端的自适应安卓、苹果等机型的分辨率
因我们在移动端中大多数是使用rem. vw.vh,而 echarts 里面的尺寸只能写 16或16%,有的如:fontSize 之类的只有16 .导致写的时候按分辨率750×1334px ,在分辨率4 ...

vue 移动端适配flexible.js使用方法

vue 移动端适配flexible.js使用方法相关推荐

最新文章

热门文章