页面缩小没有左右滚动条_移动端页面（响应式）

手机端要加一个 meta 标签

<meta name="viewport（电脑屏幕的视口）" content（内容）="width=device-width（宽度等于终端的宽度）, user-scalable=no（禁止用户缩放）, initial-scale=1.0（初始比例1倍）, maximum-scale=1.0（最大缩放1倍）, minimum-scale=1.0"（最小缩放1倍）>

媒体查询（最大宽度=800）的时候就执行括号内代码

可以看到下面写了N重样式来匹配不同宽度手机加载时出现的东西，在里面放入css文件，当宽度不同时加载不同的css文件来适应手机屏幕宽度

引入文件时加入媒体查询参数，当最大宽度为320px时。引入的css样式生效

Smashing Magazine — For Web Designers And Developers — Smashing Magazine​www.smashingmagazine.com

可以查看上面的链接，把窗口缩小，每一个宽度阶段页面样式都会更改，所谓的响应式

pc端做一套页面，移动端做一套页

手机端的交互方式不一样

1. 没有 hover
2. 有 touch 事件
3. 没有 resize
4. 没有滚动条
5. 学会隐藏元素，当宽度小于多少，隐藏掉一些内容，展示重要的内容
6. 学会 media query 封装的库，抄过来改