首先写入一下代码

<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. Redis编程实践【pub/sub】

    原文:http://shift-alt-ctrl.iteye.com/blog/1867454 Redis或许已经在很多企业开始推广并试水,本文也根据个人的实践,简单描述一下Redis在实际开发过程中 ...

  2. iOS面试_1.浅析内存管理

    为了开学的面试,就在博客里总结一下面试会问到的问题,今天就来谈谈内存管理,看到一篇文章非常不错,http://vinceyuan.cnblogs.com/,深入浅出,推荐大家去看看! Objectiv ...

  3. 在Docker中从头部署自己的Spark集群

    由于自己的电脑配置普普通通,在VM虚拟机中搭建的集群规模也就是6个节点左右,再多就会卡的不行 碰巧接触了Docker这种轻量级的容器虚拟化技术,理论上在普通PC机上搭建的集群规模可以达到很高(具体能有 ...

  4. 淘宝JAVA中间件Diamond

    以下是转载自网上资料,但是根据步骤可以搭建出diamond配置中心服务器. 项目中需要用到diamond的理由是, 项目中使用了很多定时任务和异步任务.而且这些定时任务和异步任务都是分布式的安排在多个 ...

  5. vue - rimraf

    rimraf 包的作用:以包的形式包装rm -rf命令,用来删除文件和文件夹的,不管文件夹是否为空,都可删除 const rimraf = require('rimraf'); rimraf('./t ...

  6. LoadRunner测试AJAX

    什么是AJAX? Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for cre ...

  7. 查看FC HBA卡信息的方法

    在配置磁盘阵列或虚拟磁带库时,往往会以FC接口与主机对接,那么就涉及FC HBA卡的查看,本文就这个问题进行了总结与整理. 一.Windows 系统 在Windows系统中,可以使用FC HBA卡厂家 ...

  8. 基于环信的仿QQ即时通讯的简单实现

    代码地址如下:http://www.demodashi.com/demo/11645.html 我的博客地址 之前一直想实现聊天的功能,但是感觉有点困难,今天看了环信的API,就利用下午的时间动手试了 ...

  9. cocos2d-x 3.0rc2版公布了

    本人博客地址,转载吧亲们:http://blog.csdn.net/dawn_moon 之前做小鸟的和跑酷的时候尽管cocos2d-x出了3.0版,可是还是alpha版.当时大致看了一下发现有蛮多修改 ...

  10. Google Chrome 浏览器的检索语言设置

    解决为何从一开始安装Google Chrome 浏览器的时候,使用Google 搜索,结果都是日文的问题. 藏的比较隐蔽,没法在“设置”那里修改. 1.问题:搜索内容均是日文: 2.注意到右边有一个“ ...