vue 实现 rem 布局的 或者 vw 布局的方法

一、实现 rem 布局

移动端

<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>

方法一、在 index.html 或者 main.js 中添加以下代码:

const setHtmlFontSize = () => {
let deviceWidth =
document.documentElement.clientWidth || document.body.clientWidth
if (deviceWidth >= 750) {
deviceWidth = 750
}
if (deviceWidth <= 320) {
deviceWidth = 320
}
document.documentElement.style.fontSize = `${deviceWidth / 7.5}px`
}
window.onresize = setHtmlFontSize
setHtmlFontSize()

之后,在写 css 时,只要将 px 单位替换成 rem,这里设置的比例是 100px=1rem,例如,宽度为 100px 时,可以直接写成 1rem。

方法二、cli3 使用 lib-flexible 和 将 px 自动转换为 rem 插件

1、安装插件

npm install lib-flexible --save

npm install px2rem-loader --save-dev

或选择

npm install postcss-plugin-px2rem --save-dev(推荐)

或选择

npm install postcss-px2rem --save-dev

2、配置插件

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

import 'lib-flexible/flexible'

3、三种插件的 cli3 配置:

在 vue.config.js 中

//px2rem-loader配置
module.exports = {
chainWebpack: config => {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({
remUnit: 75
})
}
}
//postcss-plugin-px2rem
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 75, //换算基数, 默认100 ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
//propWhiteList: [], //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)\/如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
// selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
// replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
mediaQuery: false, //(布尔值)允许在媒体查询中转换px。
minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
})
]
}
}
}
}
//postcss-px2rem配置
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5 //设计图除10之后的一半,兼容第三方库px转成rem样式变小的情况
})
]
}
}
}
}

二、cli3 实现 vw 布局

vw 是基于 Viewport 视窗的长度单位

vw:是 Viewport's width 的简写,1vw 等于 window.innerWidth 的 1%

vh:和 vw 类似,是 Viewport's height 的简写,1vh 等于 window.innerHeihgt 的 1%

vmin:vmin 的值是当前 vw 和 vh 中较小的值

vmax:vmax 的值是当前 vw 和 vh 中较大的值

1、安装插件(可以直接转换 px 为 vw)

npm i postcss-px-to-viewport -D

2、在 vue.config.js 中

module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px-to-viewport')({
viewportWidth: 750, //视口宽度,这里设置为跟设计稿宽度一致;
viewportHeight: 1334, //视口高度,随便设置一个就可以;
unitPrecision: 3, //转换后值的精度,3表示保留3位小数;
viewportUnit: 'vw', //转换成什么视口单位,这里当然是vw;
selectorBlackList: ['.ignore', '.hairlines'], //是一个选择符数组,对应声明中的像素单位不会转换;
minPixelValue: 1, //最小像素值,大于等于这个值才会转换;
mediaQuery: false //是否转换媒体查询中的像素。
})
]
}
}
}
}

vue 实现 rem 布局的 或者 vw 布局的方法的更多相关文章

  1. 细说移动端 经典的REM布局 与 新秀VW布局

    和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局 实现单边边框1px 实现多边边框1px 实现边框圆角 实现容器固定 ...

  2. css之vw布局

    vw,vh是视口单位,是相对视口单位,与百分百布局不一样的是,百分百是相对于父及元素,而vw布局是相对与窗口. 而rem布局是要与js一起配合 // 以iphone6设计稿 @function px2 ...

  3. 我的Vue之旅、01 深入Flexbox布局完全指南

    花了几个小时整合的"A Complete Guide to Flexbox"最新版本,介绍了flexbox的所有属性,外带几个实用的例子. 传统布局.Flexbox 布局的传统解决 ...

  4. 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  5. 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC

    静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...

  6. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  7. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  8. Android布局_布局概述和LinearLayout布局

    一.布局概述: 布局为UI提供了一个可视化的结构,比如对于一个activity或者app widget的UI,你可以用两种方式声明布局: 在XML中声明UI元素 在运行时实例化布局元素(在java代码 ...

  9. DIV+CSS 网页布局之:混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

随机推荐

  1. nginx secure_link_module 访问包含

    server { listen 80; server_name localhost; #charset koi8-r; #access_log /var/log/nginx/log/host.acce ...

  2. JMeter5.1开发http协议接口之json

    信息头指定是json 传json 包含传token,请参考:https://www.cnblogs.com/uncleyong/p/11668665.html

  3. mysql之子查询、视图、事务及pymysql等

    数据准备 CREATE TABLE `emp` ( `id` int(0) NOT NULL AUTO_INCREMENT, `name` varchar(10) NOT NULL, `gender` ...

  4. 【java】int与bigdecimal的相互转换

    int转bigdecimal BigDecimal number = new BigDecimal(0); int value=score; number=BigDecimal.valueOf((in ...

  5. Centos安装JDK(java环境)

    王小私下问我 centos 中 jdk 怎么安装呀,所以再次整理了这篇基础环境搭建的文章. 1.创建java目录2.下载上传jdk3.解压jdk4.配置环境变量 1.创建java目录 首先我们创建ja ...

  6. springMVC学习2

    参数绑定 默认支持的参数类型 @Override public Item queryItemById(int id) { Item item = this.itemMapper.selectByPri ...

  7. 通过ALTER DATABASE postgres SET 解决 plv8 plv8.start_proc 问题

    通过plv8.start_proc 我们可以使用类似钩子的改变 ,方便的扩展plv8,比如基于plv8.start_proc 的require 实现 命令 ALTER DATABASE postgre ...

  8. 8个SpringBoot精品项目

    8个SpringBoot精品项目 https://gitee.com/52itstyle/spring-boot-seckill 秒杀 https://gitee.com/52itstyle/spri ...

  9. 网络协议 16 - DNS 协议

    为什么在地址栏输入域名,就能直接访问到对应服务器?全局负载均衡和内部负载均衡又是什么?这些都和 DNS 解析息息相关,让我们一起来解密 DNS 解析.     其实说起 DNS 解析,应该都知道它很像 ...

  10. some 模板

    注:此博客部分模板(也有可能是全部)来源于其它大佬的bolg 1.高精度 #include<bits/stdc++.h> #define MAXN 501 ; ; inline ; : ; ...