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方法里面执行,但这种解决方式在一些高版本浏览器中会出现页面闪动,所以使用判断浏览器版本的方式来解决, ...
随机推荐
- lumion的物体系统5.30
1.“自然"点击这棵树.可以打开自然库.不同的植物分类有很多页数. 选择一棵树,自动返回页面单击鼠标左键可以种植这个树.成排种树:点击”人群安置“点击我们想安置的起点.再点击终点.用鼠标右键 ...
- Linux配置JDK、Tomcat和Mysql免安装版
现在已有JDK.Tomcat和mysql的tar.gz压缩文件 1.解压文件 (1)解压tar.gz tar -zxvf 待解压文件名 -C 解压到目标文件目录 (2)解压zip unzip 待解压文 ...
- java 随机生成6位短信验证码
生成6位随机数字其实很简单,只需一行代码,具体如下: String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000) ...
- 使用DD 创建SWAP
1创建所需swap空间的文件 + records in + records out bytes ( MB) copied, 2.01386 s, 52.1 MB/s[root@web01 ~]# ll ...
- Spring 基础知识(一)基本概念 DI、IOC、AOP
DI(依赖注入) 和IOC(控制反转)都是一种设计思想,要理解他们,让我们从coding中的一些痛点入手. 依赖注入 Dependency Injection : 如果A类要使用B类的一个方法,首先必 ...
- ykit入门
init lint pack server watch 1.创建现有工程的ykit项目 在项目文件夹下 ykit init 2.lint 检查当前项目的代码质量 手动执行代码 可验证代码正误 yk ...
- 可编程逻辑控制器(PLC)漏洞挖掘思路与验证
mailto wangkai0351@gmail.com 随时记录千奇百怪的漏洞挖掘思路,主要针对STEP7 v5+西门子S7-300/400系列PLC,欢迎同行前来交流. 组态信息下载完整性攻击 思 ...
- 虚拟机3种网络模式(桥接、nat、Host-only)
http://www.cnblogs.com/ggjucheng/archive/2012/08/19/2646007.html
- styled-components的基本使用
一.官网地址 https://www.styled-components.com/ 二.styled-components 1.styled-components 样式化组件,主要作用是它可以编写实际 ...
- Jira7.10.1在Windows环境下的安装和配置
jira安装的环境准备 1. jira7.10的运行是依赖java环境的,也就是说需要安装jdk并且要是1.8以上版本: Java -version 2. 还需要为jira创建对应的数据 ...