CSS-005-移动端响应式

媒体查询

Demo01:宽度800px以内 都为红色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
  <style>
    @media (max-width:800px){
      body{
        background:red;
      }
    }
  </style>
</head>
<body>
</body>
</html>

适配不同屏幕手机

  • min-width:xxx 大于等于 xxx 的时候生效
  • max-width:xxx 小于等于 xxx 的时候生效
  • 注意顺序 从大往下写，不然会被覆盖
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 769 ～ 正无穷*/
    @media (min-width:769px){
      body{
        background:black;
      }
    }
    /* 0 ～ 768 */
    @media (max-width:768px){
      body{
        background:green;
      }
    }
    /* 0 ～ 425 */
    @media (max-width:425px){
      body{
        background:yellow;
      }
    }

    /* 0 ～ 375 */
    @media (max-width:375px){
      body{
        background:orange;
      }
    }

    /* 0 ～ 320 */
    @media (max-width:320px){
      body{
        background:red;
      }
    }
  </style>
</head>
<body>
</body>
</html>

媒体查询的另一种写法 “and”

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 0 ～ 320 */
@media (max-width:320px){
    body{
    background:red;
    }
}

/* 321 ~ 375 */
@media (min-width:321px) and (max-width:375px) {
    body{
    background:red;
    }
}
1
2
3
<link rel="stylesheet" href="style.css" media="only screen and (max-width):320px">

无论如何 都会下载这个css，只不过他会在屏幕小于等于320的时候生效

meta viewport

为什么页面要缩放，因为一开始都是 900多像素宽，手机只有300像素宽，不缩放怎么看呢？

于是我不想缩放咋办呢？

  • 告诉浏览器别给我缩放
1
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

手机端的交互

  • 没有 hover
  • 有 touch 事件，别去监听 click
  • 没有 resize 事件
  • 没有滚动条