响应式设计 ​

什么是响应式设计 ​

使用 CSS 和 HTML 调整大小、隐藏、缩小、放大或移动内容，以使其在任何屏幕上看起来都不错。

桌面 平板 手机

viewport ​

viewport，视口，是用户在网页上的可见区域。

设置视口 ​

HTML5提供<meta>标签设置视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width设置页面面宽度=设备的屏幕宽度
initial-scale=1.0设置页面初始缩放比例

网格视图 ​

响应式网格视图通常有 12 列，总宽度为 100% 页面宽度。

媒体查询 ​

HTML语法

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">

CSS语法

@media not|only 媒体类型 and (媒体特性) {
   CSS代码;
}

媒体类型选填，默认值all，可选值screen、print
媒体特性：width、min-width、max-width、height、orientation等
逻辑操作符：only、and、not、,或or

图片的响应式设计 ​

1. 图片缩放object-fit、background-size
2. CSS媒体查询设置背景图
3. HTML <picture>标签

参考资料 ​

• w3school
• @media -MDN