如何重构一个HTML5移动页面

发表于2017-08-28 11:36 | 次阅读 | 0条评论 | 作者：siru90

介绍几种HTML5移动页面的重构方法，跟大家交流交流。不详细述说DPI、PPI的那些事儿，想了解这方面知识的同学可以看看最下面的几个链接。

● 完美处理各种分辨率？@media让我想太多
● 认真认识下px、pt、pc、em、rem
● 移动页面重构方法
● 其他链接
一、完美处理各种分辨率？@media让我想太多
第一次接到移动页面重构，首先想到的是12号字在小手机显示正常，在大手机里看不就显得很小了？然后知道了em和@media。em是相对于当前对象内文本的字体尺寸，会根据父级字体大小改变。好棒，那我用@media改变父级字体大小，整个文档的大小就都跟着改变了！然后把width、height、margin等的px单位换算成em，那也都是弹性大小了，好开心！所以有了下面的demo。

是不是觉得好美，大屏小屏都兼容的好棒哦，字体大小、色块摆布都好适合手机呐，这是自适应完美的一个例子！好吧，试试横屏。

这绝对不是我故意放大的效果。回去代码里看就懂了，@media利用屏幕宽度来改变基数字体大小，横屏时屏幕宽度达到640以上，基数字体大小都26px了。

看似很美好，应用到实际例子中就发现问题了，产品和测试并不期待横屏的字体那么大。那我利用@media针对各个分辨率的配置是不是有点多余了？还是我@media用错了思路？

二、认真认识下px、pt、pc、em、rem
● 绝对长度单位：in（英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica）。其中in、cm、mm和实际中的常用单位完全相同。
pt（磅）是标准印刷上常用的单位，72pt的长度为1英寸。
pc（pica）也是印刷上用的单位，1pc的长度为12磅。
绝对长度单位，虽然理解起来很容易，但是在网页的设计中很少用到。所以我们就忽略它们吧。
● 相对长度单位：是网页设计中使用最多的长度单位，包括px、em、rem等。
①px就是通常所说的像素，使网页设计中使用最多的长度单位。将显示器分成非常细小的方格，每个方格就是一个像素。表面上看好像很容易理解，实际上，px的具体大小是受到屏幕的分辨率影响的，也就是和划分屏幕各自的方式有关。例如，同样是100px大小的字体，如果显示器使用800×600像素的分辨率，那么，每个字的宽度是屏幕的1/8。若将显示器的分辨率设置为1024×768像素，那么同样是100px字体的字，其宽度就越为屏幕宽度的1/10。（所以不用担心12px的字体在小屏幕看着正常，在大屏幕看着相对就小了，不会的~）
②em是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
例如一个div包裹着一个p，div给了font-size:20px，p给了font-size:0.8em，则p字体大小为20*0.8=16px。

如果p里面又包含一个span，span给了font-size:0.8em，则span字体大小为20*0.8*0.8=12.8px。

如果div没有给font-size，浏览器默认字体大小是16px，那p字体大小为16*0.8=12.8px，span字体大小为16*0.8*0.8=10.24px。

给字体赋予em值，就是为了针对不同分辨率赋予不同的字体大小，那元素本身的width、height、margin等也都需要用em代替px作为单位，不然就可能出现下面的情况。

但是记住他们是以元素自身的font-size值去计算em值的

所以很可能最后你会把自己绕晕在层级里- -。（看到那个padding没有？我简直没把自己坑死！）

③rem（root em）是CSS3新增的一个相对单位，就是相对于根目录的em而不是相对于父元素，也就是说，它虽然是相对值，但是只是相对于根目录来说的（也就是html），它不会随着其它元素的改变而改变。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
使用rem时，如果设置html为1rem，就是默认的16px。如果习惯设置单位为px，也请设置为16px，因为任何整数除以16都是有限小数。

重新认真区分了px、em、rem，后面的需求就知道该如何选择了。
① 用rem代替em，不会有字体大小逐层复合的连锁反应。
② 元素width、height等不要用em代替px，这是坑自己，直接使用px就好了。实在希望做成根据字体大小缩放，那就坑自己的使用rem吧。
③ 用@media根据屏幕分辨率改变根目录字体大小会导致横屏变成超大字，不适合。既然删去了@media，那字体换算成rem也没什么用，还是直接使用px吧。
所以发现没，我们又绕回来了，移动页面跟PC页面重构是一样的~！都是使用px嘛！（撒花~）当然，不全是px，还要有些小技巧，请往下看。

三、移动页面重构方法
1、文本字体大小14px、16px，标题18px或以上，不需要针对不同分辨率做不同配置。（不明白？再回去上面看看px的介绍~）
实际项目中我们会发现，手机或者平板上查看文章14、16号字就很舒服了，再大看起来就别扭了。平板会建议打开PC版页面而不是手机版页面，如果硬要把手机页面拉扯到平板大小查看，要不就显得空，要不就变成20几号字查看，都很怪异。

2、设计稿双倍图切，CSS除以2写。（超高清屏暂时不考虑）
logo等重要标识更要遵循这个方法，要用px固定宽高。产品或者品牌不会希望自己的logo看起来是糊的。。

3、善用position:absolute的居中用法：
position:absolute;left:50%;margin-left: -width/2;top: 50%;margin-top: -height/2;

4、针对单屏滑动的移动页面布局：每屏的主要内容一定要显示在一屏内，居中后调整或者百分比（%）定位；其他角落元素依次绝对定位；背景平铺横向撑满。
标题、望远镜、下面的提示文字都是这一屏的主要内容，使用position: absolute的居中用法，再相应的用margin-top正负调整上下。这样即使在极端情况下，标题和按钮也是可见的。
左上角的logo，绝对定位到左上即可。