随着互联网的飞速发展，使用手机上网的人越来越多。在网站设计过程中常常需要解决网页在不同像素网页在不同设备的显示问题。但是分开做几个版本在设计和维护上又显得比较麻烦。所以就有人提出了“自适应网页设计”的概念。

自适应网页设计工作原理:

为了自适应网页设计，您需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载，该页面上使用了各种字体和 Web 开发技术，比如媒体查询（Media Queries），此时，会先检测设备的视口大小，然后加载特定于设备的样式。

自适应网页设计的CSS3代码原理:

现在在自适应 CSS 文件中必须有 '@media' 开始的样式。

'@media (max-width: 480px)' 开始，为最大宽度为 480 像素的设备设置样式

'@media (max-width: 767px)' 开始，为最大宽度为 767像素的设备设置样式。

'@media (min-width: 768px) 和 (max-width: 979px)' 开始，为最大宽度为 768 像素和最大宽度为 979 像素的设备设置样式。

'@media (max-width: 979px)'

最后两个区域分别以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 开始，前一个是为最小宽度为 980 像素的设备设置样式，后一个是为最小宽度为 1200 像素的设备设置样式。