Responsive web design ,响应式页面设计,核心其实就是利用 CSS 的媒体查询功能,为不同宽度范围的设备添加特定的一组样式。
浏览器的开发者工具可以调试响应式的页面,这里我用的是 Firefox 浏览器的开发者工具,在开发者工具这里,点击这个设备小图标可以打开调试响应式设计的功能。 在这里你可以选择预设的设备尺寸,也可以自由调整可视区的尺寸。这里需要选择 iPhone 这种设备。
现在有个问题,就是页面内容被缩放了。我们可以在手机上的浏览器再测试一下,这里我用的是 ios 设备的模拟器,用 safari 浏览器,打开我们的网页项目。页面同样会被缩放。
解决这个问题可以在网页文档里添加一个 meta 标签,打开网页文件,添加一个 meta 标签,把 name 设置成 viewport,然后添加一个 content 属性,在里面让 width 等于 device-width,就是让可视口的宽度变成设备的宽度,逗号分隔一下,再把 initial-scale 设置成 1.0,也就是把初始缩放级别设置成 1.0。
观察一下模拟器显示的页面,现在页面就可以正常显示了。再观察一下浏览器的响应式调试,这里也显示正常了,然后调整一下可视区的尺寸,观察一下页面的变化。