用友UAP马太航：解析移动开发中的响应式布局

来源：互联网

2014/10/29 16:08:37

移动互联占据互联网市场之后，市场上的终端设备日新月异，谷歌眼镜，苹果智能手表等新型穿戴设备相继发布。仅手机一类品种每年的增长量就有400种之多。高分辨率设备也出现在市场上，4k时代刚刚被大家所熟知，5k屏已经悄然出现在市场中。面对如此多的终端设备，给网站设计者，开发者提出了各种严酷的考验。

分享到：新浪微博腾讯微博

本文关键字：用友 UAP 移动互联

目前，用友UAP认为，应该首先针对小屏幕进行设计，然后逐步增强针对大屏幕的设计和内容。一般可以通过阻止移动浏览器自动调整页面大小、媒体查询以及运用流式布局等技术来实现响应式网页设计。最终支持多种设备，如下图：

第一，阻止移动浏览器自动调整页面大小

使用智能手机浏览桌面端网站时，一般会自动缩放到合适的宽度使视口能够显示整个页面，但是这样会使文字变得很小，浏览内容不方便。可以通过设置meta标签的viewport属性，设定加载网页时以原始的比例显示网页.将这个meta标签加到标签里。

viewport是网页默认的宽度和高度，上面代码的意思是网页宽度默认等于设备宽度(width=device-width)，原始缩放比例(initial-scale=1)为1：0，表示支持该特性的浏览器都将会按照设备宽度的实际大小渲染网页。

所有主流浏览器都支持这个设置，包括IE9.对于那些老式浏览器(主要是IE6、7、8)，需要使用css3-mediaqueries.js或者respond.js为IE添加Media Query支持.

设置viewport meta标签后，任何浏览器都不需再缩放页面，就可以针对不同视口修正设计效果了。

第二，媒体查询

实现响应式设计的关键技术是CSS3的媒体查询模块，可以根据设备显示器的特性为其设定CSS样式。仅仅使用几行代码，就可以根据诸如视口宽度、屏幕比例、设备方向(横向或纵向)等特性改变页面内容的显示方式。

首先，选择性加载样式文件。媒体查询能根据设备的各种功能特性设定相应的样式，而不仅只针对设备类型，如下代码

首先，媒体查询表达式询问了媒体类型(你是一块显示屏吗？)，然后，询问了媒体特性(显示屏是纵向放置的吗？)。任何纵向放置的显示屏设备都会加载portrait-screen.css样式表，其他设备则会忽略该文件。基于媒体查询实现了选择性加载样式文件。

其次，CSS样式表中使用媒体查询。对于将某些在同一个文件的样式而又要针对不同的设备应用不同的样式时，可以使用在样式文件中用@media选择应用。如将下面的代码插入样式表，在屏幕宽度小于等于400像素的设备上，h1元素的文字颜色就会变成绿色。

media screen and(max-device-width；400px){

hl{color；green}

}

然后，使用CSS的@import方式。还可以使用CSS的@import指令在当前样式表中按条件引入其他样式表。例如下面的代码会给视口最大宽度为360像素的显示屏设备加载一个名为phone.CSS的样式表。@import url(“phone.CSS”)screen and(max-width；360px)；但使用CSS的@import方式会增加HTTP请求，影响加载速度，所以要慎重使用该方法。

第三，流式布局

媒体查询有其优越性，但也存在一定的局限性。那些仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS媒体查询规则突变到另一组，两者之间没有任何平滑渐变。为了实现更灵活的设计，能在所有视口中完美显示，需要使用灵活的百分比布局(也被称之为“流式布局”)，这样才能让页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。

首先，将网页从固定布局修改为百分比布局。如果已经拥有了一个固定像素布局的网页，Ethan Marcotte提供了一个简易可行的公式，可以将固定像素宽度转换对应的百分比宽度(目标元素宽度÷上下文元素宽度=百分比宽度)。只要明确了上下文元素，就可以很方便地将固定像素宽度转换对应的百分比宽度，实现百分比布局。

其次，用相对大小的字体。em的实际大小是相对其上下文的字体大小而言的，如果给标签设置文字大小为16 px，给其他文字都使用相对单位em，那这些文字都会受g1]body上的初始声明的影响。这样做的好处是如果完成了所有文字排版后，客户又要将页面文字统一放大，只需要修改body的文字大小，其他文字也会相应变大。同样可以使用公式(目标元素尺寸÷上下文元素尺寸=百分比尺寸)将文字的像素单位转换为相对单位。

责编：李玉琴