vue中rem的配置的方法示例


Posted in Javascript onAugust 30, 2018

在用vue或react等工具搭建一个移动端项目时,怎样做到自适应呢? 当然选择rem布局比较方便快捷.

开发移动端,我们常常要用到rem+flex,那么vue中如何配置呢,我的做法是这样:

1、在js中统一计算配置

代码如下:

export default function() {
  // var devicePixelRatio = 1;
  // var scale = 1 / devicePixelRatio;
  // document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  // 7.5根据设计稿的横向分辨率/100得来
  // alert(document.documentElement.clientWidth)
  var deviceWidth = document.documentElement.clientWidth;
  // var deviceWidth = window.screen.availWidth
  // alert(navigator.userAgent)
  // alert(deviceWidth)
  // console.log(navigator.userAgent)
  if(deviceWidth > 750) {
    // deviceWidth = 750;
    deviceWidth = 7.5 * 50;
  }

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

  // 禁止双击放大
  document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  }, false);
  var lastTouchEnd = 0;
  document.documentElement.addEventListener('touchend', function (event) {
    var now = Date.now();
    if (now - lastTouchEnd <= 300) {
      event.preventDefault();
    }
    lastTouchEnd = now;
  }, false);
}

然后在main.js中引入使用。

vue中rem的配置的方法示例

结构

vue中rem的配置的方法示例

main.js

然后在index.css中设置默认大小:

 vue中rem的配置的方法示例

基础css

index.scss一般也在main.js里面引入:

vue中rem的配置的方法示例

main.js

2、借助px2rem 插件

安装

npm install px2rem-loader lib-flexible --save

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

import 'lib-flexible/flexible.js'

在build下的 utils.js中,找到generateLoaders 方法,在这里添加 。

const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}

function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}

重启项目,会发现自己设置的px被转为rem 了

vue中rem的配置的方法示例

效果

以上实现转换适用于:

(1)组件中编写的<style></style>下的css

(2)从index.js或者main.js中import ‘../../static/css/reset.css'引入css

(3)在组件的<script type=”text/ecmascript-6″> import ‘../../static/css/reset.css'</script>中引入css

另外的情况不适用:

(1)组件<style></style>中@import “../../static/css/reset.css (可考虑上面(2)、(3)的形式引入)

(2)外部样式:<link rel=”stylesheet” href=”static/css/reset.css”>

(3)元素内部样式:style=”height: 417px; width: 550px;”

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Dom在ajax技术中的作用说明
Oct 25 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 #Javascript
vue-swiper的使用教程
Aug 30 #Javascript
分享vue里swiper的一些坑
Aug 30 #Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 #Javascript
小程序图片长按识别功能的实现方法
Aug 30 #Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 #Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 #Javascript
You might like
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
python实现的简单猜数字游戏
2015/04/04 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
怎样自定义一个异常类
2016/09/27 面试题
特色冷饮店创业计划书
2014/01/28 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
目标管理责任书
2014/04/15 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS