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方法里面执行,但这种解决方式在一些高版本浏览器中会出现页面闪动,所以使用判断浏览器版本的方式来解决, ...
随机推荐
- 软件151 王楚博 JavaEE的配置
一.准备以下压缩包 1.JDK1.7 文件:jdk1.7.rar 2. eclipse-jee-mars-2 文件:32位系统准备eclipse-jee-mars-2-win32.zip,64位系统准 ...
- Ubuntu18.04安装常用软件
一.VMwareWorkstation 1.到官网下载VmwareWorkstation,选择Linux版本 2.将下载下来的安装包放到桌面给予x权限,通过命令行进入到桌面的目录sudo ./执行安装 ...
- 通用c程序Makefile
#一个通用的Makefile,可以在linux各大平台下通用编译c程序,这个版本在gcc平台下实现,如需要课更改第二部的gcc,也可以在第三部添加所需要的库,如有错误,欢迎即使纠正 #1.遵循可移植操 ...
- 1. nginx添加自定义http模块(简单)
步骤 1. 新建模块目录2. 添加模块配置文件3. 编写模块源码文件4. 在主配置文件中配置访问location5. 编译加入模块文件6. 测试 新建模块目录 mkdir /opt/nginx/ext ...
- BluePrism初尝
由于对工作的需求,现在开始接触了RPA. RPA是什么?第一次看见这个名词,我脑海里只有RPG的概念.一番查询,才知道是Robotic Process Automation的英文缩写,机器人流程自动化 ...
- 踩坑学习python自动化测试第一天!
这只是一个标题, # 迭代器与生成器# 迭代器有两个基本的方法:iter() 和 next(). # 字符串,列表或元组对象都可用于创建迭代器:"""list1 = [1 ...
- ajax csrf
data 里加 csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(), 还要再 form表单里加{% csrf_t ...
- eclipse 中修改项目名称,启动tomct原项目找不到的问题
eclipse 中修改项目名称,启动tomct原项目找不到的问题 1 在开发和练习中,经常会导入其他开源项目,修改项目名称,部署到tomcat 后,然后访问项目会找不到项目,可能是新项目名称和配置文件 ...
- Mantis:Mantis rest api url 404 Not Found.解决过程纪录
测试Mantis rest api时碰到的问题:404 Not Found. 根据文件,Mantis rest api的预设url是{{url}}/api/rest/{{controller}}. 其 ...
- eclipse中访问不了tomcat首页server Locations变灰无法编辑
eclipse中访问不了tomcat首页server Locations变灰无法编辑 2014年07月25日 14:37:21 wuha0 阅读数:19139更多 个人分类: servlet 解决 ...