天一阁
0%

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

Posted on In Views: Valine:

最近在开发一个网站时，发现别人的网站在桌面访问和手机访问时，都能有很好的布局。而我的这个网站只能在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