科技猎产品经理学技术：移动Web怎么做屏幕适配（二）
【文章摘要】讲到屏幕适配，要先讲讲网页布局，网页布局就是你所看到网页的结构，一个个的格子区域，比如左边、右边、顶部、banner、边栏、footer（尾部）等部分组成了一个网页的布局。
产品经理学技术：移动Web怎么做屏幕适配（一）
网页屏幕适配是一个老生常谈的话题，今天我们来捋一捋网页屏幕适配都有哪些常用的方法。
讲到屏幕适配，要先讲讲网页布局，网页布局就是你所看到网页的结构，一个个的格子区域，比如左边、右边、顶部、banner、边栏、footer（尾部）等部分组成了一个网页的布局。
固定布局 不管屏幕分辨率如何变化，访客看到的都是固定宽度的内容。它的好处是能如同平面媒体一样，版面上所有区域的大小都能维持不变，让用户的操作习惯不会受到不同大小的屏幕分辨率影响，多见于传统的PC网页。
流式布局 则一般有一个父容器，里边装着子容器。父容器可以自动的判断子容器是否需要换行，什么情况下需要换行。它不会像固定布局一样出现在左右两侧空白，或是被窗口框切掉。父容器根据浏览器的宽度和屏幕的大小进行自适应调整，子容器跟着父容器进行大小调整就好了。
既然是讲的屏幕适配（通常是流式布局），所以就看下常见的几种适配方式：
一、响应式
响应式布局是一种折中的设计方案，根据不同的屏幕分辨率显示不同的内容。但容易代码冗余，加载速度较慢。为什么会出现这样的问题呢？
简单来说，假如你设计了PC、移动、平板电脑 三种终端的适配方案，使用响应式布局，需要把PC、移动、平板的内容样式都准备好，当页面请求完成之后，再根据当前的屏幕尺寸显示最合适的方案，隐藏其他两种页面布局。
该图片由来源于网络（优测网（wxutest））
上图是一些屏幕适配的效果，一般使用百分比来做定位，同时，为了照顾到较小的屏幕，通常需要预留一定的空间（也就是保持内容与内容之间的距离），以便在小屏幕下有足够的空间能挤下内容。
优点：
跨平台，节省人力与维护成本
缺点：
1、设计局限性较大。
设计师需要同时考虑PC、平板、手机几个终端设备的内容，尽量保持相同表现形式的情况下去传达原意，对设计师要求高，同时也需要做一些取舍，所以说是折中的方案。
2、页面代码冗余，加载时非按需加载，浪费带宽。通常响应式页面是同时下载多套CSS样式代码，还有视频、图片等资源一般也是统一加载的，这导致在手机上就下载PC/pad的冗余代码，其实毫无意义，浪费服务器带宽，还浪费用户的手机流量。
二、Cover与Contain
Cover和Contain是CSS3里的background-size（背景） 属性常用值。
background-size: length|percentage|cover|contain;
关于Cover 布局：
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
通俗来讲，就是：保持页面的宽高比，取宽或高之中的较小者占满屏幕，超出的内容会被隐藏。此布局适用于主要内容集中在中部，边沿无重要内容的设计。
应用到布局当中，Cover式布局的思想就是，把重要的东西集中在屏幕可视区域中间，无关紧要的东西平铺。多见于宽屏的官网设计，菜单和首页幻灯图左右100%拉伸，内容保持在中部。
PC 侧例子
移动侧例子，该图片由来源于网络（优测网（wxutest））
关于Contain布局：
把图像图像（等比例）扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
通俗来讲，保持页面的宽高比，取宽或高之中的较大者占满屏幕，不足的部分会用背景填充。这里的背景一般采用纯色或者可平铺的背景，以保持扩展之后背景与内容的协调性。
该图片由来源于网络（优测网（wxutest））
优点：
cover: 覆盖，背景要覆盖元素的所有区域，没有空白。
contain: 包含，整个背景图都要被包含在元素内，没有超出的部分。
当窗口发生变化时，他们能根据客户端浏览器的大小进行自我的调整适应。
缺点：
cover: 屏幕较小时，边缘部分会被遮挡，要求设计时要将重要部分集中在中间区域。
contain: 屏幕较大时，会有大片的背景区域，同样对设计师要求也很高，要求此时页面能保持协调性。
好了，以上是常用的集中网页布局的思想。或许你会问，都在讲「适配」，那用什么作为长度单位呢？
有些读者可能读过了上一篇文章：《学技术：移动Web怎么做屏幕适配（一），感兴趣可以点菜单的「历史文章」看看，里边提到一个长度名词：Rem。
Rem 是CSS3中新增加的一个单位值，是一个相对单位，也就是区别于px（像素）、pt（点）等绝对单位长度的一种长度度量方式。
这里的相对怎么理解呢？比如青岛大虾的价格是变化的，螃蟹的价格根据青岛大虾来变化，1只螃蟹可以换3只青岛大虾。1只青岛大虾今天卖38元，那螃蟹就卖38*3=114 元1只；明天1只青岛大虾卖40元，那1只螃蟹就卖40*3=120元。
Rem（螃蟹）是相对于html标签的font-size（字体尺寸，青岛大虾）的。例如 html标签设置 font-size:36px，同时div设置width:1.2Rem。那么这个div的宽度就是1.2rem=1.2 * 36px = 43.2 px。
说到这里，你豁然开朗了吧？^_^
