移动页面开发

移动页面

1.移动页面的区别

  1. 没有 hover

  2. 没有 touch

  3. 没有 resize

  4. 没有 滚动条

  5. 要加一个

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  6. 会用 media query

2.媒体查询

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
/* wdith>=320px */
@media (min-width : 320px){
    body{
        background: red
    }
}
/* wdith>=375px */
@media (min-width : 375px){
    body{
        background: orange
    }
}
/* wdith>=425px */
@media (min-width : 425px){
    body{
        background: yellow
    }
}
/* wdith>=768px */
@media (min-width : 768px){
    body{
        background: green
    }
}
/* wdith>=769px */
@media (min-width : 769px){
    body{
        background: blue
    }
}

语法 @media(条件)

注意：

  1. 上面的条件使用min-width，假如使用max-width，在width=768之内的时候都是绿色，因为他们都符合条件，根据CSS的语法，谁在后面谁起作用。
  2. 假如非要用max-wdith可以反过来写。大的在前面。
  3. 或者条件复杂一些@media(min-width:375px) and (max-width:424px)

你也可以写多个CSS文件，在 link 标签中限定条件

<link rel="stylesheet" href="./mobile-style.css" media="(max-width:452px)">