第四十六章 响应式

要是前边的 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 吧,会更幸福的~

本章代码下载:本章代码

原文链接:https://www.ek58.com/archives/1240,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?