Css响应式设计

什么是响应式 Web 设计?

响应式 Web 设计网页应该根据设备的大小自动调整内容。
响应式 Web 设计只使用 HTML 和 CSS。
响应式 Web 设计不是一个程序或Javascript脚本。

Viewport

是用户网页的可视区域。

网格视图

响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。

1. 创建响应式网格视图
   首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。
   确保边距和边框包含在元素的宽度和高度间。
   添加代码： * { box-sizing: border-box;}

图片

1. 使用 width 属性
   如果 width /max-width属性设置为 100%，图片会根据上下范围实现响应式功能

2. 背景图片
   如果 background-size 属性设置为 “contain”, 背景图片将按比例自适应内容区域。图片保持其比例不变：
   如果 background-size 属性设置为 “100% 100%” ，背景图片将延展覆盖整个区域：
   如果 background-size 属性设置为 “cover”，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。

3. 不同设备显示不同图片
   大尺寸图片可以显示在大屏幕上，但在小屏幕上确不能很好显示。我们没有必要在小屏幕上去加载大图片，这样很影响加载速度。所以我们可以使用媒体查询，根据不同的设备显示不同的图片。