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. BZOJ2662 [BeiJing wc2012]冻结

    网上的题解都是分层图+spfa或者dijkstra 我觉得dijk太难写了,懒得写,看了一下数据范围$N=50$,这显然是出题人勾引人犯罪 我决定使用floyd的做法,令$f[i][j][t](k)$ ...

  2. PDF 补丁丁 0.6.0.3369 版发布(修复保存文件时文件名替代符失效的问题)

    新的测试版修复之前测试版本在保存文件时文件名替代符失效的问题

  3. Python运行时的常见错误

    1)忘记在 if , elif , else , for , while , class ,def 声明末尾添加冒号(:)(导致 “SyntaxError :invalid syntax”) 2)使用 ...

  4. 外贸站全球网速测试+免费CDN使用教程

    关于外贸网站速度测试,以前一全老师(www.yiquanseo.com)也讲到过,但是在那篇文章中推荐给大家的两个测试网站(https://developers.google.com/speed/pa ...

  5. 结队开发之NABCD

    我们的产品小工具集合是为了解决办公室办公人员缺少一些快捷操作的痛苦,他们需要在不用登陆QQ或者QQ浏览器的情况下实现截图功能,但是现有的方案并没有很好地解决这些需求,我们有独特的办法,小工具集合中提供 ...

  6. 原生Ajax实现异步交互

    实现Ajax主要依靠XMLHttpRequest对象,所以首先要创建XMLHttpRequest对象 function getXhr(){ var xhr = null; if(window.XMLH ...

  7. Spring Cloud分布式微服务云架构

    分布式.微服务.云架构 JAVA语言开发.跨平台.高性能.高可用.安全.服务化.模块化.組件化.驱动式开发模式 commonservice eurekaNetflix 云端服务发现,一个基于 REST ...

  8. SQL优化清单

    SQL优化清单 1.from 语句中包含多个表的情况下,把记录数少的表放在前面 2.where 语句中包含多个条件时,将刷选多的条件放前面 3.避免使用select * ,因为这样会去查询所有列的数据 ...

  9. 用几句话说一说CMake add_dependencies & target_link_libraries的使用区别

    简单说一说前两天学习使用CMake解决链接问题时遇到的一个问题. 对于编译时遇到的依赖问题,很多时候我们只需要一句target_link_libraries就可以搞定. 但是CMake还有另外一个co ...

  10. Windows创建Sciter的第一个程序.HelloWorld

    介绍什么的就免了.直接进入正题 平台: Windows 10 IDE : Visual studio 2017 首先从官网下载最新的SDK,https://sciter.com/download/ 创 ...