vue项目中使用rem替换px的实现示例
目录
- 工具
- 安装插件
- 在项目根目录下添加.postcssrc.js文件
- index.html
- 关于
移动端页面适配，rem和vw适配方案
基础点：rem相对根节点字体的大小。所以不用px;
根字体：字体的大小px;
px：你就当成cm(厘米)这样的东西吧；
基准：750设计稿（一般UI设计师给的都是750的设计稿）；
工具
vue-cli:使用脚手架来搭建vue前端项目
postcss:就是postcss用js插件帮你转换css样式的一个工具。比如，这里的把你的文件里面16px替换成1rem(根大小默认16px的情况）；这样你就不用自己去算了！
cssrem:主要是帮你把px(UI设计给设计稿上的px)转换成对应的rem
然后：还要用js代码去动态算根目录应该有的字体大小，反正就是一段js代码去动态获取屏幕宽度
安装插件
npm i postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url
然后再index.html里面加上
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
在项目根目录下添加.postcssrc.js文件
module.exports = {
"plugins": {
"postcss-import": {}, //用于@import导入css文件
"postcss-url": {}, //路径引入css文件或node_modules文件
"postcss-aspect-ratio-mini": {}, //用来处理元素容器宽高比
"postcss-write-svg": { utf8: false }, //用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理。
"postcss-cssnext": {}, //该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。
"postcss-px-to-viewport": { //把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。
viewportWidth: 750, //视窗的宽度
viewportHeight: 1334, //视窗的高度
unitPrecision: 3, //将px转化为视窗单位值的小数位数
viewportUnit: 'vw', //指定要转换成的视窗单位值
selectorBlackList: ['.ignore', '.hairlines'], //指定不转换视窗单位值得类，可以自定义，可以无限添加
minPixelValue: 1, //小于等于1px不转换为视窗单位
mediaQuery: false //允许在媒体查询中使用px
},
"postcss-viewport-units":{}, //给vw、vh、vmin和vmax做适配的操作,这是实现vw布局必不可少的一个插件
"cssnano": { //主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。
preset: "advanced", //重复调用
autoprefixer: false, //cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。
"postcss-zindex": false //只要启用了这个插件，z-index的值就会重置为1
}
}
}
当你切换不同尺寸的屏幕的时候，需要动态改变根字体的大小，一段简单的js插入在head里面：在public目录下直接新建的shipei.js,然后将这个js引入到index.html的head里面
//shipei.js
(function() {
function autoRootFontSize() {
document.documentElement.style.fontSize = Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';
// 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是不是很简单
}
window.addEventListener('resize', autoRootFontSize);
autoRootFontSize();
})();
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/public.css" rel="external nofollow" type="text/css">
<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="/shipei.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
注意 放到 public 里的东西，可以不用写开头目录，脚手架打包的时候找不到，会去public文件夹找的
关于
getBoundingClientRect().width获取到的其实是父级的右边距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,即父级的宽度+2padding+2border。
此时的clientWidth等于父级的宽度+2*padding,不包括边框的宽度。
当不隐藏子级内容,即overflow为auto时，前者的宽度依然为这个数字,因为父级并没有改编盒模型。后者的宽度为上述得到的宽度-滚动条的宽度(17px);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="divParent" style="background-color: #aaa; padding:8px; border:solid 7px #000; height:200px; width:500px; overflow:hidden;">
<div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px;
height: 400px; width: 600px; border: solid 3px #f00;">
</div>
</div>
</body>
</html>
<script type="text/javascript">
/*
getBoundingClientRect().width获取到的其实是父级的右边距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,即父级的宽度+2padding+2border。
此时的clientWidth等于父级的宽度+2*padding,不包括边框的宽度。
当不隐藏子级内容,即overflow为auto时，前者的宽度依然为这个数字,因为父级并没有改编盒模型。后者的宽度为上述得到的宽度-滚动条的宽度(17px);例子如下:
*/
var divP = document.getElementById('divParent');
var divD = document.getElementById('divDisplay');
var clientWidth = divP.clientWidth;
var getWidth = divP.getBoundingClientRect().width;
divD.innerHTML += 'clientWidth: ' + clientWidth + '<br/>';
divD.innerHTML += 'getWidth: ' + getWidth + '<br/>';
</script>
运行结果是clientWidth为516,他的计算是内容宽+2padding
getWidth(也就是getBoundingClientRect().width）包括内容宽+2padding+2border
第五步：就是将设计稿上的px转换成rem为单位：安装 cssrem插件 (在插件市场）：
然后在 文件-->首选项-->设置 然后搜索cssrem 设置Root Font Size为16即可
到此这篇关于vue项目中使用rem替换px的实现示例的文章就介绍到这了,更多相关vue rem替换px内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
今天,我们使用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 =>
-
vue中的适配px2rem示例代码
前言 做移动端时,适配 是必须的.使用rem单位,可在不同屏幕上完美显示相同的布局.px2rem 插件方便的将px单位转为了rem. px2rem 地址:https://www.npmjs.com/package/px2rem 这应该是vue项目在适配移动端时候,最简单的方法之一 下面是基本步骤(使用cnpm) 1.下载并引入lib-flexible cnpm install --save lib-flexible 在main.js中 :import 'lib-flexible/flexible
-
Vue项目自动转换 px 为 rem的实现方法
前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配置后,在开发中可以直接使用设计图的尺寸开发,项目为我们自动编译,转换成rem. 技术栈 vue-cli:使用脚手架工具创建项目. postcss-pxtorem:转换px为rem的插件. 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通过设置根节点的字体大
-
Vue-cli3.X使用px2 rem遇到的问题及解决方法
把项目脚手架升级为cli3.X了以后,模板简洁了很多,运行起来也更加快速.但是也随之而来是某些兼容问题.比如我们要在项目钟使用px2rem来计算设计稿的时候,我们不能像以前老的脚手架那样操作了.那我们应该来如何设置呢? 首先,我们应该用NPM来安装postcss-px2rem npm i postcss-plugin-px2rem --save -dev 然后我们需要在vue.config.js中创建一个配置.由于在vue-cli3.X中.去掉了build和config文件夹.所有的配置都放到
-
vue打包的时候自动将px转成rem的操作方法
px2rem-loader 需要与 flexible 配合使用,不然px2rem仅仅只是转成rem却不会设置rem的信息 安装 flexible npm i lib-flexible -S 然后在main.js中引入 import 'lib-flexible/flexible' 直接引入的文件需要有优先与引用的组件 安装px2rem-loader npm i px2rem-loader -D 在build的utils.js中找到cssLoader添加一下代码 const px2remLoader
-
Vue中rem与postcss-pxtorem的应用详解
rem 布局 rem是根元素(html)中的font-size值. rem布局不多赘述,有很多详细说明rem布局原理的资料. 简单的说,通过JS获取设备宽度动态设定rem值,以实现在不同宽度的页面中使用rem作为单位的元素自适应的效果. 新建rem.js文件,于main.js中引用 // 设计稿以1920px为宽度,而我把页面宽度设计为10rem的情况下 const baseSize = 192; // 这个是设计稿中1rem的大小. function setRem() { // 实际设备页面宽
-
关于vue利用postcss-pxtorem进行移动端适配的问题
刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功,后来经过自己不断尝试之后终于成功了.稍微坐下总结: 1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置,而不要用webpack-simple,因为webpack里面很多插件加载器之类的都是给你预配好的,这样在项目构建中就不会遗漏什么. 2.cnpm install postcss-pxtorem -D安装postcss-pxtorem,此插件如果你用的是webpack
-
vue3.0中使用postcss-pxtorem的具体方法
postcss-pxtorem是PostCSS的插件,用于将像素单元生成rem单位. 前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用. 1.安装依赖 npm install postcss-pxtorem -D 2.设置规则(更改postcss.config.js,该文件为使用vue-cli3自动创建的文件) module.
-
vue项目中使用rem替换px的实现示例
目录 工具 安装插件 在项目根目录下添加.postcssrc.js文件 index.html 关于 移动端页面适配,rem和vw适配方案 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基准:750设计稿(一般UI设计师给的都是750的设计稿): 工具 vue-cli:使用脚手架来搭建vue前端项目 postcss:就是postcss用js插件帮你转换css样式的一个工具.比如,这里的把你的文件里面16px替换成1rem(根
-
vue项目中使用rem,在入口文件添加内容操作
在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码: <script> window.onload = function () { var setRem = function () { // UI设计稿的宽度 var uiWidth = 1200; // 移动端屏幕宽度 var winWidth = document.documentElement.clientWidth; // 比率 var rate = winWidth / uiWidth; //
-
手把手教你如何在vue项目中使用rem布局
目录 如何在vue项目中使用rem布局 方法一:使用lib-flexible 1. 安装包 2. 引入文件 3. 根据需要设置rem 4.使用rem 方法二:使用postcss-pxtorem 1. 安装包 2. 创建rem.js文件 3. 新建 .postcssrc.js 4. 在main.js中引入 5. 设置body的font-size 6. 可参照流程图 总结 如何在vue项目中使用rem布局 场景: 在我们开发移动端项目中,实现手机页面布局,需要使用rem布局,那么该如何使用呢? 本文
-
在Vue项目中,防止页面被缩放和放大示例
现在vue的脚手架生成项目之后我们会发现index.html页面中. 在head标签中,我们会看到meta标签中有一条显示是 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"> 但是我们发现这条语句中只是让user-scalable=0,这是不让用户进行缩放. 可以页面会在两个手指进行放大!!! 可以页面会在两个手指进行放大!!! 可以
-
vue项目中vue-i18n和element-ui国际化开发实现过程
在vue构建的项目中,我们常用element-ui插件,在我的博客前面有讲述,具体怎么用vue-i18n插件进行国际化开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行.element-ui插件自身也提供了语言包.具体的配置和使用方法参考如下: 默认你已构建好了一个vue项目,在vue项目中安装vue-i18n以及element-ui插件 cnpm i vue-i18n --save-dev cnpm i element
-
vue项目中使用百度地图的方法
1.在百度地图申请密钥: http://lbsyun.baidu.com/ 将 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的 密钥替换成你申请的,在 vue项目的index.html引用. 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: {
-
Vue项目中最新用到的一些实用小技巧
写在前面 在最近的 Vue 项目中,为了完成需求使用了一些小技巧,做个笔记,或许也能帮到道友. 阅读重点 需求一:为路径配置别名 在开发过程中,我们经常需要引入各种文件,如图片.CSS.JS等,为了避免写很长的相对路径(../),我们可以为不同的目录配置一个别名. 找到 webpack.base.config.js 中的 resolve 配置项,在其 alias 中增加别名,如下: 创建一个 CSS 文件,随便写点样式: .avatar display: flex; justify-conten
-
vue项目中实现图片预览的公用组件功能
今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件那边也会有一个查看影像的按钮. 所以,根据需求,多个组件需要用到查看影像的功能,所以考虑做一个公用组件,通过组件传值的方法将查看影像文件的入参传过去. 后来,产品要求图片可以旋转缩放. 废话不多说,贴上代码: <template> <div class="filePreview&q
-
vue使用技巧及vue项目中遇到的问题
这里给大家分享一下vue中的一些技巧,希望对大家有用处.(话不多说上代码) 1,vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开,没有保存已输入的信息.) //在路由组件中: mounted(){ }, beforeRouteLeave (to, from, next) { if(用户已经输入信息){ //出现弹窗提醒保存表单,或者自动后台为其保存 }else{ next(true);//用户离开 } 请参考vue文档全局钩子和组件钩子 2,路由懒加载写法: // 我所采用的方
-
Vue项目中使用better-scroll实现一个轮播图自动播放功能
前言 better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个轮播图的效果 这里就先记录一下自己实现这个效果的一些过程吧 思路 1.首先要确定自己的HTML结构 基本结构就是一个wrapper包含一个content 2.其次需要明白的一个页面可以滚动的原理在于 当内容的高度超出了容器的高度才可以实现滚动 如果没有超出 那么就没有滚动的必要 因此第一点需要实现的就是 获取到所有内容的高度 由于实现的是一个轮播