移动端-响应式布局初涉

响应式布局五个基本点

媒体查询
移动端对应的设计图
隐藏某些在PC端需要的元素
添加meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

交互方式与PC端不同，没有hover、滑动效果、滚动条、resize。替代的是touch和使用两点坐标来模拟滑动效果。

媒体查询

通常响应式布局有几个尺寸，320px（small）、375px（medium）、425px(large)、768px、1024px、1440px、2560px

使用style标签进行查询

@media (max-width: 320px) {
        body {
          background: red;
        }
      }

      @media (min-width: 321px) and (max-width: 375px) {
        body {
          background: green;
        }
      }
      @media (min-width: 376px) and (max-width: 425px) {
        body {
          background: blue;
        }
      }
      @media (min-width: 426px) and (max-width: 768px) {
        body {
          background: purple;
        }
      }
      @media (min-width: 769px) {
        body {
          background: orange;
        }
      }

使用`link`标签加载所需的尺寸的`css`

<link rel="stylesheet" href="./medium.css" media="(min-width: 321px) and (max-width: 375px)">

上述标签的意思就是：只有在屏幕尺寸在321px-375px之间的时候medium.css才会生效

移动端单独的设计图

要想做移动端的适配，设计图必须单独给一份。

隐藏某些元素

手机的屏幕较PC端小，所以容纳的可视区域必然小，例如导航栏在PC端时可以完全显示，但是移动端只能显示一个按钮，不能完整的显示。

手机端不同于PC端的操作

手机端明显没有hover效果，采用click来模拟

// html部分
<button id="menu">菜单</button>
  <ul id="nav" 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>
// css部分
.nav {display: none}
.nav.active {display: block}
//js部分
menu.onclick = function() {
    nav.classList.toggle('active')
}

上述代码中classList具有toggle方法，如果有某个类名就去掉，没有这个类名就加上。

js代码不应该去控制样式，应该只改变状态而已，样式改变交给css去控制。

`viewport`的作用

传统的移动端开发时会进行缩放，以国内主流的尺寸980px来进行缩放，如果不加viewport标签，可以通过以下方式来查看屏幕的宽度。

document.documentElement.clientWidth() // 980px

一些经常忘的小知识

清除浮动

.clearfix::after {
    content: "";
    clear: both;
    display: block;
}

绝对定位

position: absolute;
top: 10px;
left: 20px;
// 某个元素绝对定位了，位置是相对于它的某个position: relative的父元素