主流网页设计及布局实现

前段时间做yt商城，产品和设计出了一张首页效果图，在原有官网首页基础上进行局部调整。还给了迪卡侬官网进行参考，想实现响应式网站的效果。

我在评审会上要求设计多个尺寸的页面，也就是需要多个断点，说了半天感觉大家都不太理解。最终的效果图页就一个，所以在开发过程中自行脑补实现了局部响应式效果。

后期在工作之中，系统性去了解了响应式相关知识，借此机会，把学习到成果分享给大家。

首页我们来了解一下两个专业名词：断点、媒体查询

名词解析

何谓断点？

页面布局的变化点，就是断点。
用浏览器打开一个响应式网站，检查元素，右上角会显示视窗当前的分辨率，慢慢缩小视窗的宽度，找到页面布局的变化点，就是我们上面说到的断点或者次断点。
打开PS CC较新版本，创建文件是他已经为我们划分好断点了。1024、1280、1366、1440、1902、2560等
我们也可以不用他给的断点，通过statCounter统计图标，我们能很直观的看到当下用户使用设备情况，我们可以以此为参考来设置断点。

何谓媒体查询？

第二个名词是媒体查询。
A：媒体查询（media query），其实是实现断点的一种方法。开发人员用简单的方法，来获取不同设备的特征，例如设备的宽度/高度，窗口的宽度/高度，设备的手持方向，分辨率等。
通过其特性可以编写对应设备的样式。

还有体测答应二维码中用到print媒体查询，screen、handheld等

现在我们了解了这两个名词，后面分享我会让大家逐步了解他们在设计和开发中的作用。

常用的布局

前端目前常用的布局模式：静态布局、流式布局、弹性布局、自适应布局、响应式布局、网格布局（css grid layout）
拿到设计稿后，我们该如何选定布局呢？下面我先分别介绍下常用的布局是如何实现的：

静态布局

• 页上的所有元素的尺寸一律使用px作为单位
  1.布局特点
  不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端
  优点: 这种布局方式对设计师和CSS编写者来说都是最简单的，容易实现。
  缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。

流式布局

• 流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)。例如都是桌面端，或都是手机端

流式布局的特点 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统 网格系统

1. 布局特点
   屏幕分辨率变化时，页面里元素的大小会变化而但布局不变
2. 设计方法
   使用%百分比定义宽度，高度大都是用px来固定住，不过现在也可以使用vh来实现纵向流式布局
   缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示

tips: 流式布局往往不会单独出现，跨度较大时，就会出现大量留白

自适应布局

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即按照断点创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
2、设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

rem弹性布局(vw+vh同样也能实现)

布局特点：
屏幕分辨率变化时，页面里面元素会等比缩放
设计方法：
根据设备尺寸，使用js动态设置根节点font-size。页面元素单位为rem
案例：乐学等H5页面、小程序（750rpx）

案例：
http://m.dev.yitong.com/wx-v2/sweepstakes.html#/
弹性布局应用非常广泛，小程序中以750rpx作为固定宽度，所有园所都以rpx作为单位，设计稿也只需要750的倍数，可以实现移动设备一致性体验。

响应式布局

• 响应式是用于解决不用设备之间、不用分辨率之间的兼容问题(通常是指兼容PC，平板，手机等设备之间较大的分辨率差异)

布局特点：
每个屏幕分辨率下面会有一个布局样式，即元素位置和大小时刻都会变
设计方法：
媒体查询+横向纵向流式布局。
优点：适应pc和移动端，如果足够耐心，效果完美。
缺点：需设计多个版本，开发人员适配主流设备，测试工作量也增大

案例：微软（优秀）

案例：迪卡龙官网响应式分析

1200 静态布局 流式布局
1080 ~ 1200 主推商品模块变化
1024 ~ 1080 导航文字收起
920 ~ 1024 推荐商品缩小、四块服务项目缩小
800 ~ 920 四块换行
768 ~ 800 隐藏部分导航、按钮
640 ~ 768 隐藏部分商品
400 ~ 640 Logo隐藏，部分商品缩小
360 ~ 400 商品图放大

响应式页面在头部会加上这一段代码：
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">

网格布局 （css grid layout）

仅能在支持的浏览器中应用，
第二版兼容性不佳，第一版在Edge低版本都不完全支持，android4.x及ios10.x支持也不够友好。
但不得不说，它也是未来的趋势。值得我们探索学习。
袁哲伙伴也将在下期进行分享，我在这里我就不再过多赘述。
兼容性
基础教程

