在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. 浏览器自动化的一些体会11 webclient的异步操作

    原来的代码大致如下: private void foo(string url) { using (WebClient client = new WebClient()) { client.Downlo ...

  2. 用心整理的 献丑啦 一些关于http url qs fs ...模块的方法

    http:  const http = require("http");  http.createServer((req , res)=>{  req:request 请求  ...

  3. PythonCrashCourse 第九章习题

    创建一个名为Restaurant 的类,其方法__init__() 设置两个属性: restaurant_name 和cuisine_type 创建一个名为describe _restaurant ( ...

  4. Magento add product attribute and assign to all group

    $attributes = array( 'product_type' => array( 'type' => 'int', 'input' => 'select', 'source ...

  5. 经典游戏--24点--c++代码实现和总体思路（简单暴力向）

    24点 24点是一个非常经典的游戏,从扑克牌里抽4张牌,其中J=11,Q=12,K=13,然后经过+,-,*,/,(),的计算后,使得计算得值为24,例如抽到1,2,2,5四张牌,那么 (1+5)*( ...

  6. Solr的原理及使用

    1.Solr的简介Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过 ...

  7. 玩转Spring——Spring整合JDBC

    传统JDBC代码的弊端在传统的jdbc代码中,即使是执行一条简单的SQL语句,其实现的整个流程也是极为繁琐的,先打开数据库连接执行sql,然后组装结果,最后关闭数据库资源,这中间还有大量的try... ...

  8. 微信商户H5支付申请不通过被驳回解法，拒绝提示：网站有不实内容或不安全信息

    H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付.主要用于触屏版的手机浏览器请求微信支付的场景.可以方便从外部浏览器唤起 ...

  9. Java BigDecimal使用指南

    提起BigDecimal,相信大家都使用过,之所以总结这篇呢,是因为最近发现项目中使用的不是太规范,在某些场景下甚至出现代码抛出异常的情况, 所以就总结了这篇,希望大家在使用时,可以少踩一些坑. 1. ...

  10. py_创建文件以及写入读取数据+异常处理

    import readline import math import json ''' A: 第一行 第二行 第三行 ''' #从文件读取数据 with open("D:\A.txt&quo ...