rem是指相对于根元素(html)的字体大小的单位,它是一个相对单位,它是css3新增加的一个单位属性,我们现在有很多人用的都是px,但px是一个绝对单位,遇到分辨率不同的设备,做出的页面可能会乱,这就给我们造成了很大的影响,而且后期的修复也很费时间,所以rem是一个很不错的适配方法。rem的初始值是16px,也就是说在没有设置根节点的font-size的时候,1rem=16px;

下面直接进入例子:

在这里设置html的font-size:20px;就代表1rem=20px;

接下来就可以根据上面推算设置button的样式,1rem=20px;

width:6rem==>width:120px;height:4rem==>height:80px;

可以给大家推荐一个px、em、rem换算的软件:http://pxtoem.com/

可能会有很多人在想em和rem有什么区别呢?

em也是一个相对单位,但它是相对父元素的字体大小来转换单位的,它的值并不是固定的,它会继承父级元素的字体大小,

例如:

rem 自适应适配方法的更多相关文章

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

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

  2. rem - 移动前端自适应适配布局解决方案和比较(转载)

    原文链接:http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:· 固定一个某些 ...

  3. 移动端 rem适配方法

    rem适配 一, 网易适配方法         屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50)         document.documentElement. ...

  4. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  5. rem自适应js

    Rem自适应js---flexible.min.js   网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应 ...

  6. Rem自适应js---flexible.min.js

    网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应 ...

  7. 移动端H5适配方法(盒子+图片+文字)

    一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...

  8. rem自适应布局的回顾总结

    使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...

  9. html5 750 REM JS换算方法

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

随机推荐

  1. China MVP Community Connection 2017

    在微软北京和小朋友们参加编程一小时活动  

  2. 福利来了,现“免费”赠送Spring微服务实战书籍

    本书适合拥有构建分布式应用程序的经验.拥有Spring的知识背景以及对学习构建基于微服务的应用程序感兴趣的Java开发人员阅读. 本书籍赠送活动详情,请识别上图二维码☝☝☝☝☝ 书籍推荐 本书教读者如 ...

  3. 假如有Thread1、Thread2、Thread3、Thread4四条线程分别统计C、D、E、F四个盘的大小

    假如有Thread1.Thread2.Thread3.Thread4四条线程分别统计C.D.E.F四个盘的大小,所有线程都统计完毕交给Thread5线程去做汇总,应当如何实现? 实现1:用concur ...

  4. LCT模板(无讲解)

    怎么说呢,照着打一遍就自然理解了,再打一遍就会背了,再打一遍就会推了. // luogu-judger-enable-o2 #include<bits/stdc++.h> using na ...

  5. 小白的首个maven web项目Step1软件安装二(Tomcat及相关配置)

    安装tomcat9.0,依照此教程非常详细:https://blog.csdn.net/cyz1151148946/article/details/76691976/ 教程最后测试tomcat的时候有 ...

  6. Java作业:第二次过程性考核 ——长春职业技术学院 16级网络工程

    ## 时间有限,脑力不足 ## 只给出代码部分(附带注释) 码云 https://gitee.com/SoridoD/codes 7-5: import java.util.Scanner; clas ...

  7. 第二章01:Hello world 案例

    java程序开发 = 三部曲 源文件+编译器+字节码文件+解释器=结果 源文件:编写Java源文件(我们也称之为源代码文件),它的扩展名为.java: 编译:然后通过编译器把源文件编译成字节码文件,字 ...

  8. @Dependson注解与@ConditionalOnBean注解的区别

    @Dependson注解是在另外一个实例创建之后才创建当前实例,也就是,最终两个实例都会创建,只是顺序不一样 @ConditionalOnBean注解是只有当另外一个实例存在时,才创建,否则不创建,也 ...

  9. PLC之六部十层电梯整体框架

    1.基本框架 此图基于西门子杯逻辑控制赛项中电梯题目的变量表以及功能设计 1.I/O输入是指变量表中的input数字量,包括电梯所有的内呼按钮.外呼按钮.电梯平层开关等 2.逻辑处理是指根据相对应的输 ...

  10. ABP异常处理

    1.编译器错误消息: CS0012: 类型“System.Object”在未被引用的程序集中定义.必须添加对程序集“System.Runtime, Version=4.0.0.0, Culture=n ...