首先写入一下代码

<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. Klaus Aschenbrenner--windbg

    http://www.sqlservercentral.com/blogs/aschenbrenner/?page=1

  2. zk介绍

    1. 配置管理 Zookeeper提供了这样的一种服务:一种集中管理配置的方法,我们在这个集中的地方修改了配置,所有对这个配置感兴趣的都可以获得变更.这样就省去手动拷贝配置了,还保证了可靠和一致性. ...

  3. nobr 不换行标签

    示例代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  4. webpack配置：图片处理、css分离和路径问题

    一.CSS中的图片处理: 1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic" ...

  5. vue拦截器Vue.http.interceptors.push

    刚开始学vue,github上down了一个开源项目,看源代码的时候看到了这个地方: /** * @export * @param {any} request * @param {any} next ...

  6. 恼人的The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved...错误，无奈用Struts的bean:write替代了JSTL的C:out

    一个应用中有两个页面使用了JSTL的c:out输出,就类似这么简单三句 <c:if test="${!empty error}">       <h2>&l ...

  7. docker集群——搭建Mesos+Zookeeper+Marathon的Docker管理平台

    服务器架构 机器信息: 这里部属的机器为3个Master控制节点,3个slave运行节点,其中: zookeeper.Mesos-master.marathon运行在Master端:Mesos-sla ...

  8. J2EE规范

    J2EE是由SUN提出的用于简化开发企业级应用程序的一系列规范的组合,J2EE基于中间层集成的框架的方式为应用开发提供了一个统一的开发平台.基于容器管理.组件化的模型为企业建立一个高可用性,高可靠性可 ...

  9. Win7如何开启管理员账户

    打开运行对话框,在LUSRMGR.MSC里,左边点用户,在右边栏里右击Administrator选择属性,去掉账户已禁用这个选项前面的勾.我也问过这个问题,确实如版主说的这样可解决这个问题,但有个问题 ...

  10. HTML 中图片的隐藏与显示

    <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Co ...