CSS-移动端页面（响应式）

1. 学会 media query
2. 学会要设计图
3. 学会隐藏元素
4. 手机端要加一个meta
5. 手机端的交互方式不一样
   • 没有hover
   • 没有touch事件
   • 没有resize
   • 没有滚动条

一、媒体查询

1. @media(条件){样式}
2. <limk rel="stylesheet" href="style.css" media="(max-width: 320px)">
   例子：

```
<style>
    @media(max-width: 320px){
        body{
            background: red;
        }
    }
</style>
```
复制代码

二、 <meta name="viewport" content="width=device-width, user-csalable=no, initial-scale=1.0,maxmum-scale=1.0, minimum-scale=1.0">

三、动态 REM，手机专用的自适应方案。

    px 像素
    em  一个汉字宽度，（一个m宽度）
    rem  root em    根元素(html)的font-size
    vh  viewport height  100vh ==视口高度
    vw viewport width  100vw  ==视口宽度
    
    rem和em的区别：rem是根元素的font-size，em是自己的font-size。
    
    网页的默认font-size为16px
    12px法则：chrome默认的最小字体为12px
复制代码

移动端页面几乎不会用。

更好的方案：

1. 写两套页面，PC一套，移动端一套，然后根据访问设备选择显示哪一套。
2. 写在两个域名里面，比如淘宝的PC端：www.taobao.com ，移动端：m.taobao.com

转载于:https://juejin.im/post/5d0a54bb6fb9a07ec63b1918