用rem做响应式开发
设置对应的响应式的html rem比例
rem就是根元素(即:html)的字体大小。html中的所有标签样式凡是涉及到尺寸的(如: height,width,padding,margin,font-size。甚至,left,top等)你都可以放心大胆的用rem作单位。
我们平常在使用长度单位都会使用px,但是在做上面的响应式的时候,需要用rem或者百分比的单位,大家可以看我的Demo代码。在上篇文章介绍了rem的字体设置计算方法:
html{
font-size:62.5%; /* 10÷16=62.5% */
}
body{
font-size:12px;
font-size:1.2rem ; /* 12÷10=1.2 */
}
p{
font-size:14px;
font-size:1.4rem;
}
通过设置html的font-size值来控制全局的rem输出,这段代码其实是这个rem的精髓所在,我在我的页面中设置了如下的代码来控制不同设备下的字体大小显示使其达到自适应:
html {
font-size: 62.5%;
}
@media only screen and (min-width: 481px){
html {
font-size: 94%!important;
}
}
@media only screen and (min-width: 561px){
html {
font-size: 109%!important;
} }
@media only screen and (min-width: 641px){
html {
font-size: 125%!important;
}
}
看上面的代码,可能大家会觉得为什么要这样设置呢,其实这个是根据许多测试推算出来的,上面代码如果要转换城px会变成这样:
html {
font-size: 62.5%; /* 10÷16=62.5% */
}
@media only screen and (min-width: 481px){
html {
font-size: 94%!important; /* 15.04÷16=94% */
}
}
@media only screen and (min-width: 561px){
html {
font-size: 109%!important; /* 17.44÷16=109% */
} }
@media only screen and (min-width: 641px){
html {
font-size: 125%!important; /* 20÷16=125% */
}
}
给margin padding 设置rem
上面展示的是怎么通过计算获取到不同分辨率下的html font-site百分比的值。实际开发如果设计师是按照640的宽度去设计的,我们就按照最大的640去切图,切图的时候如果我们要设置margin怎么banner,设计图的值加入是10px的间距,我们通过640的比例去计算:
margin-top:.5rem; /*10 ÷ 20 = 0.5*/
padding-top:1rem /* 20 ÷ 20 =1 */
上面分别是设计图上的间距10px和20px计算成rem的方法,大家可以以此类推,如果你的设计图是640设计的就可以用上面的方法,反正每次以最大的值来计算就可以了。
给height width 设置rem
实际开发中大家最常设置的估计就是height width值了,为了做到各个设备下长度自己相应,许多开发人员会用百分比来做,这个是没有问题,但是其实很多场景下用rem比百分比更加灵活,在我实际开发中,一般我只在大块的div布局里面用百分比,元素的设置一般都用rem来。例如:
height:100px; /* 100 ÷ 20 = 5rem;*/
width:50px; /* 50 ÷ 20 = 2.5rem;*/
用rem做响应式开发的更多相关文章
- 用rem来做响应式开发
强烈推荐这篇文章:<web app 变革之rem> px转rem工具:<px转rem工具> 由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位 ...
- 用rem来做响应式开发(转)
由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位,觉得这个单位有点意思.但是现在貌似用他的人很少.上一篇文章我分享了淘宝写的一篇rem的介绍,介绍的非常全面,但是他 ...
- 移动端使用rem同时适应安卓ios手机原理解析,移动端响应式开发
rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 ...
- 《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 上篇文 ...
- 基于screen.width的伪响应式开发
一.站在用户的角度看问题 一个用户,访问一个web页面的真实场景是怎样的呢? 下面是某用户访问某站点的一个场景: 1. 小明打开了自己的电脑,访问了鑫空间-鑫生活: 2. 小明体内洪荒之力无法控制,疯 ...
- 带你玩转JavaWeb开发之五-如何完成响应式开发页面
响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad ...
- BootStrap常用组件及响应式开发
BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...
- 借鉴bootstrap的方法,快速实现响应式开发
响应式开发 注意:任何框架都是一个辅助手段,只需借鉴其中的核心思想,把其中核心的东西提炼出来即可.不要因为,提到响应式就想到只能够用bootstrap来实现,框架现有的东西是可以提高我们的效率,但是其 ...
- springboot 使用webflux响应式开发教程(二)
本篇是对springboot 使用webflux响应式开发教程(一)的进一步学习. 分三个部分: 数据库操作webservicewebsocket 创建项目,artifactId = trading- ...
随机推荐
- magic mouse 2 使用,移动速度问题,安装问题
一.安装问题 首先确保你的OSX里面没有安装USB Overdrive.prefPane这个软件,就是“瑞士军刀”.这个软件会让你的magic mouse 2 连接上Mac后,Mac无限死机重启,有时 ...
- 虚拟机环境下DPDK运行时的一些错误解决
在绑定网卡到DPDK模块时 报错 :is active. Not modifying Routing table indicates that interface 0000:02:01.0 is ac ...
- Internet History, Technology and Security (Week4)
Week4. We are now moving into Week 4! This week, we will be covering commercialization and growth. T ...
- ns3 回调机制
(1)目的:为了实现两个模块之间的通信(这两个模块没有任何依赖关系) (2) C语言中的函数指针 int (*a)(int q) = 0; //声明一个函数指针a,初始值设为0 //. //. //. ...
- elicpse
摘自http://blog.csdn.net/bug_love/article/details/72636505 eclipse error pages打红X的解决方法 我每次建一个Maven项目转为 ...
- python基础(六)python操作excel
一.python操作excel,python操作excel使用xlrd.xlwt和xlutils模块,xlrd模块是读取excel的,xlwt模块是写excel的,xlutils是用来修改excel的 ...
- scrapy-继承默认的user-agent 中间件
class MyUserAgentMiddleware(UserAgentMiddleware): def __init__(self, user_agent): self.user_agent = ...
- [转帖漫画]什么是 MD5 算法?---摘要算法 具体算法 一直搞不清楚
漫画:什么是 MD5 算法? 2017-10-05 20:16 来源:伯乐专栏作者/玻璃猫,微信公众号 - 梦见 好文投稿, 请点击 → 这里了解详情 梦见 摘要哈希生成的正确姿势是什么样呢?分三步: ...
- vmware 已将该虚拟机配置为使用 64 位客户机操作系统。但是,无法执行 64 位操作。
错误提示:已将该虚拟机配置为使用 64 位客户机操作系统.但是,无法执行 64 位操作. 此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态. 如果已在 BIOS/固件设置中禁用 ...
- Java变量初始化之后的默认值问题
1) 局部变量初始化(局部变量:函数.语句中的变量,只在所属区域内有效)局部变量声明后,Java虚拟机不会自动给它初始化为默认值.因此对于局部变量,必须经过显示的初始化,才能使用它.如果使用一个没有被 ...