移动端页面

媒体查询

第一种方式： 直接在head里写style

比如：

 <style>
    @media(max-width: 320px){
          body{
              background: red;
          }
      }
 @media(min-width:320px)and(max-width: 375px){
          body{
              background: orange;
          }
      }
  @media(min-width:375px)and (max-width: 425px){
          body{
              background: green;
          }
      }
     @media(min-width: 425px) and (max-width: 768px){
          body{
              background: blue;
          }
      }
    
@media(min-width: 769px){
          body{
              background: purple;
          }
      }
 
 </style>

第二种方式：引入CSS文件

 <link rel="stylesheet" href="index.css" media = "(max-width:425px)"> 

上面这行代码表示 ： 表示这个index.css 只有在宽度小于425px的时候才会生效(始终会下载，但是只有在满足条件时才会生效)。
media 不影响性能。

移动端页面大小自适应

手机端加meta

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

快速输入： meta:vp →Tab

手机端的交互方式不一样

• 没有 hover
• 有 touch 事件
• 没有 resize
• 没有滚动条