浅谈Web自适应

前言

随着移动设备的普及，移动web在前端工程师们的工做中占有愈来愈重要的位置。移动设备更新速度频繁，手机厂商繁多，致使的问题是每一台机器的屏幕宽度和分辨率不同。这给咱们在编写前端界面时增长了困难，适配问题在当下显得愈来愈突出。记得刚刚开始开发移动端产品的时候向设计MM要了不一样屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，但愿有益于诸君。

特别说明：在开始这一切以前，请开发移动界面的工程师们在头部加上下面这条meta:

简单事情简单作-宽度自适应

所谓宽度自适应严格来讲是一种PC端的自适应布局方式在移动端的延伸。在处理PC端的前端界面时候须要用到全屏布局时采用的就是此种布局方式。它的实现方式也比较简单，将外层容器元素按照百分比铺满地方式，里面的子元素固定或者左右浮动。

因为父级元素采用百分比的布局方式，随着屏幕的拉伸，它的宽度会无限的拉伸。而子元素因为采用了浮动，那么它们的位置也会固定在两端。该宽度自适应在新的时代有了新的方法，随着弹性布局的普及，它常常被flex或者box这样的伸缩性布局方式替代，变得愈来愈“弹性”十足。须要了解弹性布局，请前往Flex布局教程和卤煮box布局教程比较。

大小之辨-彻底自适应

“彻底自适应式”是卤煮对越此方案的叫法，因为卤煮如今找不到官方名称，因此暂时就这样叫它。这种解决方案相对前一种来讲进步很多，不只仅宽度实现了自适应，并且界面全部的元素大小和高度都会根据不一样分辨率和屏幕宽度的设备来调整元素、字体、图片、高度等属性的值。简单来讲就是在不一样的屏幕下，你看到的字体和元素高宽度的大小是不同的。在这里，有人就会说利用的是媒体查询熟悉，根据不一样的屏幕宽度，调整样式。卤煮以前也是这样想的，可是你须要考虑到界面上的许多元素须要设置字体，若是用media query为每一个元素在不一样的设备下都设置不一样的属性的话，那么有多少种屏幕咱们的css就会增长多少倍。实际上在这里，咱们采用的是js和css熟悉rem来解决这个问题的。

REM属性指的是相对于根元素设置某个元素的字体大小。它同时也能够用做为设置高度等一系列能够用px来标注的单位。

采用以上写法，div继承到了html节点的font-size，为自己定义了一系列样式属性，此时1em计算为10px，即根节点的font-size值。因此，这时div的高度就是20px，宽度是30px，边框是1px，字体大小则是10px；一旦有了这样的方法，咱们天然能够根据不一样的屏幕宽度设置不一样的根节点字体大小。假设咱们如今设计的标准是iphone5s，iphone5系列的屏幕分辨率是640。为了统一规范，咱们将iphone5 分辨率下的根元素font-size设置为100px;

那么以此为基准，能够计算出一个比例值6.4。咱们能够得知其余手机分辨率的设备下根元素字体大小:

在head中，咱们将以上代码加入，动态地改变根节点的font-size值，获得以下结果:

接下来咱们能够根据根元素的字体大小用rem设置各类属性的相对值。固然，若是是移动设备，屏幕会有一个上下限制，咱们能够控制分辨率在某个范围内，超过了该范围，咱们就再也不增长根元素的字体大小了:

通常的状况下，你是不须要考虑屏幕动态地拉伸和收缩。固然，假如用户开启了转屏设置，在网页加载以后改变了屏幕的宽度，那么咱们就要考虑这个问题了。解决此问题也很简单，监听屏幕的变化就能够作到动态切换元素样式:

为了提升性能，让代码开起来更加完美，能够为它加上节流阀函数:

顺带解决高保真标注与实际开发值比例问题

若是大家设计稿标准是iphone5，那么拿到设计稿的时候必定会发现，彻底不能按照高保真上的标注来写css，而是将各个值取半，这是由于移动设备分辨率不同。设计师们是在真实的iphone5机器上作的标注，而iphone5系列的分辨率是640，实际上咱们在开发只须要按照320的标准来。为了节省时间，不至于每次都须要将标注取半，咱们能够将整个网页缩放比例，模拟提升分辨率。这个作法很简单，为不一样的设备设置不一样的meta便可:

这样设置一样能够解决在安卓机器下1px像素看起来过粗的问题，由于在像素为1px的安卓下机器下，边框的1px被压缩成了0.5px了。总之是一劳永逸！淘宝和网易新闻的手机web端就是采用以上这种方式，自适应各类设备屏幕的，你们有兴趣能够去参考参考。下面是完整的代码:

让元素飞起来-媒体查询

运用css新属性media query 特性也能够实现咱们上说到过的布局样式。为尺寸设置根元素字体大小:

这种方式也是可行的，缺点是灵活性不高，取每一个设备的精确值须要本身去计算，因此只能取范围值。考虑设备屏幕众多，分辨率也良莠不齐，把每一种机型的css代码写出来是不太可能的。可是它也有优势，就是无需监听浏览器的窗口变化，它会跟随屏幕动态变化。媒体查询的用法固然不只仅像在此处这么简单，相对于第二种自适应来讲有不少地方是前者所远远不及的。最明显的就是它能够根据不一样设备显示不一样的布局样式！请注意，这里已经不是改变字体和高度那么简单了，它直接改变的是布局样式！

此种自适应布局通常经常使用在兼容PC和手机设备，因为屏幕跨度很大，界面的元素以及远远不是改改大小所能知足的。这时候须要从新设计整界面的布局和排版了:

若是屏幕宽度大于1300像素

若是屏幕宽度在600像素到1300像素之间，则6张图片分红两行。

若是屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。

许多css框架常常用到这样的多端解决方案，著名的bootstrap就是采用此种方式进行栅格布局的。

总结

无论哪种自适应方式，咱们的目的是使得开发网页在各类屏幕下变得好看：若是你的项目定位的用户群仅仅是使用某种机型的人，那么能够采用第一种自适应方式。若是你的客户主要是移动端，可是客户的设备类型庞杂，建议采用第二种方式。若是你雄心勃勃地须要创建一套兼容PC、PAD、mobile多端的一体化web应用，那么第三种选择显然是最适合你的。每种方式都有本身的利弊，根据需求权衡利害，合理地实现自适应布局，须要不停的实践和摸索。路漫漫其修远兮，吾将上下而求索。

参考资料

• 自适应网页设计（Responsive Web Design）

• 移动前端自适应解决方案和比较

• 移动web适配利器-rem