vue的pc端适配vw vh rem

安装命令： npm  i  postcss-px-to-viewport@1.1.1npm  i   postcss-pxtorem@5.1.1

2.安装完之后在根目录新建postcss.config.js(和src目录平级)

module.exports = {plugins: {'postcss-px-to-viewport': {unitToConvert: 'px', // 需要转换的单位，默认为"px"viewportWidth: 1920, // 设计稿的视口宽度unitPrecision: 5, // 单位转换后保留的精度propList: ['*'], // 能转化为vw的属性列表viewportUnit: 'vw', // 希望使用的视口单位fontViewportUnit: 'vw', // 字体使用的视口单位selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换mediaQuery: false, // 媒体查询里的单位是否需要转换单位replace: true, //  是否直接更换属性值，而不添加备用属性exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)landscapeUnit: 'vw', // 横屏时使用的单位landscapeWidth: 1920 // 横屏时使用的视口宽度},'autoprefixer': {overrideBrowserslist: ['Android 4.1','iOS 7.1','Chrome > 31','ff > 31','ie >= 8'// 'last 10 versions', // 所有主流浏览器最近10版本用],grid: true},//rem适配区域'postcss-pxtorem': {  //1920//移动端的时候 vant的组件库是375px 自己的设计稿是750px// rootValue({ file }) {//  return file.indexOf('vant') !== -1 ? 37.5 : 75;// }, rootValue: 37.5, //换算基数，默认100，规定根节点的font-size为1rem=100px,在设计稿上量出多少px直接在代码中写多少pxpropList: ['*']// 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化 Eg： ['!border']不转化border}}}

3.在src下新建u’tils目录=>rem.js

function setRem() { const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth// 得到html的Dom元素const htmlDom = document.getElementsByTagName('html')[0]// 设置根元素字体大小 htmlWidth 是浏览器的宽度  /96是把浏览器(1920px)分为96份 一份是20px也就是html根元素是默认20pxhtmlDom.style.fontSize = htmlWidth / 96 + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {setRem()
}

4.记得全局main.js引入rem.js

有的人问vh怎么适配：比如可视化大屏需要照顾vh的高度如果不是整屏，带滚动的就不用考虑vh
使用的less(最原始的方式计算)
按照1920*1080设计稿计算的

码云链接：vue项目pc适配源码地址

vue的pc端适配vw vh rem相关推荐

Vue项目pc端适配方案（scss）
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
Vue 移动端、PC 端适配
Vue 移动端.PC 端适配可以使用 lib-flexible.amfe-flexible.postcss-pxtorem.postcss-px2rem 和 postcss-px-to-viewpor ...
Vue pc端适配不同分辨率屏幕
前言 pc端一般是不需要适配的,因为现在的显示器分辨率一般都是1920*1080(设计图也是),一般不用管. 但是有一种情况你的设计图是1920*1080,开发完了.发现别人设备因为某些原因不是这个分 ...
html vw布局,完美的响应式布局vw+vh+rem屏幕适配方案！
一.前言根据前面写的你不知道的css单位,进行了一种响应式布局的思考. 视口布局的优点:宽度和高度全部自动适应!再加上rem布局的字体适应,可以完美解决各种屏幕适配问题! 单位可参考 : 你不知道 ...
flexible.js+rem解决pc端适配
第一步:新建 flexible.js文件这里默认是10等份,手动改为24,此时1rem=1920/24px即80px.(设计稿是1920px的) (function flexible(window, ...
vue实现移动端适配方案
vue实现移动端适配步骤如下: 先安装amfe-flexible和postcss-pxtorem: npm install amfe-flexible --save npm install postc ...
vue 调用pc端本地摄像头、麦克风实现拍照、录视频、录音并上传到服务器指定树文件夹
vue 调用pc端本地摄像头.麦克风实现拍照.录视频.录音并上传自己写blog只是为了下次方便使用过程确实很烦 ,自己摸索加各大网站cv查看可以直接使用 1.调用摄像头拍照录屏首先是npm ...
vue项目pc端使用rem进行适配（lib-flexible+postcss-pxtorem）
1.使用vue-cli创建项目 vue create my-app 2.安装lib-flexible与postcss-pxtorem依赖 npm install lib-flexible -Snpm ...
vue的PC端和移动端分辨率适配
使用lib-flexible和px2rem实现移动端和PC端界面适配注释:lib-flexbles是由阿里团队很早提出解决屏幕分辨率适配的问题.现已不被推荐(因为目前比较主流的适配方案是使用vw和v ...

vue的pc端适配vw vh rem

vue的pc端适配vw vh rem相关推荐

最新文章

热门文章