基于rem的H5适配方案

初冬.jpg

移动设备浏览器的问题中心在于CSS,特别是viewport的尺寸。在移动设备上进行网页的开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配。

几个重要的概念####

设备的pixels和CSS的pixels#####

css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。

设备独立像素和物理像素
设备独立像素和物理像素

物理像素和CSS像素的对应关系:
设备像素比 = 物理像素 / CSS像素
设备像素比简称 dpr

在网页开发中我们不用在意物理像素和dpr这些概念,只需知道可以使用的宽度是多少CSS像素就足够了。

viewport的概念#####

viewport的功能在于控制你网站的最高块状(block)容器:<html>元素.

通常,一个块级元素占有起父元素的100%的宽度。所以<body>的宽度就是其父元素<html>的宽度100%。在原理上,<html>的宽度受viewport所限制,<html>元素为viewport宽度的100%。viewport不是一个HTML的概念,所以不能通过CSS修改它。<html>元素的宽度可以通过document.documentElement.offsetWidth来获取。

layout viewport######

当通过移动设备上的浏览器浏览为PC设计的网站时,因为移动设备的屏幕很小,如果把移动设备上浏览器的可视区域设viewport的话,网站会因为viewport太窄而乱作一团。为了能使为PC端设计的网站能在移动设备上正常显示,移动设备的浏览器产商将viewport设为一个较大的值,通常是980px。这个浏览器默认的viewport叫做layout viewport。这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。

layout viewport宽度

visual viewport#####

visualviewport是当前显示在屏幕上的部分页面的大小。但是CSS 布局,特别是感性的宽度(percentual widths)通常是按照layoutviewport来定义,而比visualviewport宽很多。visualviewport的宽度可以通过window.innerWidth来获取。部分设备visualviewport的宽度等于layout viewport的宽度。

根据上面的描述,显然visualviewport的宽度和layout viewport的宽度都不适于移动端CSS布局适配。另外<html>元素的宽度继承于layout viewport,如果layout viewport宽度等于屏幕的宽度,那么为移动端设计的网站就可以在屏幕中完全显示。当是移动设备屏幕尺寸众多,如何适配所有的设备?

一种解决方案是根据浏览器窗口的宽度(CSS3中的vw)进行CSS布局,不过这种方案存在浏览器兼容问题。如果你的网站只需要运行在现代浏览器上,此方案是很好的选择。

vw的兼容性

另一种方案是,页面所有元素的宽高根据HTML的根元素<html>的font-size大小来计算,<html>的font-size根据屏幕的宽度动态设置。这就是基于rem的适配方案的核心思想。从下面的图可以看出remvw具有更好的浏览器兼容性。所以,基于rem的适配方案应该作为移动界面开发的首选方案。

rem的兼容性

rem方案的实现步骤#####
  1. 修改layout viewport 的宽度,使其等于屏幕的宽度,通过添加下面的mete标签就可以做到这点<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    其中width=device-width用于设置viewport的宽度等于屏幕的宽度,initial-scale=1.0, maximum-scale=1.0的作用同width=device-width一样,那么,为什么还要同时设置这两者?因为当它们单独使用时,表现不够完美,下面两张图展示了单独使用时的浏览器兼容性:
    width=device-width.png
initial-scale=1.png

为了弥补彼此的缺陷,所以要同时设置。另外,当两者指定的值不同时,浏览器取其中的最大者。这也是手淘的flexible.js方案动态添加此<mete>标签时不添加width=device-width的原因。

在手淘的flexible.js方案中initial-scalemaximum-scale的缩放值根据操作系统和屏幕的像素密度(dpr)不同而有所不同,例如在dpr=2的iPhone5上缩放比是0.5(scale=1/dpr),iPhone5的屏幕宽度是320(CSS的pixels)所以添加<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, user-scalable=0">后,viewport的宽度是640(CSS的pixels)

initial-scale=0.5, maximum-scale=0.5

flexible.js的作者为自己挖了一个坑。设置特殊的缩放比会带来后续的麻烦,如何保证字体在屏幕尺寸相同,dpr不同的设备上有相同的表现。举个例子:同样是iPhone5设备,A设备的dpr=2,B设备的dpr=3,根据flexible.js方案,A、B设备的缩放比分别是 0.5和0.3,为了使A设备上的font-size=24px的文字在B设备上有同样的表现,需要设置font-size=36px。这是因为A设备的scale=0.5,A设备的layout viewpoint的宽度等于640(CSS的pixels),因为A设备的scale=1/3,A设备的layout viewpoint的宽度等于960(CSS的pixels),A、B设备的物理尺寸相同,要使文字在两块屏幕上表现相同,那么同一个文字在两块屏幕上占的比例也要一样,所有:A(font-size)/640 = B(font-size)/960。为了使采用px作单位的文字在不同缩放比的屏幕上有一致的表现,需要针对不同的缩放比使用不同大小font-size。采用不同的缩放比是作者挖的坑,使用不同的font-size是作者为了填自己的坑,这两部就是在画蛇添脚。从这里已经看出,要使同一个布局在不同的屏幕上表现一至,关键在保证每个元素相对viewport的宽度的大小是一致的。

  1. 编写CSS时元素的width/height、margin、padding等使用rem作为单位,属性的数值 = 设计稿上标注的数值 / 设计稿的宽度,这样就计算出了设计稿上的元素和设计稿的比例。

  2. 在步骤一中我们得出结论,要使同一个布局在不同的屏幕上表现一至,关键在保证每个元素相对viewport的宽度的大小是一致的。接下来要做的就是,动态设置<html>元素的font-size等于layout viewport的宽度。由于我们采用的是rem作为单位,这样变保证了设计稿上的布局和不同设备上呈现的样式有相同的比例。适配完成。

上面说了flexible.js中有画蛇添脚的地方,我自己修改了其中不必要的地方,放在了github上H5-flexible

在写css时,可以使用sass函数减少px转化为rem的工作量:
@function rem($pixels, $design_draft_width:?) { @return $pixels / $design_draft_width + rem; }
?改为设计稿的宽度。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 19,285评论 5 80
  • 移动前端开发之viewport的深入理解 一、viewport的概念 通俗的讲,移动设备上的viewport就是设...
    明明三省阅读 15,519评论 1 46
  • 原文地址 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewp...
    matthewm阅读 1,549评论 0 4
  • 这是一篇色香味俱全的文章,阅读之前,请各位吃货宝宝准备好擦口水之物。 经常听到很多留学腐国的小伙伴抱怨:“哎,在腐...
    留学咖啡馆阅读 4,069评论 0 1
  • 我并不认为创业是一次所谓的最合法的赌博,这样的说法将“创业”说得太随机性。创业是一场体现团队决定智慧性和团队执行能...
    彩印狮阅读 403评论 0 2