Responsive web design ，响应式页面设计，核心其实就是利用 CSS 的媒体查询功能，为不同宽度范围的设备添加特定的一组样式。

浏览器的开发者工具可以调试响应式的页面，这里我用的是 Firefox 浏览器的开发者工具，在开发者工具这里，点击这个设备小图标可以打开调试响应式设计的功能。 在这里你可以选择预设的设备尺寸，也可以自由调整可视区的尺寸。这里需要选择 iPhone 这种设备。

现在有个问题，就是页面内容被缩放了。我们可以在手机上的浏览器再测试一下，这里我用的是 ios 设备的模拟器，用 safari 浏览器，打开我们的网页项目。页面同样会被缩放。

解决这个问题可以在网页文档里添加一个 meta 标签，打开网页文件，添加一个 meta 标签，把 name 设置成 viewport，然后添加一个 content 属性，在里面让 width 等于 device-width，就是让可视口的宽度变成设备的宽度，逗号分隔一下，再把 initial-scale 设置成 1.0，也就是把初始缩放级别设置成 1.0。

观察一下模拟器显示的页面，现在页面就可以正常显示了。再观察一下浏览器的响应式调试，这里也显示正常了，然后调整一下可视区的尺寸，观察一下页面的变化。