用户登录

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

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

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

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

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

CSS 响应式页面设计《 Web 基础:样式规则 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点