一、环境

使用lib-flexible,为html上添加动态的font-size（屏幕宽度/10），根据宽度而变化
例如浏览器宽度为750px，则会自动设置为75px， 1rem就=75px

使用postcss-pxtorem，自动将css的px转成rem，

两个插件配合使用，就能做到自适应大小

二、步骤

2.1 安装 lib-flexible

npm install lib-flexible --save-dev

2.2 引入 lib-flexible

在main.js中引入lib-flexible

// px2rem 自适应
import 'lib-flexible'

2.3 安装 postcss-pxtorem

npm install postcss-pxtorem --save-dev

2.4 配置postcss-pxtorem

在项目根目录新建文件vue.config.js，然后如下配置：

注意脚手架不同，postcss版本也会不同，配置方法会有些许差异，不然会报错！！

vue脚手架4用的（vue-cli@4）

// 适配不同屏幕
const autoprefixer = require('autoprefixer'); //根据浏览器适配css，自动加前缀，不用可以删除
const pxtorem = require('postcss-pxtorem');
module.exports = {//postcss-pxtoremcss: {loaderOptions: {css: {},postcss: {plugins: [autoprefixer(),pxtorem({rootValue: 37.5,  //手机设计稿宽度为375px的propList: ['*'], //属性的选择器，*表示通用exclude: /web/i, //忽略web下的所有文件selectorBlackList: ['.a-'] // 过滤掉.a- 开头的class，不进行rem转换}),]}}},
};

vue脚手架5用的（vue-cli@5）

// 适配不同屏幕
const autoprefixer = require('autoprefixer'); //根据浏览器适配css，自动加前缀，不用可以删除
const pxtorem = require('postcss-pxtorem');
module.exports = {//postcss-pxtoremcss: {loaderOptions: {css: {},postcss: {postcssOptions: {plugins: [autoprefixer(),pxtorem({rootValue: 37.5,  //手机设计稿宽度为375px的propList: ['*'], //属性的选择器，*表示通用exclude: /web/i, //忽略web下的所有文件selectorBlackList: ['.a-'] // 过滤掉.a- 开头的class，不进行rem转换}),]}}}},
};

如果想ios，ipad，iPod设备无效

// 在index.html中添加如下代码
<script>/(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
</script>

2.5 配置pc自适应

修改flexble.js,（npm安装的位置在node_modules/lib-flexble/），建议拉出来单独引用

修改前：

function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = 540 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;
}

修改后：

function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 770) { //大于770像素时，改变自适应策略，改成手机设计稿大小width = width * dpr / 5.12; //520改成width 以pc上也能自适应// 5.12(pc设计稿除以手机，1920/350=5.12)，如果只写电脑 就不需要加//因为rem设置的是手机的设计稿换算的，只能在font-size上动手脚}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}

三、运行测试

vue PC+移动端自适应布局相关推荐

vue移动端自适应布局
vue移动端自适应布局根据postcss-pxtorem来实现自动渲染px至rem,不用再进行手动计算一.实现方式 postcss-pxtorem:将px转换为rem: amfe-flexible ...
移动端自适应布局和响应式页面兼容移动端布局
上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局--移动端自适应布局和响应式页面兼容移动端布局. 目录一.移动端自适应布局 1.rem 什么是rem ...
js页面自适应屏幕大小_移动端自适应布局方法的calc()与vw
前端人员在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不 ...
html5 自适应手机布局,科技常识：html5移动端自适应布局的实现
今天小编跟大家讲解下有关html5移动端自适应布局的实现 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html5移动端自适应布局的实现的相关资料,希望小伙伴们看了有所帮助. 场景:为适 ...
vue pc移动页面自适应
自适应布局 * @midea 媒体布局 * flex 布局 * %百分比布局 * rem 布局 * vw.vh 布局局部自适应接手他人的项目,把某个页面改为自适应的,若用插件,就要动配置文件,导致 ...
移动端自适应布局方案
文章目录 DPR rem布局实现机理优点缺点相关技术方案 viewport 布局优点缺点相关技术方案媒体查询+等比缩放原理 DPR DPR = 设备物理像素 / CSS像素 DPR = ...
php 网站移动端自适应,HTML5 移动端自适应布局
场景:为适应各种大小的屏幕自适应布局我知道的两种方式 1.使用媒体查询,下面制定了几种适应方式,例如第一个表示屏幕宽度在320px-360px之间的,html字体大小适配为13.65px @medi ...
h5移动端自适应布局
场景:为适应各种大小的屏幕自适应布局我知道的两种方式 1.使用媒体查询,下面制定了几种适应方式,例如第一个表示屏幕宽度在320px-360px之间的,html字体大小适配为13.65px <s ...
VUE 移动端自适应布局终极解决方案
大佬们欲知详情看看这个 https://github.com/imochen/hotcss 引入px转rem插件 https://www.npmjs.com/package/px2rem-loader ...

vue PC+移动端自适应布局

一、环境

二、步骤

2.1 安装 lib-flexible

2.2 引入 lib-flexible

2.3 安装 postcss-pxtorem

2.4 配置postcss-pxtorem

2.5 配置pc自适应

三、运行测试

vue PC+移动端自适应布局相关推荐

最新文章

热门文章

vue PC+移动端 自适应布局

一、环境

二、步骤

2.1 安装 lib-flexible

2.2 引入 lib-flexible

2.3 安装 postcss-pxtorem

2.4 配置postcss-pxtorem

2.5 配置pc自适应

三、运行测试

vue PC+移动端 自适应布局相关推荐

最新文章

热门文章

vue PC+移动端自适应布局

vue PC+移动端自适应布局相关推荐