媒体查询

[ 代码示例 ]  https://www.runoob.com/cssref/css3-pr-mediaquery.html

// 如果文档宽度小于 300 像素则修改背景颜色(background-color) @media screen and (max-width: 300px) { body { background-color:lightblue; } } // 了解：not（取反）- 代码示例 @media not screen and (min-width:768px) and (max-width:992px){ body{ background-color:blue; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 如果文档宽度小于 300 像素则修改背景颜色(background-color)

   @media screen and (max-width: 300px) {
       body {
           background-color:lightblue;
       }
   }

// 了解：not（取反）- 代码示例
   @media not screen and (min-width:768px) and (max-width:992px){
      body{
         background-color:blue;
      }
   }

CSS 语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
} 

也可以针对不同的媒体使用不同 stylesheets :
  <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
  // 代码示例：width在992至1200之间调用b.css文件
     <link rel="stylesheet" media="screen and (min-width:992px) and (max-width:1200px)" href="b.css">

@media mediatype and|not|only (media feature) {

CSS-Code;

}

也可以针对不同的媒体使用不同 stylesheets :

// 代码示例：width在992至1200之间调用b.css文件

[ 媒体类型 mediatype ]

  all 用于所有设备
  print 用于打印机和打印设备
  screen 用于电脑屏幕，平板电脑，智能手机等
  speech 应用于屏幕阅读器等发声设备

all 用于所有设备

print 用于打印机和打印设备

screen 用于电脑屏幕，平板电脑，智能手机等

speech 应用于屏幕阅读器等发声设备

当判断最小的值，并且从小到大进行判断（当满足条件的时候）：

向上兼容：如果设置了宽度最小时的样式，默认这些样式也会传递给宽度更大的添加范围内

向下覆盖：宽度更大的样式会将前面宽度更小的样式覆盖

// 书写建议：

如果是判断最小值（min-width）, 那么应该从小到大写 — Bootstrap的写法（推荐）；

如果是判断最大值（max-width）, 那么应该从大到小写。

body{ background-color: red; } /*屏幕宽度大于等于768px时*/ @media screen and (min-width: 768px) { body{ background-color: green; } } /*屏幕宽度大于等于992px时*/ @media screen and (min-width: 992px) { body{ background-color: blue } } /*屏幕宽度大于等于1200px时*/ @media screen and (min-width: 1200px) { body{ background-color: pink; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

body{
background-color: red;
}

/*屏幕宽度大于等于768px时*/
@media screen and (min-width: 768px) {
body{
background-color: green;
}
}
/*屏幕宽度大于等于992px时*/
@media screen and (min-width: 992px) {
body{
background-color: blue
}
}
/*屏幕宽度大于等于1200px时*/
@media screen and (min-width: 1200px) {
body{
background-color: pink;
}
}

[ 媒体功能 media feature ]

  device-width 定义输出设备的屏幕可见宽度
      max-device-width 定义输出设备的屏幕最大可见宽度
      min-device-width 定义输出设备的屏幕最小可见宽度
  max-width 定义输出设备中的页面最大可见区域宽度
  min-width 定义输出设备中的页面最小可见区域宽度
  ...

device-width 定义输出设备的屏幕可见宽度

max-device-width 定义输出设备的屏幕最大可见宽度

min-device-width 定义输出设备的屏幕最小可见宽度

max-width 定义输出设备中的页面最大可见区域宽度

min-width 定义输出设备中的页面最小可见区域宽度

...

min-width（推荐）：指的是当前可是区域的宽度，在 PC 端和移动端能正常的响应，效果一致。

min-device-width：在移动端和期望值一样。device，“设备”。指的是当前设备的宽度，当拖动来改变浏览器大小的时候，当前终端设备的宽度并不会变化，意味着媒体查询条件不会响应。

CSS 框架

随着Web应用变得越来越复杂，在大量的开发过程中我们发现有许多功能模块非常相似，如轮播图、选项卡、导航栏等，开发中往往会把这些具有通用性的功能模块进行一系列封装，使之成为一个个组件应用到项目中，可以极大的节约开发成本，将这些通用的组件整合到一起就形成了前端框架。

Bootstrap

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

来自 Twitter，粉丝众多，是目前最受欢迎的前端框架之一。

Amaze UI

Amaze ~妹子UI，国人开发，后期之秀！

Framework 7

一个开源免费的框架，可以用来开发混合移动应用（原生和HTML混合）或者开发 IOS & Android 风格的APP。