首先写入一下代码

<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. WebGL的颜色渲染-渲染一张DEM(数字高程模型)

    目录 1. 具体实例 2. 解决方案 1) DEM数据.XYZ文件 2) showDEM.html 3) showDEM.js 4) 运行结果 3. 详细讲解 1) 读取文件 2) 绘制函数 3) 使 ...

  2. javascript 定时器 笔记

    最近想看下定时器,发现这东西越看越牵连的东西越多,比如js单线程,EVent loop 什么的 看到了几篇比较好的文章 http://ejohn.org/blog/how-javascript-tim ...

  3. react使用引入svg的icon；svg图形制作

    由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...

  4. Discuz! 6.x/7.x 版本 前台任意代码执行漏洞

    一.漏洞原理: 由于php5.3.x版本里php.ini的设置里request_order默认值为GP,导致Discuz! 6.x/7.x 全局变量防御绕过漏洞. include/global.fun ...

  5. http://www.360doc.com/content/12/0516/14/1671317_211422841.shtml

    http://www.360doc.com/content/12/0516/14/1671317_211422841.shtml

  6. [Python爬虫] 之二十三：Selenium +phantomjs 利用 pyquery抓取智能电视网数据

    一.介绍 本例子用Selenium +phantomjs爬取智能电视网(http://news.znds.com/article/news/)的资讯信息,输入给定关键字抓取资讯信息. 给定关键字:数字 ...

  7. C#秘密武器之反射——基础篇

    先来一段有用的反射代码 namespace Calculator { public interface Iwel { String Print(); } } namespace Calculator ...

  8. ipt_connlimit限制并发,ipt_recent限制单位时间内的请求数目

    xt_connlimit(别名ipt_connlimit) 一.Centos5.8系统 需要手动的执行modprobe ipt_connlimit命令把模板加入内核中去.先查看 #lsmod |gre ...

  9. 使用Python发送电子邮件

    使用python发送邮件并不难,这里使用的是SMTP协议. Python标准库中内置了smtplib,使用它发送邮件只需提供邮件内容与发送者的凭证即可. 代码如下: # coding:utf-8 im ...

  10. opencv提取surf特征点出现的错误

    opencv实现surf特征的提取.本来是一个非常easy的代码,结果我执行时却出现了各种错误,以下来谈谈我出现的错误及问题的解决过程. 首先,我把提取surf特征的过程整合成了一个函数,我单独建立一 ...