互联网的景观几年前大变了。之前，网页设计师只需要担心几个不同的观看平台，主要是桌面视图。随着移动设备日益普及，以及各种尺寸的屏幕，随着网络设计师和开发人员的挑战，这一切也在不断变化。
响应网页设计背后的想法是，网站应适应任何用于显示的设备。不仅移动设备，而且在台式电脑和平板电脑上。
根据反应灵敏的Web设计背后的主角，Ethan Marcotte，这种方法有三个部分：灵活的网格，灵活的图像和媒体查询。
网格系统，如在杂志布局中使用的那样，对于响应网页设计至关重要。为了使布局灵活，测量值必须是百分比，而不是像素。这意味着，宽度为50％的网站将始终占据网站浏览的一半屏幕，无论其大小如何。这是灵活和响应性网页设计开始的地方。
当决定要响应的网站的背景时，最好的选择是使用简单的背景或简单的纹理，可以无缝地平铺，是垂直渐变，或者只是纯粹的纯色。静态图像，无缝拼接的背景和水平渐变不会优于比您设计的屏幕更小或更大的屏幕尺寸。
设计响应式站点时，需要缩小每个方面。固定宽度的方法，如960.gs或Blueprint CSS框架，不是设计网站的最佳方式。
您必须以这样的方式设计各种元素，即如果浏览器宽度更改，该网站仍将显示您网站上的所有重要信息。
这可以通过将元素大小设置为百分比而不是像素来实现。
以百分比表示的工作与像素相同，没有什么区别，您不需要学习其他属性或CSS选择器。以百分比表示的工作也比较简单，因为很清楚什么width: 100%意思。
不管屏幕的尺寸如何，所提到的div总是在最大宽度。如果要使用100像素而不是100％，那么无论观看屏幕多大，相应的div将始终为100像素宽。
在1600×900分辨率的桌面上，这不算太多，但是在空间上太多了。看到不同？以百分比而不是像素工作更合乎逻辑。