响应式 Web 设计 – 媒体查询

响应式 Web 设计 – 媒体查询 媒体(media)查询在 CSS3 上有介绍: 添加断点 在先前的教程中我们使用行和列来制作网页,它是响应式的,但在小屏幕上并不能友好的展示。 媒体查询可以帮我们解决这个问题。我们可以在设计稿的中间添加断点,不同的断点有不同的效果。 桌面设备 手机设备 使用媒体查询在 768px 添加断点: 实例 当屏幕 (浏览器窗口) 小于 768px, 每一列的宽度是 100%: /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col