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 相关文章推荐
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 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 图片上添加透明度渐变的效果
2009/06/29 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
JS模拟多线程
2007/02/07 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
JS设计模式之惰性模式(二)
2017/09/29 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
大学生优秀自荐信范文
2014/02/25 职场文书
快递员岗位职责
2014/09/12 职场文书
学校政风行风整改方案
2014/10/25 职场文书
2014年统战工作总结
2014/12/09 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