rem 自适应适配方法
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 自适应适配方法的更多相关文章
- H5 页面 rem 布局适配方法
rem 布局适配方案 主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小: css 中,设计稿元素的宽.高.相对位置等取值,按照同等比例换算为 re ...
- rem - 移动前端自适应适配布局解决方案和比较(转载)
原文链接:http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:· 固定一个某些 ...
- 移动端 rem适配方法
rem适配 一, 网易适配方法 屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50) document.documentElement. ...
- 【转载】rem自适应布局-移动端自适应必备
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...
- rem自适应js
Rem自适应js---flexible.min.js 网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应 ...
- Rem自适应js---flexible.min.js
网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应 ...
- 移动端H5适配方法(盒子+图片+文字)
一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...
- rem自适应布局的回顾总结
使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...
- html5 750 REM JS换算方法
在安卓手机低版本浏览器,如果进页面快速执行的话会出现计算宽度不正确的情况,解决方法是放在onload方法里面执行,但这种解决方式在一些高版本浏览器中会出现页面闪动,所以使用判断浏览器版本的方式来解决, ...
随机推荐
- 如何安全的捂住你的AngelToken钱包
Angel Token钱包的重要性 AngelToken基于区块链底层技术的去中心化.安全可靠的特点,开发了数字资产钱包,是行业领先的中心化token钱包和去中心化交易平台相结合的链数字资产智能钱包. ...
- 增加 jQueryValidate的手机号验证功能
1.通过addMethod增加手机号的验证方法 (位置:和$('form').validate({}) 同级别) //增加手机号验证规则 $.validator.addMethod("isM ...
- Dynamic learning rate in training - 培训中的动态学习率
I'm using keras 2.1.* and want to change the learning rate during training. I know about the schedul ...
- typescript 属性默认值使用箭头函数 this指向问题
今天注意到前端小伙伴用react 定义component class的方法的时候是通过箭头函数的方式,表示好奇. class Test extends React.Component { public ...
- Touch事件分发源码解析
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 以下源码基于Gingerbread 2.3.7 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1.先看ViewGroup的di ...
- vim常用指令
命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filename 打开vim ...
- spring注解驱动开发
1.全图: 一.IOC容器部分 1.第一个初始化实例: @Configuration @ComponentScans @Bean("person") 注意: @repeatable ...
- Unity资源内存管理--webstream控制
一 使用前提 1,需要使用资源热更新 2,使用Assetbundle资源热更(AssetBundle是产生webstream的元凶) 二 为什么要用AssetBundle AssetBundle本质上 ...
- Filebeat占用内存和CPU过高问题排查
经反馈,新部署的服务器上filebeat占用的cpu过高,且内存只增不减. 而据我了解filebeat非常轻量级,正常情况下占用的资源几乎都能忽略不计,所以怀疑是filebeat本身出了问题. 第一时 ...
- PAT A1059
PAT A1059 标签(空格分隔): PAT 解题思路 :先打印出素数表.利用结构体数组来存贮质因子的值和个数 strcut factor{ int x; //值 int cnt; //个数 }fa ...