vue使用rem实现 移动端屏幕适配

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

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

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

安装 postcss-pxtorem

npm install postcss-pxtorem --save

新建rem.js文件

const baseSize = 32
// 设置 rem 函数
function setRem () {
 // 当前页面宽度相对于 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

<template>
 <div class="hello">
 test
 </div>
</template>

<script>
 export default {
 name: 'HelloWorld',
 data() {
  return {
  msg: 'Welcome to Your Vue.js App'
  }
 }
 }
</script>

<style scoped>
 .hello {
 text-align: center;
 font-size: 20px;
 width: 300px;
 height: 400px;
 background:red;
 }
</style>

效果

补充：下面看下Vue用rem布局

使用vue.js搭建一个移动端项目，怎样做到自适应呢？当然选择rem布局是比较方便快捷的。

在使用vue-cli搭建好项目框架后，在目录结构的index.html文件中添加一段代码：

<script>
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'
}
</script>

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

总结

以上所述是小编给大家介绍的vue使用rem实现 移动端屏幕适配 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解vue移动端项目的适配(以mint-ui为例)

    1.使用vue-cli脚手架生成项目骨架,略. 2.相关配置: rem适配: index.html加入以下代码,并在head中加入以下meta; <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWi

  • vue项目中使用lib-flexible解决移动端适配的问题解决

    第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible $ npm install lib-flexible --save 二.在项目的入口js文件中引入lib-flexible import 'lib-flexible' 通过要以上两步,就完成了在vue项目使用lib-flexible来解决移动端适配了. lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size

  • vue中的适配px2rem示例代码

    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

  • 详解vue2.0 不同屏幕适配及px与rem转换问题

    详解vue2.0 不同屏幕适配及px与rem转换问题

    因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没商量. 第一步:因为rem是根据更元素来计算大小,所以,捕捉到当前屏幕的大小并赋值给html,这是其一 第二步:使用px2rem插件,来捕捉当前项目的所有px,直接计算相对应数值. 这样,以后写界面,就可以直接用px来构建界面,不用自己去计算啦! 1.安装插件(我是安装了淘宝镜像,所以是cnpm,若

  • vue项目中公用footer组件底部位置的适配问题

    需求: footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后:有的页面内容很少,高度很低,footer需要放在浏览器可视窗口的最底部:窗口高度的变化时,footer的位置需要重新调整. 可能有的伙伴首先想到的 position: fixed; bottom: 0; 这确实能解决页面内容不足以撑满浏览器高度的情况,但由于footer组件是公用的,在内容很多的页面调用时,会出现内容被组件覆盖的情况. 我最终的解决方案: 给内容不足以撑满浏

  • vue 移动端适配方案详解

    vue 移动端适配方案详解

    一.方法一:rem 布局 在主入口:index.html,<head> 标签内添加如下JS 代码:(实现在标准 375px宽度适配下,100px = 1rem.) <script> (function () { // 在标准 375px 适配下,100px = 1rem; var baseFontSize = 100; var baseWidth = 375; var set = function () { var clientWidth = document.documentEl

  • vue做移动端适配最佳解决方案(亲测有效)

    vw 解决方案 1. 安装并配置PostCss插件 复制代码 代码如下: npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S 2. 对 PostCss 进行配置 找到在根目录中的.postcssrc.js,对PostCSS插件进行配置 module.exports = { "plugins":

  • vue移动端html5页面根据屏幕适配的四种解决方法

    vue移动端html5页面根据屏幕适配的四种解决方法

    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有死个方法可以适用. 方法一:引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案:https://github.com/amfe/lib-flexible(此处可点击) 淘宝的其实也和viewport的有点像,但是它主要是根据设备设备像素比设置scale的值,保持视口device-wid

  • vue使用rem实现 移动端屏幕适配

    要想移动端适配 并使用 rem  您需要先看这篇文章,配置好less ➡️ 在vue 中使用 less,就可以使用rem了 如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招. postcss-pxtorem:转换px为rem的插件 安装 postcss-pxtorem npm install postcss-pxtorem --save 新建rem.js文件 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前

  • vue移动端屏幕适配详解

    flexible vue移动端屏幕适配,查看项目地址 效果预览 # 项目clone git clone git@github.com:NicolasGui/flexible.git # 进入项目目录 cd flexible # 安装依赖 npm install # 启动服务 localhost:8080 npm run dev 原理概述 插件安装 # 插件一:amfe-flexible npm install amfe-flexible --save #  插件二: node-sass npm

  • 详解基于Vue/React项目的移动端适配方案

    详解基于Vue/React项目的移动端适配方案

    前言 本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案. px2rem或postcss-px2rem 在移动端中,为了设配不同的设备,通常使用rem来做适配. rem是通过根元素进行适配的,网页中的根元素指的

  • vue实现PC端分辨率适配操作

    依赖 项目基础配置使用 vue-cli 生成 自适应方案核心: 阿里可伸缩布局方案 lib-flexible px转rem:px2rem,它有webpack的loader px2rem 开始 先使用vue脚手架初始化一个webpack项目 vue init webpack 项目名 项目初始化好了之后,进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loader npm i lib-flexible -S npm i px2rem-loader -D 安装好了之

  • 浅谈vue 移动端完美适配方案

    前言:根据最近做的一个医疗手机端项目总结在移动端,vue怎么在不同屏幕上做根据不同屏幕大小适配 1.适配方案 在本项目中我所使用的vue移动方案是使用amfe-flexible 和 postcss-pxtorem 结合)的方式. 首先介绍一下amfe-flexible amfe-flexible 是配置可伸缩布局方案,主要是将 1rem 设为 viewWidth/10. 然后就是这个库 postcss-pxtorem postcss-pxtorem是postcss的插件,用于将像素单元生成rem

  • 基于rem的移动端响应式适配方案(详解)

    基于rem的移动端响应式适配方案(详解)

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识,本质上离不开以下代码 <meta name="viewport" content="width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

  • vue移动端自适应适配问题详解

    vue移动端自适应适配问题详解

    1.vue ui创建项目 2.选择基本配置项 3.运行项目 4.新建rem.js文件 // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改. const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小 document.documentElement.style.fontSiz

  • Vue指令实现大屏元素分辨率适配详解

    目录 前言 1. 常见的适配方案 2. CSS3 缩放方案 3. 封装一个缩放指令 4. 后记 前言 随着前端技术的不断发展.数据中心(中台)之类的概念的不断升级.物联网设备的更新和普及,越来越多的业主(项目)喜欢在系统中添加一个或者多个可视化大屏,用来集中的展现数据变化.位置变化等等,老板们也更喜欢称之为“态势”. 当然,作为程序员一般都不关心“老板们”的想法,只要完成项目即可.但是经常会有这样的问题:我有一个大屏的模板,但是用户的浏览器分辨率不够,或者有的有书签栏有的没有书签栏,更或者是有的

  • 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() { // 实际设备页面宽

随机推荐