在index.html中

head标签中

  <script>

    //通过window.screen.width获取屏幕的宽度

    var offWidth = window.screen.width / 375; //这里用宽度/30表示1rem取得的px

    document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; //把rem的值复制给顶级标签html的font-size

  </script>

cnpm i lib-flexible -S

cnpm i postcss-pxtorem -D

postcss.config.js

module.exports = {

  plugins: {

    autoprefixer: {},

    'postcss-pxtorem': {

      'rootValue': 75, // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除）

      'propList': ['*'] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部

    }

  }

}

main.js

import 'lib-flexible'

验证

<html data-dpr="1" style="font-size: 37.4917px;" lang="en">

vue自适应布局的n中方法的更多相关文章

  1. 常见css垂直自适应布局（css解决方法）

    css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...

  2. display:table-cell自适应布局下连续单词字符换行——张鑫旭

    之前有几次提到了使用display:table-cell实现强大的任意尺寸元素的自适应布局(都藏在长长文章之中).这里开篇再次提一下,希望能将该技术普及下去. 典型的双栏布局类名使用如下: fix l ...

  3. CSS两列及三列自适应布局方法整理

    布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 ...

  4. 处理移动端自适应布局的方法- calc()与vw

    在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不同的机型 ...

  5. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  6. css3 calc()属性介绍以及自适应布局使用方法

    前端知识 Calc()介绍 calc的英文是calculate的缩写,中文为计算的意思,是css3的一个新增的功能,用来只当元素的长度.比如说:你可以用calc()给元素margin.padding. ...

  7. ASP.NET MVC 4中如何为不同的浏览器自适应布局和视图

    在ASP.NET MVC 4中,可以很简单地实现针对不同的浏览器自适应布局和视图.这个得归功于MVC中的"约定甚于配置"的设计理念. 默认的自适应 MVC 4自动地为移动设备浏览器 ...

  8. vue methods 中方法的相互调用

    vue在同一个组件内:方法之间经常需要互相调用. methods中的一个方法如何调用methods中的另外一个方法呢? 可以在调用的时候使用  this.$options.methods.test2( ...

  9. 使用css3中calc()进行自适应布局

    calc()能做什么? calc()可以通过计算得到元素的宽度或者高度,让我们很容易进行自适应布局. 你可以为一个div元素,使用百分比.em.px和rem单位值计算出其宽度或者高度,比如说“widt ...

随机推荐

  1. [PyTorch 学习笔记] 1.3 张量操作与线性回归

    本章代码:https://github.com/zhangxiann/PyTorch_Practice/blob/master/lesson1/linear_regression.py 张量的操作 拼 ...

  2. IDEA中列编辑

    快捷键 :Alt+Shift+insert,也可以按住Alt+Shift时,点击要编辑部分

  3. Java之reflection(反射机制)——通过反射操作泛型，注解

    一.反射操作泛型(Generic) Java采用泛型擦除机制来引入泛型.Java中的泛型仅仅是给编译器Javac使用的,确保数据的安全性和免去强制类型转换的麻烦.但是编译一旦完成,所有和泛型有关的类型 ...

  4. 2020.5.28 第八篇 Scrum冲刺博客

    Team:银河超级无敌舰队 Project:招新通 项目冲刺集合贴:链接 目录 一.每日站立会议 1.1 会议照片 1.2 项目完成情况 二.项目燃尽图 三.签入记录 3.1 代码/文档签入记录 3. ...

  5. EventLoop-浏览器篇2

    最近又碰到了event loop问题,之前研究的实在是浅显(https://www.cnblogs.com/zx0423/p/12641637.html)所以今天主要讲述promise的链式调用,as ...

  6. python实例 三国人物出场次序 jieba库

    #Cal3kingdoms.py import jieba txt = open("threekingdoms.txt", "r", encoding=&quo ...

  7. Java 获取一段时间内的每一天

    有时候我们会遇到一些业务场景,需要去获取一段时间内的每一天日期 public static List<Date> findDates(Date dBegin, Date dEnd) { L ...

  8. eclipse android程序运行报错:Conversion to Dalvik format failed: Unable to execute dex:

    [2013-06-19 16:59:01 - Dex Loader] Unable to execute dex: Multiple dex files define Landroid/support ...

  9. Unity技巧集合

    地址:http://blog.csdn.net/stalendp/article/details/17114135 这篇文章将收集unity的相关技巧,会不断地更新内容. 1)保存运行中的状态 uni ...

  10. HTTP协议中的提交方式和解释POST、GET、HEAD、PUT等

    最基本的方法有4种,分别是GET,POST,PUT,DELETE HTTP中的GET,POST,PUT,DELETE就对应着对这个资源的查,改,增,删4个操作 GET一般用于获取/查询资源信息,而PO ...