1 手机端页面的做法
学会 media query
学会要设计图（没图不做）
实在要做也行，丑可别怪我
学会隐藏元素
手机端要加一个 meta
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2 手机端的交互方式不一样
- 没有 hover
- 有 touch 事件 (jquery .swipe 插件)
- 没有 resize
- 没有滚动条
3 媒体查询
- 第一种
<link rel="stylesheet" href="mobile.css" media="(max-width:320px)">
- 第二种
@media (min-width: 769px) {
body{
background-color: red;
}
}
@media (max-width:768px ) {
body{
background-color: orange;
}
}
@media (max-width:425px ) {
body{
background-color: yellow;
}
}
@media (max-width:375px ) {
body{
9 background-color: green;
}
}
@media (max-width:320px ) {
body{
background-color: #fff;
}
}
http://js.jirengu.com/vodaf/1/edit
4 菜单隐藏元素
http://js.jirengu.com/xagaw/1/edit
5 一般我们都是做两套页面 （PC和手机）
image.png
6 手机端加一个meta
最开始页面都只是给PC用的，没有智能手机，过一段时间出现诺基亚，诺基亚的手机页面是用wap开发的，类似于html, 所以当时想让诺基亚用户访问你的网站，你得做两套，一套是html做的，一套用wap做的。
后来出现iphone3GS，但是苹果的页面是320px，而市面上PC的网站大多是980px，所以苹果想到的办法是用320px模拟980px, 把PC端页面缩放，当用户拿手机浏览时，只需要双击就可以放大来看。缩放比例是模拟980px来缩放的
image.png
我们已经给手机做了一套移动端代码，但是由于上面的原因页面会缩放，所以我们有了下面这个meta标签，防止页面缩放
image.png
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
