vue项目实现部分页面使用rem

要想移动端适配并使用 rem 您需要先看这篇文章，配置好less ➡️ 在vue 中使用 less，就可以使用rem了

如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。

postcss-pxtorem：转换px为rem的插件

安装 postcss-pxtoremnpm install postcss-pxtorem --save

新建rem.js文件const baseSize = 32

// 设置 rem 函数

functionsetRem () {

// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。

const scale = document.documentElement.clientWidth / 750

// 设置页面根节点字体大小

document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'

}

// 初始化

setRem()

// 改变窗口大小时重新设置 rem

window.onresize = function() {

setRem()

}

并引用进main.js文件内import './rem'

修改.postcssrc.js 文件

在.postcssrc.js文件内的 plugins 添加以下配置，配后就可以在开发中直接使用 px 单位开发了"postcss-pxtorem": {

"rootValue": 32,

"propList": ["*"]

}

helloworld.vue

test

export default{

name: 'HelloWorld',

data() {

return{

msg: 'Welcome to Your Vue.js App'

}

.hello {

text-align: center;

font-size: 20px;

width: 300px;

height: 400px;

background:red;

}

效果

此处已vue为例,在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:fnResize();

window.onresize = function () {

fnResize();

}

function fnResize() {

var deviceWidth = document.documentElement.clientWidth || window.innerWidth;

if (deviceWidth >= 750) {

deviceWidth = 750;

}

if (deviceWidth <= 320) {

deviceWidth = 320;

}

document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px';

}

然后在写css就可以将px单位换成rem.

这里设置的比例是100px=1rem,

例如:宽度为100px时,可以直接写成1rem

vue项目实现部分页面使用rem_vue 中使用rem布局相关推荐

vue项目某个APP页面实现手机物理按键返回、路由拦截、localStorage存取参数
vue项目某个APP页面实现手机物理按键返回.路由拦截.localStorage存取参数最近做个功能:在web系统里面嵌套两个app页面,当然APP页面在web系统上没有路由跳转,而是从另外系统扫码 ...
vue项目keepAlive保持页面状态（详情页返回列表页不刷新）
vue项目keepAlive保持页面状态(详情页返回列表页不刷新) 在vue项目中,存在从列表页跳转到详情页查看,而后又返回列表页的操作时,如果列表过长,我们往往希望从详情页返回列表页时,列表页能留在 ...
vue 中使用rem布局
在用vue或react等工具搭建一个移动端项目时,怎样做到自适应呢? 当然选择rem布局比较方便快捷. 此处已vue为例,在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添 ...
七十三、Vue项目城市详细页的动态路由，Banner布局和公用图片画廊组件拆分
2020/11/04. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
vue项目--问题解答整理（持续更新中......）
点击跳转至原笔记(此处总是包含最新的解答,慢慢同步到此CSDN) vue vue中的动态注入数据为:属性名,举例:< img :src="list"> <styl ...
VUE项目部署Tomcat页面刷新404问题解决方法
问题描述 vue项目在本地开发环境运行正常,打包部署至线上Tomcat服务后,不刷新浏览器时工作正常,一刷新浏览器就报404错误,错误截图如下: 错误描述:404,源服务器未能找到目标资源的表示或者是 ...
html中简述rem布局原理,rem布局原理解析
移动端的屏幕大小各异,尤其是安卓机,千奇百怪,各种尺寸的机型都有,而且有1倍屏,2倍屏,3倍屏之分,作为精益求精的前端,我们希望找到一种完美适配各种机型的方案.rem是现在主流的移动端自适应布局方案, ...
list vue 删除后页面渲染_浅谈Vue项目实战（页面渲染+事件绑定）
页面渲染 vue是不会去操作dom节点,是有数据去操控节点,在js文件数据都在data里 *js代码片* export default { data() { return { formInline: ...
php 绝对刷新,vue项目线上页面刷新报404 解决方法(绝对有用)
在上线vue开发的前端网页上线后,刷新页面报404错误,因为网页上显示的是静态绝对路径,实际上服务器上是没有改路径的所以刷新汇报错误. 1.vue框架中解决404 vue router mode 默 ...

vue项目实现部分页面使用rem_vue 中使用rem布局

vue项目实现部分页面使用rem_vue 中使用rem布局相关推荐

最新文章

热门文章