媒体查询响应式布局

一、什么是响应式布局

响应式布局：指在同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，移动端再开发一套，pad端再开发一套，而使用响应式布局只要开发一套就够了。

响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是移动端、PC端、pad端，从而请求服务层，返回不同的页面。

CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

使用了响应式布局的网站有：Bootstrap中文网         Element Plus         稀土掘金  

二、响应式实现方式

3）使用 link 链接，media 作为属性用于设置查询方式

<!-- 当所有设备的宽度小于 980px 时，才会使用 link 链接 CSS 文件 -->
<link rel="stylesheet" href="css/media.css" media="all and (max-width:980px)" />

注：媒体查询的优先级与普通 CSS 完全相同，因此当使用媒体查询时，一定要将媒体查询的样式放在默认样式之后，否则媒体查询会被默认样式覆盖，也就无法针对不同设备进行变化。

2. 语法：

@media[not|only] type [and][expr] (media feature){
rules
}

/* 屏幕尺寸小于等于320px */
@media only screen and (max-width: 320px){
/* css样式 */
   body{
       background-color: pink;
  }
}

3. 参数说明：

① type 媒体类型：

将不同的终端设备划分为不同的类型，称为媒体类型

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕、平板电脑、智能手机等

② media feature 媒体特性

每个媒体类型都具有各自的媒体特性，根据不用的媒体类型的媒体特性设置把不同的展示风格

值	描述
width	定义输出设备中的页面可见区域宽度
height	定义输出设备中的页面可见区域高度
min-width	定义输出设备中的页面最小可见区域宽度
min-height	定义输出设备中的页面最小可见区域高度
max-width	定义输出设备中的页面最大可见区域宽度
max-height	定义输出设备中的页面最大可见区域高度
device-width	定义输出设备的屏幕可见宽度
device-height	定义输出设备的屏幕可见的高度
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率

③ [not|only] 关键字

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

值	描述
and	可以将多个媒体特性连接到一起, 相当于"且"的意思
not	排除某个媒体特性, 相对于"非"的意思, 可以省略

注：

1）一般都是先实现PC端页面，然后再去做其他设备的兼容（把媒体查询写在默认样式之后）

2）设置宽度时，最好不要写死（px），而是用%单位参照父元素的大小

4. 使用媒体查询的方式

1）直接在 CSS 文件中使用

2）使用import导入

/* 当所有设备的宽度小于 980px 时，才会使用 import 导入 CSS 文件 */
@import url("css/media.css") all and (max-width:980px);

• 媒体查询（下面具体讲解）

• 流体布局（float）

• 弹性布局（flex）

• 通过 JavaScript、JQuery 进行判断来显示不同的布局页面

• Bootstrap 等第三方

  三、媒体查询

  1. 简介：

• 媒体查询（Media Query）是CSS3新语法；

• 使用 @media 查询，可以针对不同的媒体类型定义不同的样式；

• @media 可以针对不同的屏幕尺寸设置不同的样式；

• 使用@media才能够实现页面响应式布局。

• 框架