稻米鼠 · 更新于 2018-08-19 07:00:33

第四十六章 响应式

要是前边的 CSS 部分你学得扎实,这部分基本就是看一眼就懂了,很简单的一个事。就是比今天中午吃啥这个问题还简单。额……我比喻的不恰当哈,那样就成了最难的问题了,算了,不比喻了,你们就领会精神就好了。

先解释一下原理,就是你为一个元素设置多重的 CSS ,他们根据一定的规则,在不同的情况下分别起作用。这一定的条件一般都是指浏览器窗口的宽高范围。

那么我们来做一个小的案例说明一下:

一个 Html 文件,里面一个方块,就是这么简单的内容,这代码大家都能轻松写出来了吧?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式的小 Box</title>
    <style>
        #box {
            width: 600px;
            height: 300px;
            margin: 50px auto;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

这个案例简单吧,而且呢,这个 #box 在各种情况下显示的都一样,很好,很老实,但是只是个不聪明的乖宝宝而已。怎么让它变得聪明起来,可以根据外界的变化随机应变呢?当然不是喂他喝脑白金了。

我们改写一下 CSS 部分哦~

    <style>
        @media (min-width: 768px){
            #box {
                width: 600px;
                height: 300px;
                margin: 50px auto;
                background: blue;
            }
        }
        @media (max-width: 768px){
            #box {
                width: 90%;
                height: 300px;
                margin: 50px auto;
                background: red;
            }
        }
    </style>

看看什么变化?我们来仔细的讲解一下这个代码,其实很好理解的

`@media(条件){当满足条件时,要使用的 CSS }`

这叫做媒体查询,就是查询一下浏览器窗口的宽度,当然你换成 height,查询高度也没问题。那么我们来说一下上述代码表达的意思:

先做媒体查询,看看当前浏览器的窗口尺寸,如果满足条件 min-width: 768px ,就是窗口的最小宽度是 768px ,那么就使用大括号里 CSS ,600px 的宽度,然后蓝色背景。

第二段跟上面类似,就是当窗口的最大宽度是 768px ,那么就执行这段里的 CSS,90% 的宽度,红色背景。

这个效果你要验证的话,要手动拖动窗口的大小去看,别打开看一眼就跑来问我为什么不起作用,那样我不理你哦~

这个其实很简单,只是给某一部分 CSS 加一个条件判断而已,当然了条件可以再复杂一些的,比如加上 and 或者 or 这类的条件。就像下面这样。

@media (min-width: 768px) and (max-width: 1024px){
    #box {
        width: 80%;
        height: 300px;
        margin: 50px auto;
        background: green;
    }
}

就是表示同时要满足两个条件,大括号里的 CSS 才起作用。如果把 and 换成 or 就是说满足两个条件其中之一就可以了。

这个问题不难,大家试试看就明白了,学代码这东西就是要多尝试,你努力玩他,他就玩不过你了,于是你就赢了,否则……你就被他玩了。

事实上这个媒体查询可以做很多复杂的玩法,有兴趣可以查询一下,祝你看的头晕,怕头晕的先把我说的这些看懂就好,对了 width 也可以换成 height ,什么意思呢?你猜!

然后那个什么 IE6——8,咳咳,算了,不提了,升级 Win10 吧,会更幸福的~

本章代码下载:本章代码


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me