初识媒体查询(@media)和响应式设计 | 天一阁

初识媒体查询(@media)和响应式设计

最近在开发一个网站时,发现别人的网站在桌面访问和手机访问时,都能有很好的布局。而我的这个网站只能在PC上访问,在手机上访问时,内容就变得很小。于是就想把@media仔细学习一下,看看究竟这是什么功能,顺便研究下很早之前就听说的"响应式设计"。

媒体查询(@media)

我对@media的理解,就是根据屏幕大小,来设置不同CSS样式。常见的应用场景是,同一行的div可以拆分成两行

或者侧边栏收起来,变成抽屉式的菜单。主要的命令和语法如下:

1
2
3
4
5
@media (media feature) logical operator (media feature) {
。。。
}

@media后面可以加上各种用户终端类别或特性,比如宽度、高度、等等。再加上min,或者max这样可以圈定一个范围

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media only screen and (max-width: 768px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}

比如上面那样就是针对手机屏幕的列宽设置。

同时@media还可以支持逻辑操作,比如not , or , and。实际使用时,自己写@media是很麻烦。一般也是使用类库会方便很多,比如用bootstrap,他可以很便捷的支持各种屏幕下的列宽。

响应式设计

响应式设计,就是将屏幕的整体宽度分为12列,根据不同屏幕,让内容占用不同的列宽。比如在PC访问网站时,可以分三列,左侧是导航占2列,中间是内容占6列,右侧是广告或其他内容占4列,这样整体刚好是12列。同样的网站在手机访问时,因为屏幕没有这么宽,就要把导航收起来,右侧的广告要放到主要内容的下面,那就是等于中间占12列,右侧占12列。这样相当于主要内容和广告都占用的屏幕宽度的100%。而判断当前屏幕的大小都是通过@media这个指令来实现的。设计网站布局时,需要移动优先(mobile first)。

​ 桌面

Desktop

​ 手机

Phone

关于CSS的新认识

CSS是样式描述语言,给HTML文档添加样式(如:字体,间距)。早在2011年,就发布了CSS2.1。而CSS3的发布方式和之前不同,把CSS切分成了不同的模块,逐个模块的发布,在2011年之后就有很多模块已经达到了Recommendation的级别了,而CCS3的draft可以追溯到1999年。今天学会的这个Media Queries模块实际上是在2012年就发布了。截止目前(2017.9.5)还有很多CSS3的模块处于Working Draft的级别,而同时有部分模块已经开始了CSS4的标准发布。

非常令我遗憾的是从2012年至2017年,我好想没干啥正事,可能这段时间再研究如何挣钱了,然而这段时间我其实真的没挣到啥钱,哈哈。

例子

参考文档:

1,https://en.wikipedia.org/wiki/Cascading_Style_Sheets

2,https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries