移动端页面(响应式)

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 手机端的交互方式不一样

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">

推荐阅读更多精彩内容