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

一、媒体查询

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

``````复制代码

二、 <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