LITREILY

移动端页面的做法-响应式

2018-05-27CSS

手机端页面的做法

1 学会 media query(媒体查询)

1.CSS meida选择器控制

@media媒体查询 max-width,0-max,min-width:min-无穷;
当条件都满足时,优先级谁先后写谁优先

@media (max-width:600){
    body {
        background: blue;
    }
}

@media (min-width:600 and max-width:800) { 
    body{
        background: red;
    }
}

@media (min-width:800) {
    body{
        background: green;
    }
}

2.引入CSS文件控制:

当设备窗口宽度0-500px时候mobile.css文件生效.

<link rel="stylesheet" href="mobile.css" media="(max-width:500px)">

2 学会要设计图（没图不做）

1 实在要做也行，丑可别怪我

3 学会隐藏元素

Mobile-first

Desktop-first

做一下响应式导航

预览:
https://roxas332519096.github.io/notes-demo/0527-%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B5%E9%9D%A2%E7%9A%84%E5%81%9A%E6%B3%95-%E5%93%8D%E5%BA%94%E5%BC%8F.html

代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式导航</title>
    <style>
        *{margin: 0; padding: 0;}
        ul,li{list-style: none;}
        a{color: inherit;text-decoration: none;}

        .logo {
            width: 60px;
            height: 60px;
            background: grey;
            border-radius: 30px;
        }

        .Clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

        header{
            padding: 10px;
            position: relative;
        }

        .nav{
            display: none;
            background: grey;
            margin-top: 10px;
        }

        .nav.active{
            display: flex;
            justify-content: space-between;
        }

        .nav2{display: none;}

        header > button {
            position: absolute;
            right: 20px;
            top: 26px;
        }

        @media (min-width:451px) {
          header > button {
            display: none;
          }
          .nav, .nav.nav.active{display: none;}
          .nav2{display: block;}
          header {
              display: flex;
              align-items: center;
          }
          header .nav2 {
              display: flex;
              margin-left: 20px;
          }
          header .nav2>li {
              margin: 0 10px;
          }
        }
    </style>
</head>
<body>
    <header>
        <div class="logo"></div>
        <button id="xx">菜单</button>
        <ul id="yy" class="nav">
            <li><a href="">导航1</a></li>
            <li><a href="">导航2</a></li>
            <li><a href="">导航3</a></li>
            <li><a href="">导航4</a></li>
            <li><a href="">导航5</a></li>
        </ul>
        <ul class="nav2">
                <li><a href="">导航1</a></li>
                <li><a href="">导航2</a></li>
                <li><a href="">导航3</a></li>
                <li><a href="">导航4</a></li>
                <li><a href="">导航5</a></li>
            </ul>
    </header>
    <script>
        xx.onclick = function(){
            yy.classList.toggle('active');
        }
    </script>
</body>
</html>

4 手机端要加一个 meta

不允许用户缩放,宽度设备宽度,默认大小,最大比例1,最小比例1
快捷键meta:vp;

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  1. width 设备宽度
  2. initial-scale 默认大小;
  3. user-scalable 允许用户是否能缩放,no表示不允许也可以是”0”,yes表示可以;
  4. minimum-scale 允许用户的最小缩放值;
  5. maximum-scale 允许用户的最大缩放值;

5 手机端的交互方式不一样

1 没有 hover

2 有 touch 事件

记录用户开始触摸位置和结束触摸的位置,两者之差模拟滑动事件
jQuery vue都有

3 没有 resize(窗口大小)

4 没有滚动条

本文作者：Roxas Deng
本文链接：http://yoursite.com/2018/05/27/移动端页面的做法-响应式/
版权声明：本博客所有文章除特殊声明外，均采用 CC BY-NC 4.0 许可协议。转载请注明出处 Roxas Deng的博客！
CSS