前端组常用布局方案

PC端

以固定布局为主，自适应布局为辅，局部流式布局
（首页/商品详情/新闻咨询/关于yt）

CMS端

流式布局为主（利用框架栅格实现）

H5移动端

弹性布局为主（rem、vw&vh），少量流式布局

当下主流网页设计方案

说完布局，我们来了解下主流网页设计
当下，移动设备早已普遍，用户量远超桌面设备，用户包括大家会更多的会使用移动设备（手机、平板等）浏览网站。于是，除了传统的桌面端，对移动小屏设备的良好支持，提供移动设备用户体验，成为几乎所有网站设计的一个要素。现在主流的解决方案是响应式网页设计（Responsive Web Design）和自适应网页设计（Adaptive Web Design）。以及两者的结合使用。

自适应设计与响应式设计都是什么，有什么区别？

A：很多人会对响应式布局和自适应式布局产生混淆，确实他们的原理是非常相似的，都是检测设备，根据不同的设备采用不同的css。

要深刻理解其区别，我们就需要搞清楚其定义（维基百科）：

响应式网页：

Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. (From Wikipedia)
响应式网页设计是一种使网页能够在不同窗口大小或不同屏幕大小的设备上都良好展示的网页设计技术。

自适应网页：

Adaptive web design(AWD) is a process of server-side detection that chooses a design layout and size to display. The adaptive design will serve different versions of the site (or page) to different devices based on common screen sizes and resolutions.  (From Wikipedia)
自适应网页设计是一种后端检测技术，它（根据用户代理）选择布局和大小合适的页面。自适应设计会根据屏幕尺寸和分辨率，为不同设备提供不同版本的网站（网页）。

自适应是需要多个版本的网页，一般来说，移动设备一套，桌面设备一套

服务器收到用户请求后，根据HTTP请求中的UA头判断设备类型，选择合适的网站版本。

1. 多域名与重定向。很多大型复杂网站使用的方式，网站的不同版本发布到不同域名。最常见的是使用yitong.com和m.yitong.com域名。如果服务器判断出用户代理是移动端，则重定向到m.yitong.com域名。（移动端和桌面端两个工程）
2. 子文件夹与重定向。与1类似，但是把移动端保存在某个子文件夹中，移动端重定向到www.yitong.com/m/下。（可以是一个工程，及子目录，或两个工程用代理到同域下）
3. 多模板与动态选择。一个网页需要多个模板，后端根据UA类型选择合适的模板，只需要一个域名。 （pc-nuxt ssr 模板项目可以实现）

响应式也需要多版本网页，设计几套取决于断点数量

而设置多少个断点由网站的内容决定，设计师需要根据网站的实际内容找到合适的断点，设法避免列间空白太宽或太窄的情况。

同时响应式包含如下特点：

1. 页面布局具有规律性，必须建立灵活的网格基础，元素宽高可用百分比代替固定数值；
2. 网页图片必须是可伸缩的(页面中图片不固定宽/高)，图标尽量使用Iconfont。



关于网格和栅格系统

栅格是由网格发展而来的
使用其目的是规范设计，提高页面一致性和复用性，提升开发设计流程的效率。

许多设计工具自带栅格系统功能，例如ps和sketch
许多前端框架都自带栅格，我们也可以遵循其规范进行设计

element-ui(pc端，兼容至IE10+，常用于CMS)
ant-design(pc端，兼容至IE9+)
vant(移动端)

关于iconfont

之前钱丽兰已经分享过具体设计方法，这里我将说下使用它的优点：

1. Icon是矢量的，可以自由适应各种尺寸大小，不会模糊；
2. 占用空间很小，250个图标的字体只有不到300K；
3. Icon Font可控性更高，可以用代码去控制大小、颜色、透明度、特效等；
4. 兼容性高，甚至是低版本ie浏览器。

A2. 扩展阅读
iconfont

响应式vs自适应

对比 工作量、用户体验、适应性、性能

总结

响应式和自适应并不冲突，我们可以结合使用，即A+R方式。理想状态下，我们可以让多版本网页都具有响应式的特性

最后

参考资料

• MDN - Responsive design
• 9 basic principles of responsive web design
• 设计师应该了解的响应式知识
• 最新2017响应式网页设计断点数值与CSS代码段参考