移动端页面（响应式）

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

• 第三种
  http://js.jirengu.com/xejeq/2/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">