什么是响应式 Web 设计?
响应式 Web 设计网页应该根据设备的大小自动调整内容。
响应式 Web 设计只使用 HTML 和 CSS。
响应式 Web 设计不是一个程序或Javascript脚本。
Viewport
是用户网页的可视区域。
网格视图
响应式网格视图通常是 12 列,宽度为100%,在浏览器窗口大小调整时会自动伸缩。
- 创建响应式网格视图
首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。
确保边距和边框包含在元素的宽度和高度间。
添加代码: * { box-sizing: border-box;}
图片
- 使用 width 属性
如果 width /max-width属性设置为 100%,图片会根据上下范围实现响应式功能 背景图片
如果 background-size 属性设置为 “contain”, 背景图片将按比例自适应内容区域。图片保持其比例不变:
如果 background-size 属性设置为 “100% 100%” ,背景图片将延展覆盖整个区域:
如果 background-size 属性设置为 “cover”,则会把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。不同设备显示不同图片
大尺寸图片可以显示在大屏幕上,但在小屏幕上确不能很好显示。我们没有必要在小屏幕上去加载大图片,这样很影响加载速度。所以我们可以使用媒体查询,根据不同的设备显示不同的图片。