CSS- movement end page (responsive)

1. Society media query
2. To learn design
3. Learn to hide elements
4. Mobile terminal to add a meta
5. End of the phone interact in a different way
   • No hover
   • No touch event
   • No resize
   • No scrollbars

A media inquiry

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

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

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

Third, the dynamic REM, adaptive solutions for mobile phones.

    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
复制代码

End mobile pages with hardly.

A better solution:

1. Write two pages, PC set, a mobile terminal, which then displays a set of access device selection.
2. Two domain names written on the inside, such as Taobao PC side: www.taobao.com, mobile end: m.taobao.com

Reproduced in: https: //juejin.im/post/5d0a54bb6fb9a07ec63b1918