学习内容：

手机端页面的做法

学会 media query
学会要设计图（没图不做）
- 实在要做也行，丑可别怪我
学会隐藏元素
手机端要加一个 meta viewport <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
手机端的交互方式不一样
1. 没有 hover
2. 有 touch 事件
3. 没有 resize
4. 没有滚动条

一、media Query 媒体查询

1.关于媒体查询的使用

语法：

<style>
@media (min-width:700px){background:red}
</style>

如果媒体查询涉及多个条件，语法如下：

@media (min-width:700px) and (max=width:1000px) {background:red}

在使用媒体查询的时候和css样式一样，要注意样式覆盖的问题

<style>
@media(max-width:300px){
    background:red
}
@media(max-width:500px){
    background:blue
} 
/*该元素最后呈现蓝色*/
</style>

如果媒体查询多个条件都符合，那么后面出现的样式会覆盖前面的样式

2.关于媒体查询的作用

pc端到移动端，就是使用媒体查询完成，pc端和移动端就没有其他区别了。

只要你会媒体查询，你就可以做任何响应式页面，可以看下别的响应式网站，(Smashing Magazine — For Web Designers And Developers)

3. 手写媒体查询的一个例子

如果一个元素在不同屏幕有不同状态，就用媒体查询来做；如果一个元素在同一页面有不同状态，就用js来做。

`error：布局做的一塌糊涂`

4.响应式与两套html链接

如果写响应式这么麻烦，为什么不直接写两套html，一套给pc使用，一套给移动端使用。事实上，大部分都是这么做的。我要么给你跳转不同的网站，要么给你响应不同的文件内容。

二、手机端加一个mate viewport

1.为什么？

一开始所有的界面都是写给pc的；然后诺基亚是专门用自己的语言另外写；然后触屏手机出现，这个时候，移动端的界面就是pc端的界面按照比例进行缩放而展示的，你要看网页的内容，就用双指缩放；到后来，大家写页面内容都会写两套，一套给pc端，一套给移动端，那移动端用户使用时，我pc的为什么还要让你双指缩放去查看，你可以直接查看移动版本的啊。于是加上一个mata viewport限制使用。

2.怎么写？

面试的时候，把这句mata背下来就好了

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

平时的时候，写代码用meta:vp+tab就可以得到完整代码了，不行的话就去淘宝的手机端页面复制。

scale的内容写在content里面！！！！

三、移动端的特点

没有 hover
- 手机端覆盖上去不会触发hover。而是会在click时触发touch
有 touch 事件
- 模拟滑动，就是通过两次touch
没有 resize
- 浏览器的宽度永远是和手机设备的宽度是一样的，而pc上，设备宽度和页面宽度就可以不一样
没有滚动条
- 不需要你特意去写，它会自己消失

移动端页面(响应式)的做法