1、引言
随着移动智能设备的普及，移动设备正超过桌面设备，成为访问互联网的最常见终端，而原本被设计的网页主要是为了呈现在PC端，因此为了兼容不同尺寸大小的屏幕，2010年，Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
2、自适应网页设计注意事项
- 在HTML头部增加viewport标签
详细内容请查看“viewport的理解”一文
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
- 媒体查询
link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="a.css"
@media screen and (max-width: 320px) {
body {
background-color: red;
}
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
body {
background-color: #0FF000;
}
}
3、自适应与响应式的区别
自适应是为了解决如何才能在不同大小的设备上呈现同样的网页，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小。但是无论怎样，他们主体的内容和布局是没有变的。
自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动
相比自适应网站，响应式网站省去了很多的控件，同时也省去了不少建立和维护的功夫。响应式布局就是一种流体，在按百分比缩放时也能相当的流畅。
使用响应式设计，你要记住所有的布局。这当然可能会使过程混乱，并且使设计更加复杂。这就意味着你应该专注于中等分辨率的视图，然后再用media querie调整为更低或更高的分辨率。 所以通常的做法是，在一个新的项目中使用响应式设计，在后期的改造中使用自适应设计。
网友评论