利用rem实现webapp布局
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。
但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。
rem是什么?
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
为什么web app要使用rem?
这里我特别强调web app,web page就不能使用rem吗,其实也当然可以,不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力,接下来我们来看看目前一些企业的web app是怎么做屏幕适配的。
1、实现强大的屏幕适配布局:
最近iphone6一下出了两款尺寸的手机,导致的移动端的屏幕种类更加的混乱,记得一两年前做web app有一种做法是以320宽度为标准去做适配,超过320的大小还是以320的规格去展示,这种实现方式以淘宝web app为代表作,但是近期手机淘宝首页进行了改版,采用了rem这个单位,首页以内依旧是和以前一样各种混乱,有定死宽度的页面,也有那种流式布局的页面。
我们现在在切页面布局的使用常用的单位是px,这是一个绝对单位,web app的屏幕适配有很多中做法,例如:流式布局、限死宽度,还有就是通过响应式来做,但是这些方案都不是最佳的解决方法。
2.固定宽度做法
还有一种是固定页面宽度的做法,早期有些网站把页面设置成320的宽度,超出部分留白,这样做视觉,前端都挺开心,视觉在也不用被流式布局限制自己的设计灵感了,前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题,例如在大屏幕手机下两边是留白的,还有一个就是大屏幕手机下看起来页面会特别小,操作的按钮也很小,手机淘宝首页起初是这么做的,但近期改版了,采用了rem。
3.响应式做法
响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做,主要原因是工作大,维护性难,所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位,因为这样反而可以节约成本,不用再专门为自己的网站做一个web app的版本。
4.设置viewport进行缩放
天猫的web app的首页就是采用这种方式去做的,以320宽度为基准,进行缩放,最大缩放为320*1.3 = 416,基本缩放到416都就可以兼容iphone6 plus的屏幕了,这个方法简单粗暴,又高效。说实话我觉得他和用接下去我们要讲的rem都非常高效,不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。
1 <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
rem能等比例适配所有屏幕
上面讲了一大堆目前大部分公司主流的一些web app的适配解决方案,接下来讲下rem是如何工作的。
上面说过rem是通过根元素进行适配的,网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。举个例子:
1 html{
2 font-size:20px;
3 }
4 .btn {
5 width: 6rem;
6 height: 3rem;
7 line-height: 3rem;
8 font-size: 1.2rem;
9 display: inline-block;
10 background: #06c;
11 color: #fff;
12 border-radius: .5rem;
13 text-decoration: none;
14 text-align: center;
15 }
Demo 上面代码结果按钮大小如下图:
我把html设置成10px是为了方便我们计算,为什么6rem等于60px。如果这个时候我们的.btn的样式不变,我们再改变html的font-size的值,看看按钮发生上面变化:
1 html{
2 font-size:40px;
3 }
Demo
按钮大小结果如下:
上面的width,height变成了上面结果的两倍,我们只改变了html的font-size,但.btn样式的width,height的rem设置的属性不变的情况下就改变了按钮在web中的大小。
其实从上面两个案例中我们就可以计算出1px多少rem:
第一个例子:
120px = 6rem * 20px(根元素设置大值)
第二个例子:
240px = 6rem * 40px(根元素设置大值)
推算出:
10px = 1rem 在根元素(font-size = 10px的时候);
20px = 1rem 在根元素(font-size = 20px的时候);
40px = 1rem 在根元素(font-size = 40px的时候);
在上面两个例子中我们发现第一个案例按钮是等比例放大到第二个按钮,html font-size的改变就会导致按钮的大小发生改变,我们并不需要改变先前给按钮设置的宽度和高度,其实这就是我们最想看到的,为什么这么说?接下来我们再来看一个例子:
Demo
由上面两个的demo中我们知道改变html的font-size可以等比改变所有用了rem单位的元素,所以大家可以通过chrome浏览器的调试工具去切换第三个的demo在不同设备下的展示效果,或者通过缩放浏览器的宽度来查看效果,我们可以看到不管在任何分辨率下,页面的排版都是按照等比例进行切换,并且布局没有乱。我只是通过一段js根据浏览器当前的分辨率改变font-size的值,就简单的实现了上面的效果,页面的所有元素都不需要进行任何改变。
到这里肯定有很多人会问我是怎么计算出不同分辨率下font-size的值?
首先假设我上面的页面设计稿给我时候是按照640的标准尺寸给我的前提下,(当然这个尺寸肯定不一定是640,可以是320,或者480,又或是375)来看一组表格。
上面的表格蓝色一列是Demo3中页面的尺寸,页面是以640的宽度去切的,怎么计算不同宽度下font-site的值,大家看表格上面的数值变化应该能明白。举个例子:384/640 = 0.6,384是640的0.6倍,所以384页面宽度下的font-size也等于它的0.6倍,这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。
Demo3中我是通过JS去动态计算根元素的font-size,这样的好处是所有设备分辨率都能兼容适配,淘宝首页目前就是用的JS计算。但其实不用JS我们也可以做适配,一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备,然后去针对那些设备去做media query设置也可以实现适配,例如下面这样:
1 html {
2 font-size : 20px;
3 }
4 @media only screen and (min-width: 401px){
5 html {
6 font-size: 25px !important;
7 }
8 }
9 @media only screen and (min-width: 428px){
10 html {
11 font-size: 26.75px !important;
12 }
13 }
14 @media only screen and (min-width: 481px){
15 html {
16 font-size: 30px !important;
17 }
18 }
19 @media only screen and (min-width: 569px){
20 html {
21 font-size: 35px !important;
22 }
23 }
24 @media only screen and (min-width: 641px){
25 html {
26 font-size: 40px !important;
27 }
28 }
上面的做的设置当然是不能所有设备全适配,但是用JS是可以实现全适配。具体用哪个就要根据自己的实际工作场景去定了。
下面推荐两个国内用了rem技术的移动站,大家可以上去参考看看他们的做法,手机淘宝目前只有首页用了rem,淘宝native app的首页是内嵌的web app首页。
淘宝首页:m.taobao.com
D X:m.dx.com
最后我们再来看一看他的兼容性:
利用rem实现webapp布局的更多相关文章
- 移动端利用rem实现自适应布局
好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...
- rem字体+百分比布局表格
效果图: 上源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 看了一本书,说可以利用Hierarchy Viewer优化布局
看了一本书,说可以利用Hierarchy Viewer优化布局,今以志之. 参考:http://www.cnblogs.com/Rocky_/archive/2011/11/04/2236243.ht ...
- 用rem实现WebApp自适应的优劣分析
关于rem实现屏幕自适应布局的讨论还是比较多的,刚好我也看到使用rem实现自适应的web app,所以也来凑下热闹. 说起rem,免不了要联系到em.px,这里简单提提他们的定义和特点. 1. px: ...
- 移动端web app要使用rem实现自适应布局:font-size的响应式
关于webAPP的开发最主要解决的就是“自适应自适应布局”.常规的适配有很多做法,例如:流式布局.限死宽度等,但是这些方案都不是最佳的解决方法,而最满足设计需要的是: 元素可以根据屏幕大小而等比列变 ...
- vw+vh+rem响应式布局
科普下: 平时很少用的css单位: 1.长度单位: rem:相对长度单位.相对于根元素(即html元素)font-size计算值的倍数; vw:相对于视口的宽度.视口被均分为100单位的vw; vh: ...
- Rem实现自适应布局
rem布局的目的是为了让我们可以用同一份代码,适应不同的移动终端(rem:就是css单位) 1.项目入口html文件<meta name="viewport" content ...
- rem.js移动布局实例教程
最近想买需要开发微站,微信公众号内嵌入的移动web,总结方法可以使用css3直接使用百分比布局,也可以使用bootstrap做响应式布局等多种方法,个人感觉看项目需要,笔者使用rem.js进行移动前端 ...
- 如何利用rem在移动端不同设备上让字体自适应大小
本人也是一个刚刚接触前端的小虾米,对于移动端这一块更是一抹眼的黑,前端时间接手开始一个移动端的项目,在网上查询了一下rem的作用,百度搜索下来全是介绍rem的作用原理的(rem是根据根元素计算的),然 ...
随机推荐
- STM32F407IG开启FPU,做开方运算
STM32F407IG开启FPU,做开方运算 MDK KEIL中使用STM32F4XX芯片硬件浮点单元FPU Keil中使用STM32F4xx硬件浮点单元 STM32F4-浮点DSP库的MDK开发环境 ...
- PHP开发之路之一--WAMP的安装和配置
来到新公司,领导说后面一个web系统不用ASP.NET做了,用国外的一个Drupal进行二次开发.这个Drupal是基于PHP的一款开源CMS系统,那就必须要自学PHP咯~ 接下来说说正题吧: 一.安 ...
- java.sql.ResultSet技术(从数据库查询出的结果集里取列值)
里面有一个方法可以在查询的结果集里取出列值,同理,存储过程执行之后返回的结果集也是可以取到的. 如图: 然后再运用 java.util.Hashtable 技术.把取到的值放入(K,V)的V键值里,K ...
- phpStudy环境配置多个站点,绑定域名
经常做网站的朋友,往往要在自已的电脑同时建立多个站点,而phpstudy这款软件就能很好的解决这个问题,大家看下图 点击上图中的 其它选项菜单 ,就会弹出下面的对话框,然后点击 站点域名管理 然 后在 ...
- java 随机流
Example10_8.java import java.io.*; public class Example10_8 { public static void main(String args[]) ...
- java 类与对象
class XiyoujiRenwu { float height,weight; String head, ear; void speak(String s) { System.out.printl ...
- Django - 通用视图
urls.py from . import views ... url(r'^$', views.IndexView.as_view, name="index"), url(r'^ ...
- 转:浏览器与WEB服务器工作过程举例
用户通过“浏览器”访问因特网上的WEB服务器,浏览器和服务器之间的信息交换使用超文本传输协议(HTTP--HyperText Transfer Protocol). 例:用户访问东南大学主页 Http ...
- 判断浏览器增加标签 encodeURIComponent
var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; var lx; (s = ua.match(/msie ([\d.]+ ...
- win10系统安装oracle11g时遇到INS-13001环境不满足最低要求
升级win10系统之后,需要重新安装Oracle,因为在安装Oralce11g时,使用64位的会出现各种不兼容问题,我每次安装都是使用32位的数据库. 在安装时点击setup.exe之后,出现了:[I ...