第13讲：响应式入门之-Media Query

发布时间： 2016年1月24日最后更正时间：2020年6月17日

本篇文章自发布已超过8年，
请自行评估文章价值。

如今是响应式网站泛滥的世代。做一个网站如果不是响应式的，拿出去属实比较丢人。
当然，如果对方开出1元的价格做一个网站，那就不用考虑响应式了 >_>
不说废话了，进入正题。

响应式网站设计？

响应式网站设计，能让你的页面在所有客户端浏览器上表现的都非常好。
响应式网站只要有HTML和CSS就可以了。当然如果有特殊要求，适当加入js也是有必要的。
比如咱的官网 https://10.1pxeye.com就是一个响应式网站。

什么是视口？

就是用户能看到的页面可见区域就叫视口。

在平板电脑和手机出现之前，网页只为电脑屏幕而设计。
那个年代，一个页面往往只有一种布局，固定的尺寸。

后来平板电脑和手机出现之后，为了能更好的显示页面，起初浏览器厂商的解决方案是提供一个自动缩放的功能。把pc页面缩放到手机屏幕那么大。尽量让页面全部显示出来。
感觉还不错。毕竟内容全部显示了。

但是默认情况下，页面文字很小。小的可怜，几乎看不见。
很快，响应式网站的设计方案也紧罗密布地制定开来。
各大浏览器厂商开始制定统一标准。以推进响应式网站的发展。

设置视口

做响应式网站的时候，一定要在页面头部加入如下的声明：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

具体一点就是：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
</head>
<body></body>
</html>

在 HTML 中，meta 标签没有结束标签，meta标签定义了与文档相关联的名称或值。可提供有关页面的元信息。

width=device-width 样式中定义的宽度等于设备中定义的宽度
initial-scale=1.0 缩放比例1
minimum-scale=1.0 最大缩小比例1
maximum-scale=1.0 最大放大比例1

上段代码的最终作用是，移动客户端会按你设定的尺寸来显示页面。并且比例是1，不可通过手势放大缩小。
如果不写这段代码，移动客户端的浏览器真的会以它的1px来显示你设定的1px。最终效果是被缩放的效果，字小小的那种。
总之，做响应式网站的时候记得至少要加上如下声明。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

今天的主题：什么是Media Query？

CSS2允许用户对特定media类型制定样式。
例如：
针对screen（屏幕）用@media screen{ ... } 里设定的样式。
针对打印样式用 @media print{ ... } 里的样式。

CSS3提供了更加强大的功能。
可以针对不同media类型设置样式，还根据设定的宽度或者高度指定样式。

咱看下面的例子：

@media screen and (max-width: 500px) {
    body {
        background-color: black;
    }
}

意思就是：
当屏幕的宽度小于等于500px的时候body的背景颜色为黑色。

平时可用如下口诀帮助记忆：

“当” ，这个时候写 @media
“屏幕”，写screen
“的最大宽度为”， and (max-width:)
“500px”，max-width:后加上500px
“的时候”，这个时候加上大括号。
拼在一起就是：
@media screen and (max-width: 500px) {}
然后大括号里就写我们要设定的样式。

是不是很容易记忆？多写几遍就会了。

再举个例子：
打开网址：https://10.1pxeye.com/docs/lesson12/media-query.html
当浏览器宽度小于等于500px的时候，四个色块的宽度都会变成100%。
代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>media query</title>
<style type="text/css">
div{
	float:left;
	height:200px
	}
.col-1{
	width:40%;
	background-color:pink;
	}
.col-2{
	width:60%;
	background-color:lightblue;
	}
.col-3{
	width:60%;
	background-color:lightgreen;
	}
.col-4{
	width:40%;
	background-color:orange;
	}
@media screen and (max-width:500px){
	[class*="col-"]{
		width:100%;
		}
	}
</style>
</head>

<body>
<div class="col-1"></div>
<div class="col-2"></div>
<div class="col-3"></div>
<div class="col-4"></div>
</body>
</html>

这回看懂了么？

扩展内容：

[class*=”col-“]{}
这个的意思是，从所有的class中选择包含col-字符串的元素进行样式的设定。

好了，本节课的内容就到此。

评论区

发表新的留言

您可以留言提出您的疑问或建议。
您的留言得到回复时，会通过您填写的邮箱提醒您。