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>

效果

此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力

原文地址:https://www.cnblogs.com/huangenai/p/9700883.html

时间: 2024-11-08 14:44:44

vue 移动端屏幕适配 使用rem的相关文章

移动端屏幕适配原理以及方法讲解

序言: 今天周日,我正坐在黄埔区图书馆,思索着关于移动端屏幕适配的问题.作为一名年纪轻轻的前端马蓉,不,是码农,移动端屏幕适配的方案的帖子没读过100篇吧,也读过几十篇了.可是今天我又在思考这个问题了,因为下周我有个关于移动端适配的演讲.人生这么短暂,我却把有限的时间奉献到了无限的前端道路上. 根据我不(cong)太(ming)灵(jue)活(ding)的大脑的努力思考.我发现现阶段比较流行移动端适配原理只有一个--就是对元素进行放大和缩小,具体到执行的时候方法有两个(求不打脸). 1个是网页大

移动端页面适配,rem布局

移动端页面适配 em 根据元素自身的字体大小来计算自己的尺寸 rem root em 根据根节点(html)的字体大小来计算自己的尺寸 适配: 各个移动设备,分辨率大小不一致,使我们的页面在各种分辨率下都显示完好(等比的缩放); 根据屏幕的分辨率 动态的设置html的字体大小,来达到页面等比缩放的功能 注意:保证html最终算出来的字体大小 不能小于 12 在最开始先设置一段js代码,获得屏幕宽度,这段js优先于任何css和js <script> (function() { var html

前端关于移动端屏幕适配

1.先谈一下几个概念 像素是度量的单位,可以理解为点 1.css像素 html中度量的单位 用px来计算,在pc中往往 1 css px = 1 物理像素 在不同设备中1css像素对应不同的设备像素(物理像素) 例如:iphone3分辨率是320*480 即 css 1px = 1个物理像素:iphone4 分辨率640x960但屏幕尺寸没有改变,意味着同一块区域像素多了1倍 即 css 1px =2个物理像素: 2.物理像素 表示每英寸所拥有的像素数目,数值越高,代表屏幕能够以更高的密度来显示

移动端屏幕适配方案

本文来源:http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=201811994&idx=1&sn=1c3bae60e2fe13d3bc3aeecaa6a4ef00&scene=23&srcid=abqLbfgvESx4DGNysdG8#rd pc上的网站在移动端上怎么办? 1:如果把移动端的可视区域(320-768)的话,大部分网站都会因为太窄而显示错乱: 2:所以浏览器默认把viewport设置为一个较宽的值

h5移动端屏幕适配

1.rem <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&

移动端屏幕适配解决方案

因原在做移动端适配过程中,一直都是应用淘宝的flexible高清方案解决,也没有认真的去研究过源码.这几天又看到一些普通的适配方案,于是把两者源码放在一起比较,发现高清方案是通过动态的获取了当前设备的dpr值,然后根据dpr值的大小来设定手机的视口的缩放比例,从而实现高清.比如:dpr=2时,设定initial-scale = 0.5 ;  dpr=3时 ,设定initial-scale = 0.333 : 一.手机端viewport详解 <meta name="viewport"

谈谈移动端屏幕适配的几种方法

移动端web开发相对于PC端web开发,我们可以庆幸不用兼容那么多浏览器了,但是随之而来的却是各种屏幕尺寸的适配,个人觉得,比PC端还要费精力.在使用了腾讯优测进行软件测试后,问题得到了有效解决. 响应式布局 简而言之,就是页面元素的位置随着屏幕尺寸的变化而变化,通常会用百分比来定位,而在设计上需要预留一些可被“压缩”的空间. 如上图,其实就相当于页面被压矮了. Cover布局 就跟background-size的cover属性一样,保持页面的宽高比,取宽或高之中的较小者占满屏幕,超出的内容会被

web移动端屏幕适配方案

因为手机屏幕的分辨率大小不一 ,如果使用传统的静态布局,把每个元素的宽高样式写死,在不同的屏幕中就有各种各样的显示效果.这显然不是我们想要的结果.我们需要的是根据屏幕分辨率的不同,来适配不同的样式大小.使不同的手机分辨率下都有相同的样式布局 1.rem适配 1rem就是html标签font-size的大小,在rem适配方案中,我们以rem作为基值来设定元素的大小.1rem单位越大,元素的大小也就越大,1rem单位越小,元素的大小也就越小 实现方法:通过js获取屏幕的分辨率来动态设置1rem的大小

移动端屏幕适配问题

为了做移动适配,css3出了一个新单位rem,rem就是相对于根元素<html>的font-size来做计算,根目录一般用20px(一是方便计算,二是谷歌浏览器不支持12px以下的字体): html{font-size:20px},默认为20px: @media only screen and (max-width: 1220px) and (min-width: 992px){ html{ font-size: 50px; }} 意思就是屏幕的尺寸在992px和1220px范围内html的字