首先写入一下代码

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

然后在CSS中写入

大于641 的字体是20px，那么30px就是1.5rem，用实际像素除以20，就是rem的单位

例如 设置16px  就是0.8rem

这样在缩放窗口的时候，字体会跟随缩放的窗口变大变小

rem的使用方法的更多相关文章

  1. html5 750 REM JS换算方法

    在安卓手机低版本浏览器,如果进页面快速执行的话会出现计算宽度不正确的情况,解决方法是放在onload方法里面执行,但这种解决方式在一些高版本浏览器中会出现页面闪动,所以使用判断浏览器版本的方式来解决, ...

  2. rem 自适应适配方法

    rem是指相对于根元素(html)的字体大小的单位,它是一个相对单位,它是css3新增加的一个单位属性,我们现在有很多人用的都是px,但px是一个绝对单位,遇到分辨率不同的设备,做出的页面可能会乱,这 ...

  3. vue-cli3.0 使用postcss-plugin-px2rem（推荐）和 postcss-pxtorem（postcss-px2rem）自动转换px为rem 的配置方法；

    如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem . 为什么这三个中要推荐  postcss-plugin-px2r ...

  4. H5 页面 rem 布局适配方法

    rem 布局适配方案 主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小: css 中,设计稿元素的宽.高.相对位置等取值,按照同等比例换算为 re ...

  5. 移动端rem.js使用方法

    下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: ``` window.onload = function(){ /*720 ...

  6. 移动端适配（rem单位定义方法）

    注:移动端必须写: <meta name="viewport" content="width=device-width, user-scalable=no, ini ...

  7. rem详解及使用方法

    好像有一段时间没有写博客了……今天刚好总结一下rem的使用方法 首先,先说一个常识,浏览器的默认字体高都是16px.步入正题-----〉 兼容性: 目前,IE9+,Firefox.Chrome.Saf ...

  8. H5中REM中使用的规则

    /*REM单位换算方法 iphone6适配*/ function resizeRoot(){ var Dpr = 1, uAgent = window.navigator.userAgent; var ...

  9. 浅谈rem、em、px

    1.px:像素(Pixel) px是相对长度单位,他是相对于显示器屏幕分辨率而言的 优点:比较稳定.精确 缺点:在浏览器 中放大或者缩小浏览页面,会出现页面混乱的情况. 如下例子: .buttonPX ...

随机推荐

  1. javascript模块化有什么意义？

    以前,所有的javascript都写在一个文件里,方便只加载一个文件就可以了,但是代码越来越多,必须分成多个文件加载,类似: <script src="1.js">&l ...

  2. 折腾kubernetes各种问题汇总

    折腾fluend-elasticsearch日志,折腾出一大堆问题,解决这些问题过程中,感觉又了解了不少. 1.如何删除不一致状态下的rc,deployment,service. 在某些情况下,经常发 ...

  3. 不区分大小写的Flask-SQLAlchemy查询

    全部转换为小写字符再进行比较 from sqlalchemy import func user = models.User.query.filter(func.lower(User.username) ...

  4. display:table合并表格

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. 一起來玩鳥　Starling Framework（1）一定要的Hello World！

    雖然已經一堆Hello World的介紹文章跟影片了,但中文資料畢竟是比較少,所以不能免俗的來一篇中文版Hello World.首先開啟一個AS3.0專案,fps不用客氣,設為60,Starling很 ...

  6. solr6.6 solrJ索引富文本(word/pdf)文件

    1.文件配置 在core下面新建lib文件夹,存放相关的jar包,如图所示: 修改solrconfig.xml <lib dir="${solr.install.dir:../../. ...

  7. 使用IntelliJ IDEA创建Maven多模块项目

    转载:http://blog.csdn.net/xyw591238/article/details/52794788 使用Maven管理项目时,往往需要创建多个模块,模块之间存在相互引用的关系.对于M ...

  8. C语言中的union使用方法

    union共用声明和共用一变量定义: "联合"是一种特殊的类,也是一种构造类型的数据结构.在一个"联合"内能够定义多种不同的数据类型. 一个被说明为该" ...

  9. 执行时的C程序

    数据和代码 编程语言理论经典对立之中的一个就是代码和数据的差别.有些语言如LISP把两者视为一体,其它语言如C语言则维持两者的差别.编译绝大部分工作都跟翻译代码有关,必要的数据存储管理的绝不部分都在执 ...

  10. 【Java】Java_09 类型转换

    1.自动类型转换 自动类型转换:容量小的数据类型可以自动转换为容量大的数据类型.在图中,黑色的实线表示无数据丢失的自动类型转换,而红色的虚线表示在转换时可能会精度的损失. 特例: 可以将整型常量直接赋 ...