盒子
盒子
文章目录
  1. 响应式布局五个基本点
  2. 媒体查询
    1. 使用style标签进行查询
    2. 使用link标签加载所需的尺寸的css
    3. 移动端单独的设计图
    4. 隐藏某些元素
    5. 手机端不同于PC端的操作
    6. viewport的作用
    7. 一些经常忘的小知识
      1. 清除浮动
      2. 绝对定位

移动端-响应式布局初涉

响应式布局五个基本点

  1. 媒体查询
  2. 移动端对应的设计图
  3. 隐藏某些在PC端需要的元素
  4. 添加meta标签
1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  1. 交互方式与PC端不同,没有hover、滑动效果、滚动条、resize。替代的是touch和使用两点坐标来模拟滑动效果。

媒体查询

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

使用style标签进行查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@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

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

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

移动端单独的设计图

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

隐藏某些元素

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

手机端不同于PC端的操作

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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标签,可以通过以下方式来查看屏幕的宽度。

1
document.documentElement.clientWidth() // 980px

一些经常忘的小知识

清除浮动

1
2
3
4
5
.clearfix::after {
content: "";
clear: both;
display: block;
}

绝对定位

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