在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. JQ选择器总结

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

  2. springMVC入门（二）------springMVC入门案例

    简介 本案例主要完成了springMVC的基本配置,可针对响应的HTTP URL返回数据与视图 一.###web.xml的配置 要使springMVC生效,首先需要对web.xml进行配置,配置spr ...

  3. golang grpc demo

    1.grpm 安装: git clone https://github.com/grpc/grpc-go.git $GOPATH/src/google.golang.org/grpc 2.proto, ...

  4. HM16.0之帧间预测——xCheckRDCostInter()函数

    参考:https://blog.csdn.net/nb_vol_1/article/category/6179825/1? 1.源代码: #if AMP_MRG Void TEncCu::xCheck ...

  5. 宝塔，一个免费好用的 Linux/Windows 服务器管理面板

    宝塔面板是什么? 宝塔面板是一款服务器管理软件,支持windows和linux系统,可以通过Web端轻松管理服务器,提升运维效率.例如:创建管理网站.FTP.数据库,拥有可视化文件管理器,可视化软件管 ...

  6. 必看！2020最新黑马JAVA 学习路线

    https://www.fang1688.cn/2020/08/24/%e5%bf%85%e7%9c%8b%ef%bc%81java-%e5%ad%a6%e4%b9%a0%e8%b7%af%e7%ba ...

  7. java前端知识点整理

    1.jsp内置对象?作用? request :客户端请求,包含来自 GET/POST,提供了几个用于获取 cookie, 和 session 的方法 response :网页传回用户端的回应 page ...

  8. JS - 有趣的面试题

    for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000); } //这个例子执行完输出什么结果 ...

  9. 教你如何在linux操作系统下玩【俄罗斯方块】高清+语音教程

    主讲人小冰QQ:986945193 新浪微博:http://weibo.com/mcxiaobing 百度贴吧:忆驹家族小冰 腾讯微博:http://t.qq.com/q986945193 高清视频 ...

  10. Google Kick Start Round G 2019

    Google Kick Start Round G 2019 Book Reading 暴力,没啥好说的 #include<bits/stdc++.h> using namespace s ...