vue中rem的配置的方法示例

 更新时间:2018年08月30日 14:28:01   作者:a小磊_  
这篇文章主要介绍了vue中rem的配置的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

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

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

1、在js中统一计算配置

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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中引入使用。

结构

main.js

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

 

基础css

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

main.js

2、借助px2rem 插件

安装

1
npm install px2rem-loader lib-flexible --save

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

1
import 'lib-flexible/flexible.js'

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 了

效果

以上实现转换适用于:

(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;”

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

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://www.jianshu.com/p/7e98f9c44c97

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • vue动态注册组件实例代码详解

    vue动态注册组件实例代码详解

    写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,需要的朋友可以参考下
    2019-05-05
  • Vue跨域请求问题解决方案过程解析

    Vue跨域请求问题解决方案过程解析

    这篇文章主要介绍了Vue跨域请求问题解决方案过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • element的el-upload组件上传文件跨域问题的几种解决

    element的el-upload组件上传文件跨域问题的几种解决

    跨域问题网上搜索很多,感觉情况都不一样,本文主要介绍了element的el-upload组件上传文件跨域问题的几种解决,具有一定的参考价值,感兴趣的可以了解一下
    2024-03-03
  • vue中使用scrollTo无效的解决方法

    vue中使用scrollTo无效的解决方法

    本文主要介绍了vue中使用scrollTo无效的解决方法,想要使用scrollTo使当前网页滚动到指定位置,本文就来解决一下,具有一定的 参考价值,感兴趣的可以了解一下
    2023-08-08
  • 详解Vue中使用Echarts的两种方式

    详解Vue中使用Echarts的两种方式

    这篇文章主要介绍了Vue中使用Echarts的两种方式,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • 教你轻松解决Vue Dialog弹窗诟病

    教你轻松解决Vue Dialog弹窗诟病

    弹窗经常被使用在一些表单的增删改查啊,或者弹出一些提示信息等等,这篇文章主要给大家介绍了关于Vue Dialog弹窗诟病解决的相关资料,需要的朋友可以参考下
    2023-01-01
  • Vue项目的表单校验实战指南

    Vue项目的表单校验实战指南

    这篇文章主要介绍了Vue项目表单校验的相关资料,前端表单校验能减少无效请求,保护后端接口,使用ElementPlus表单组件进行校验,需要准备表单对象、规则对象并进行双向绑定,用户名、密码以及协议勾选等字段都需符合特定规则,需要的朋友可以参考下
    2024-10-10
  • Vue 实现输入框新增搜索历史记录功能

    Vue 实现输入框新增搜索历史记录功能

    这篇文章主要介绍了Vue 输入框新增搜索历史记录功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • 详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计

    详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计

    这篇文章主要介绍了详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue中v-for的9种使用案例总结大全

    Vue中v-for的9种使用案例总结大全

    v-for是vue的循环指令,作用是遍历数组(对象)的每一个值,这篇文章主要给大家介绍了关于Vue中v-for的9种使用案例的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12

最新评论