在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. JAVA字符串的替换replace、replaceAll、replaceFirst的区别解析。

    String str = "i.like.cat"; System.out.println(str.replace(".", "!")); ...

  2. JavaScript学习系列博客_19_JavaScript中方法（method）

    方法 - 听了不少调用什么什么方法,所以方法究竟是啥东西? - 如果一个函数作为一个对象的属性保存,那么我们称这个函数时这个对象的方法,调用这个函数就说调用对象的方法(method). 创建一个对象 ...

  3. python基础 Day7

    python Day7 基础数据类型的补充 str的数据类型补充 capitalize函数将首字母大写,其余变小写 s1="taibei" print(s1.capitalize( ...

  4. MySQL数据库修改字段名、字段类型、字段长度

    1.MySQL数据库中,修改字段SQL如下: alter table AppVersion change version versionCode varchar() DEFAULT NULL COMM ...

  5. Linux教学资源服务器构建

    1. 需求分析 1.1 课题简介 随着计算机互联网的迅速发展,大多数学校已经实现教学的信息化,从传统的黑板教学方式转变为现阶段的多媒体教学,教学的资源,素材课件,甚至学生的作业也都实现数字化,为了实现 ...

  6. CSS3实现圆环进度条

    摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条 简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...

  7. “大地主”IPV6的邻居发现BD

    引入 因为当初设计IPv4的时候,没有考虑到网络发展的速度这么快,到今现在IPv4有很多不足,32位的 IPv4地址不够用,现在128位的IPv6能完全够用,据说可以地球上每一粒沙子都分配一个地址,而 ...

  8. 最强云硬盘来了，让AI模型迭代从1周缩短到1天

    摘要:华为云擎天架构+ Flash-Native存储引擎+低时延CurreNET,数据存储和处理还有啥担心的? 虽然我们已经进入大数据时代,但多数企业数据利用率只有10%,数据的价值没有得到充分释放. ...

  9. py_冒泡排序

    import random """ 排序:将一组无序记录序列调整为有序记录序列 列表排序:将无序列表调整为有序列表 输入:列表 输出:有序列表 升序与降序 内置函数sor ...

  10. [PyTorch 学习笔记] 3.2 卷积层

    本章代码:https://github.com/zhangxiann/PyTorch_Practice/blob/master/lesson3/nn_layers_convolution.py 这篇文 ...