如何实现自适应网页设计？

1.背景介绍

随着科技的发达，使用移动设备诸如手机平板等获取信息，社交的人越来越多。如何在屏幕大小不同的物理设备上获得类似的使用体验呢？ 很多网站的做法是为不同大小的物理设备提供不同的网页。但是这样做很麻烦，需要维护多个版本，不够方便。如果只写一个版本，但是可以适应不同宽度的物理设备，那该多好。自适应网页设计（Responsive Web Design）应运而生。

2.知识剖析

什么是自适应网页设计？ 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。简单来说就是同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）。

3.常见问题

问题1:如何实现自适应网页设计？

问题2:viewport的作用。

4.解决方案

（1）在网页代码的头部，加入一行meta标签：meta name="viewport" content=content="width=device-width, initial-scale=1"这段代码意思是说网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。viewport是应对手机模式访问网站,网页对屏幕而做的一些设置。设置viewport后，移动页面就可以进行拖动，放大缩小。 这行标签在编译时会转化成如下的语义：viewport { width: device-width; initial-scale: 1.0; }（2）不使用绝对宽度，使用相对单位 具体来讲CSS代码不能指定像素宽度为xx px;只能指定百分比宽度width: xx%;或者width:auto;字体只能使用相对大小（em,rem,vw,vh,vmin,vmax)等。

（3）流式布局 随着物理设备尺寸变小，内容将会占据更多的垂直空间，下方的内容会被往下推。这就是所谓的流动。

（4）通过媒体查询选择加载CSS //不超过600px，字体大小为默认

5.编码实战

6.扩展思考

<1>何时选择自适应式网页设计？

（1）以网站的目标族群来考量

纯粹找资料>手机版网页

如果你的网站使用者只是使用行动装置来找资料的，那就抛开酷炫效果的设计，只留下必要的资讯，也就是做单独的手机版网页。

购物行为(线上购物车) >手机版网页

如果你希望使用者能在你的网站上有行动装置购物的行为，那么你也应该要选择手机版网页设计。去掉无用的装饰花边，将商品分类选项重新设计，让手机萤幕专注在购物的流程以及产品的展示上，这样才能获得大众的使用意愿。

资讯阅读(部落格) >手机版网页

如果你的网站文字资讯量很大，如报纸、杂记等网站，手机版网站也会是首选。

基本上只要不涉及以上三种要素，都可以做自适应网页。

（2）以网页设计排版角度来考量

˙结构复杂>手机版网页

如按钮、分类等可以超连结的元件很多，或是喜欢电脑版有许多花边元件的网站业主，建议做手机版网页设计

<2>自适应和响应式的区别

自适应：让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）

响应式：响应式网页设计指的是页面的布局（流动网格、灵活的图像及媒介查询）。总体目标就是去解决设备多样化问题。 可以说响应式布局包含了自适应布局，但是响应式的成本会更高，因为它需要考虑不同页面宽度下不同的页面布局，而自适应只考虑页面能自适应屏幕不溢出就够了

7.参考文献

参考一：阮一峰

参考二：自适应设计-MDN