移动端页面(响应式)

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

推荐阅读更多精彩内容

  • 响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改...
    Criya阅读 1,536评论 0 1
  • 1、媒体查询 还可以换一种方式 3、学会隐藏元素 logo不变,但是导航变成了一个按钮,需要点一下才显示 后端去实...
    tsl1127阅读 66评论 0 1
  • CSS-移动端页面(响应式) 媒体查询
    半斋阅读 205评论 0 1
  • 手机端页面(响应式)的做法 1. 学会 media query 例子: 媒体查询教程-—MDN 常见问题,当写多个...
    黄同学2019阅读 1,234评论 0 0
  • 根据现阶段的情况估计我即便是过了两个月,也要再继续坚持一段时间。那么今年还有几个计划,该如何平衡?每天写这些着实有...
    阳丽茗阅读 46评论 0 0