从手持设备到移动端布局

引言

当你阅读到这一篇博客的时候，你身在何处，用的又是什么设备？如若在10年前，绝大多数人在阅读博客的时候都是坐在书桌前看着电脑屏幕。而在2020年的今天，无论是身在何处，你都可以轻而易举地拿起你生活中最寻常的设备，浏览图文并茂的完整网页。随着通讯设备厂商们将重心从更复杂的硬件设计向更完备的软件体验转移，手机毋庸置疑地夺走了电脑对于“上网冲浪”的霸主地位，成为了人们互联生活的首选和必要。

起源

1997年6月，诺基亚、爱立信、 摩托罗拉和无线星球强强联手，共同成立了WAP(无线通讯应用协议)论坛，1个月后，全球首个WAP标准架构诞生，这项技术使得移动互联网有了一个通行的标准，从此手机浏览网页的构想开始初见雏形。
与现在主流的HTML(超文本标记语言)网页不同，WAP早期版本的页面语言是WML，即一种从HTML继承而来基于XML的纯粹页面标记语言，它的代码的编写结构比HTML严格且只支持显示文本和图片。界面由功能单一的文本，链接和图片组成，十分简单。

发展

为利于W3C开发的标准，2005年后WAP由1.0过渡到2.0，页面语言采用了XHTML和CSS作为底层支持的WML 2.0，这使得WAP网页功能、性能、安全以及传输等各个方面都得到了一定的提升。对于一般手机用户而言，板式的美化和功能的升级是最直观的体验。

突破

2007年1月9日，乔布斯召开了初代iPhone发布会，Safari浏览器作为众多出彩的功能之一，成为了手机上第一个支持全HTML网页的浏览器，浏览完整版PC网页在移动端成为了可能。
发布会上乔布斯示范了双击屏幕放大显示区域的功能以解决手机用于浏览网页屏幕过小的问题，这对比低级的WAP网页所产生的碾压性差距加之日后安卓的大力加盟，最终使得HTML成为了移动端语言的主流选择。

但正所谓金无足赤，人无完人。这一突破性的进步同时也伴随着一些难以避免的问题：加载速度太慢——发布会上完整加载纽约时报花费了近40秒的时间；加载数据量过多——加载PC网页所产生的流量费用远超WAP网页，而当时国内运营商5元的流量套餐仅仅提供30M的流量。

权衡

随着4G时代的到来，网速和资费得到了一定程度的解决，但与此同时人们的生活节奏也变得很快。逐渐地，人们对于风靡一时的手机浏览PC网页热情消退，而手机上网的侧重点也逐渐回归了轻便简洁和主题明朗。今天，当我们再将电脑版页面和手机版页面同时呈现于小屏之上进行对比时，大多数人都将更倾向于后者。

2018年，伴随着“全面屏”概念的引入，手机屏幕的主流比例由持续了多年的16:9逐渐变为18:9，而竖屏阅读也更加符合人们使用手机的习惯，相较于电脑屏幕差异巨大的手机屏幕似乎更加不适合PC端网页的阅读。

那么，如何既能利用HTML的优势，使手机页面的布局较以前的WAP网页更加丰富多彩，又能更好地适应当今百花齐放的屏幕的大小和屏幕比例呢？CSS3给了我们答案。

布局

通常情况下，大型网站的前端工程师们会为同一个网站准备了两套代码，当用户进行访问时，网站通过服务端检测后会判定直接返回PC端网页内容或经过后端重定项后返回移动端内容。另外，部分小型网站会选择用一套代码根据屏幕尺寸不同来适配所有的设备。而他们所用到的布局方案，是前端学习之必备，在此做一个简单的讲解。

百分比布局(流式布局)

所谓百分比布局便是将一般元素的高度定死，使其宽度自适应。当出现大型轮播图时，则将轮播图的宽度固定为100%，高度自适应，而页面内的小图标和文本则通过固定宽高和大小的办法，使其根据空间多少决定排布。这样布局的好处在于大屏幕下能显示更多的内容，但坏处则是宽屏下比例会有些不协调。

如上图中网页采用了百分比布局，当用iPad浏览时，“更多推荐”中的内容在同一行中显示了更多，但因为屏幕比例，每一个模块显得矮而厚，从而显得不协调。

等比缩放布局

所谓等比缩放布局，则是通过rem和vw两种比例单位对网页进行编写，这样编写的网页会根据视窗的宽度进行等比例缩放。这种做法的优点在于不会使结构变形，而缺点则在于不能在大屏幕上显示更多的内容。

上图为王者荣耀官网图，可以看出，当浏览设备从手机变为平板电脑以后，大屏上的可见内容不增反减。

响应式布局

有没有一种办法既能让大屏幕显示更多又能让显示不随屏幕比例的变化而不协调呢？答案是：响应式布局。

所谓响应式布局，便是针对不同的屏幕宽度，采用不同的CSS样式，这种布局的优点在于能够解决前两种布局的短板——既能让大屏显示更多的内容，又不会因为缩放造成比例不协调。但是缺点也很明显：工作量巨大——针对不同的屏幕采用不同的样式，便是成倍的工作量，如若是针对大型网站，工作量将更加难以想象，所以一般情况下，完全依赖响应式布局的页面仅仅用于一些小型网站或者大网站中的小部分。

展望

随着三星、华为等业界龙头开始对于折叠屏幕的探索，手机的屏幕比例甚至不再固定，届时如何兼容多种不同的比例给用户带来最佳的体验，将会是困扰设计师和前端人员的一个难题。随着5G时代的到来，手机浏览是否又会发生天翻地覆的改变，我们不得而知。但值得肯定的是，编译语言的进步给了我们更多的选择，毕竟仅仅10余年的时间里，移动互联生态的发展已经上了无数个台阶。