浅谈响应式布局

今天打算研究一下响应式布局。

k6dFJK.md.jpg


其实原因挺复杂,我打算把我的博客改成一种前景为半透明的形式,这样我在背景上就可以放一下画面比较复杂的图片,而不是像现在这样类似于小形状平铺,这样博客应该会更美观一些。

于是改了一发审查元素,发现效果意外的不错。不过这样会造成一个问题,当手机端进行访问的时候,由于没有设置图片的重复输出,会导致屏幕上出现大范围空白。这是一个令人难以接受的问题。

于是想到了采用响应式。响应式虽说当前使用的nexT主题已经自带,但源代码中似乎并没有改动到关于背景。兴趣使然,我开始去探寻一下它到底是基于什么样的原理来控制页面的。

首先说下,何为响应式布局:

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

简单来说,让页面能够适应多种分辨率不同的浏览器。其关键在css的一行代码:@media 设备名(可选) 条件 { ... }

比如说,@media only screen and (max-width: 480px),这里的only screen可以省略,意指电脑显示器,同时支持and,not等逻辑关键字来限定宽高范围,当然这都是可选的。

条件是最主要的,它被包含在一对小括号内。一般用来限定max-width与min-width。也就是去判断,当屏幕的宽度有多大或者有多小的时候去适用哪些样式表。

先给出原HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>响应式布局测试</title>
<link rel="stylesheet" href="css/emmm.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div id = "test">

</div>
</body>
</html>

这里面有一行代码比较特殊,也不是很好理解,它就是

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

这里的viewport,简单解释是叫做电脑屏幕是视口。也就是网页的可视化区域。如果要深入的去讨论这个东西,好像还挺麻烦。如果不加这个东西,在手机上浏览页面就会出现一种比较奇怪的布局。

在content里面还有一些参数。比如说width,它代表的是窗口的宽度,这里你完全可以将它设置成一个定死的值,但没必要。因为设备可能会有不同的宽度,这里最好是设置成自适应宽度——device-width代表设备宽度。inital-scale代表初始缩放比例,也就是页面初始加载时的页面缩放比例,一般不缩放,所以设成1。然后是maximum-scale和minimum-scale,它们代表允许用户缩放到的最大比例和最小比例,user-scalable用来允许用户或不允许用户手动缩放屏幕。

(吐槽:不允许用户缩放之后,缩放的最大最小值不就废了么,为什么要带着?)

(解吐槽:user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。)

然后就是在HTML代码中出现的CSS文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

@media (max-width: 980px) {
#test {
width: 100%;
height: 1200px;
background: url(https://i.loli.net/2019/02/12/5c62862e80ac7.png);
background-size: contain;
background-attachment: fixed;
background-repeat: no-repeat;
}
}


@media (min-width: 980px) {
#test {
width: 100%;
height: 1200px;
background: url(https://i.loli.net/2019/02/12/5c6276194090a.png);
background-size: contain;
background-attachment: fixed;
background-repeat: no-repeat;
}
}

有一行代码之前没见过,它就是响应式设计的核心。此操作全名叫Media Queries,它根据条件告诉浏览器如何为指定视图宽度渲染页面。有点类似于if语句那样,当满足何种条件时适用何种css。

如果要适用多种屏幕大小,比如同时适应电脑,ipad和手机,那么只需要使用and连接一个min-width和max-width就可以,然后多写几个,每一个代表一种设备。

需要注意的是,在响应式布局里面,宽度需要使用百分比。对于图片的话,简单的使用百分比并不太好,因为图片可能过大也可能过小,不妨设width为auto,让它自动调整大小,如果图片大了就让他变小,小了就让他变大,最大宽度为100%。像是这样:img { width:auto; max-width: 100%; }

效果预览:


-------------本文结束,感谢您的阅读转载请注明原作者及出处-------------


本文标题:浅谈响应式布局

文章作者:Shawn Zhou

发布时间:2019年02月12日 - 17:02

最后更新:2019年02月18日 - 13:02

原始链接:http://shawnzhou.xyz/2019/02/12/19-02-12-01/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

知识无价,码字不易。对您有用,敬请打赏。金额随意,感谢关心。
0%