实现网页响应式设计的技巧详解，响应式网页设计的概念解析

何谓适应性网页设计

适应性设计指的是在各式设备，例如手机与电脑等，所呈现的网站页面能够按比例整体缩放，以适应当前设备的屏幕尺寸。因此，适应性网站在手机与电脑上所呈现的样式保持一致，差异仅在于整体尺寸。

响应式设计同样能在不同设备上顺畅访问网页，但其适应方式是通过调整样式而非整体缩放，故响应式网站在手机与电脑上所呈现的页面样式会有所差异。

网站构建如何实施适应性网页设计

虽然手机上网十分便捷，但网站设计师却要面对新的挑战：如何在各种尺寸的设备上展示相同的网页？手机与电脑的显示差异显著，以往电脑浏览网站是常态，但在手机上却可能难以阅读。众多网站采取的策略是为不同设备提供不同的网页，例如特别提供mobile版本，虽然这确保了效果，但操作繁琐，同时需要维护多个版本，大幅提升了架构设计的复杂性。“适应性网页设计”指的是能够自动识别屏幕宽度并作出相应调整的网页设计。“适应性网页设计”究竟是如何实现的呢？首先，在网页代码的头部加入一行viewport元标签。viewport是网页默认的宽度和高度，上述代码的含义是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。由于网页会根据屏幕宽度调整布局，因此不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一点非常重要。“流动布局”的含义是，各个区块的位置都是浮动的，而非固定不变。float的优势在于，若宽度不足，后面的元素会自动滚动到前面元素的下方，避免水平方向overflow（溢出），从而避免了水平滚动条的出现。“适应性网页设计”的核心在于CSS3引入的Media Query模块。其意义在于自动探测屏幕宽度，并加载相应的CSS文件。同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。除了布局和文本，适应性网页设计还必须实现图片的自动缩放。如有条件，最好根据不同尺寸的屏幕，加载不同分辨率的图片。