响应式布局的那些事

响应式设计在如今的web开发过程中已经是必不可少,它可以针对不同的设备环境对页面进行调整,并且可以在PC端和移动端达到很好效果的情况下,不用开发多套页面,可以提升开发速度,可维护性打打增强。

响应式布局

响应式布局的一种实现方式的原理是使用CSS3新引入的Media Query来调整元素在不同分辨率下的显示效果,并且通过JavaScript进行交互。总结起来,响应式布局有以下几个需要注意的点:

  1. 设置Viewport

我们知道,在移动设备中,页面被放置在虚拟的窗口中,这个窗口也称作视口(Viewport),对于未进行移动端适配或者是未进行响应式设计的页面,往往页面的宽高都会大于移动设备的宽高,所以为了能够在移动设备上进行页面交互,缩放是不可避免的,但是频繁的放大缩小带来的浏览体验肯定不会好。所以,在响应式设计的第一步,就是要禁止移动设备的缩放,这很容易实现,我们只需要在html页面中的head元素下添加一个meta标签用于规定禁止缩放就可以了:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maxinum-scale=1.0" />
  1. 使用Media Query

媒介查询才是响应式布局的关键所在,我们使用Media Query 来实现在不同尺寸下使用不同的样式。Media Query的规则有很多,例如@media screen and (max-width: 980px){...}就表示了在980px下的屏幕下使用在此定义的各种样式,同样还有min-widthorientation(设备方向)等属性,我们需要按需进行设置。

  1. 使用JavaScript

如果能做到上面的两点,在一般情况下,响应式布局是可以实现的。但是如果在布局的过程中需要改变交互,那么JavaScript久必须派上用场了。例如一个菜单栏,在十分小的屏幕下需要折叠,那么就需要用到JavaScript。

Code

上面是我能够想到的响应式布局的一些要点,在实际学习过程中,我并没有在一些项目中使用相应式设计的方式(貌似很悲哀…)。在目前移动为先的时代,为移动端做更好的优化是不可避免的,无论是使用重新写一套移动端页面,还是使用响应式布局,或者使用其他的例如Flex Box来进行布局。作为一个工作在浏览器端的🐒,这都是我们必须具备的素质。

好了,写一个简单的小例子吧。如果你从未接触过响应式布局,那么希望接下来的code会帮助你更快地了解并应用它。

我们来写一个菜单栏,其HTML结构‍如下:

1
2
3
4
5
6
7
8
9
<div id="nav">
<ul id="nav-list">
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="topic">Topic</a></li>
<li><a href="#" id="today">Today</a></li>
<li><a href="#" id="about">About</a></li>
<li><a href="#" id="concat">Concat</a></li>
</ul>
</div>

CSS如下:

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
27
28
29
30
31
32
33
34
35
36
37
* {
margin: 0;
padding: 0;
}
#nav {
position: relative;
}
#nav-list ul li {
list-style: none;
box-sizing: border-box;
width: 20%;
}

#nav-list ul li a {
display: block;
text-align: center;
text-decoration: none;
color: #FFF;
line-height: 4em;
font-size: 1.4em;
}

#nav-list ul li:nth-child(1) a {
background-color: #bcbcbc;
}
#nav-list ul li:nth-child(2) a {
...
/*添加背景色*/
}
#nav-list ul li:nth-child(1) a:hover {
background-color: rgba(188, 188, 188, .8);
/*添加鼠标移上去的样式*/
}
#nav-list ul li:nth-child(1) a::before {
content: ''
/*使用伪类来添加图标字体等*/
}

现在,我们来为屏幕宽度小于768px写一个样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@media screen and (max-width: 768px) {
ul li a::before {
font-size: 20px;
line-height: 60px;
}

ul li a {
font-size: 0;
height: 60px;
}
/*
上面的的样式指明了再768px宽度及以下,我们设置a标签的font-size为0,不显示字体。
设置伪元素所在的图标字体的行高等于a标签的宽度,使其垂直居中。
通过上面的简单设置,我们在小于768px跨度的屏幕下,对于该菜单就只能看到图标了。
*/
}

接着,我们可以为更窄的屏幕设置折叠菜单,我们通过css来绘制折菜单,使用JS来显示和隐藏。具体的实现这里就不贴出来了。

ok,到此为止,我们已经写好了一个响应式菜单栏了(虽然…)。

分享到 评论