首先写入一下代码

<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. Word2010插入页码分节符

    不是分页符,分节符主要是为了插入前后两种不同类型的页码,比如前面查罗马数字,从目录开始插入阿拉伯数字.                 

  2. OpenCV 64位时 应用程序无法正常启动0x000007b 问题解决

    这问题根本不是DirectX问题,不知道网上怎么这么这样的回复.而且也不亲自验证一下.下面将自己花很多时间才解决的方式整理一下. 因为一般情况下你配置的OpenCV加入系统环境变量的都是X86下的bi ...

  3. 【sql】关联查询+表自关联查询

    表: 经销商 dealer   字段 uid  parent_uid  name 联系人 contact  字段 uid  dealer_id  contact_main 需求: 想要查询到经销商的信 ...

  4. Thunderbird使用发邮件模板

    Thunderbird的强大之处是可以使用多种第三方插件,其中有个插件SmartTemplate4,是用来设置Thunderbird发件模板的. 然后,模板设置内容如下: <p>:< ...

  5. 用Storyboard构建标签栏多页面应用程序UI

    注: 貌似CSDN的显示效果不佳,假设有须要的话我能够上传pdf格式的: 另外假设文章中有错误还请给位多多提意见,谢谢. pdf格式文档:http://download.csdn.net/detail ...

  6. BSP

    1       BSP概述 BSP即Board Support Package,板级支持包.它来源于嵌入式操作系统与硬件无关的设计思想,操作系统被设计为运行在虚拟的硬件平台上.对于具体的硬件平台,与硬 ...

  7. （转）Netty : writeAndFlush的线程安全及并发问题

    rocketmq用netty实现的网络连接,发现它多个线程掉用一个channel连接,所以这个是线程安全的? 使用Netty编程时,我们经常会从用户线程,而不是Netty线程池发起write操作,因为 ...

  8. [Functional Programming] Randomly Pull an Item from an Array with the State ADT (Pair)

    Functor composition is a powerful concept that arises when we have one Functor nested in another Fun ...

  9. Openfiler 之Linux 安装ISCSI initiator和自动挂载

    OPENFILER做TARGET,RED HAT做客户端,如果默认没有安装ISCSI initiator的话,可以在光盘上找到RPM包直接安装.service iscsi start,启动服务,ser ...

  10. mac os x 安装adb

    http://stackoverflow.com/questions/31374085/installing-adb-on-mac-os-x Option 1 - Using Homebrew Thi ...