发表于： 2017-03-03 22:44:32
1 1309
【CSS-task10】如何使用媒体查询
小课堂【武汉第90期】 分享人：龚浩
1.背景介绍
现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备，但是网站开发人员却面临一个挑战：如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果，如何在各种大小的屏幕上提供一流的用户体验,答案是：采用响应式设计。响应式设计可以随着所显示的屏幕大小而改变。实现响应式设计的核心就是媒体查询。使用@media媒体查询，可以针对不同的媒体类型定义不同的样式。
2.知识剖析
设置meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
width = device-width：宽度等于当前设备的宽度
initial-scale:初始的缩放比例(默认设置为1.0)
minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
user-scalable:用户是否可以手动缩放(默认设置为no，因为我们不希望用户放大缩小页面)
media查询引入方式
媒体查询有两种引入方法
link元素中的CSS媒体查询
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
css样式表中媒体查询
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
第一种方法是css2媒体查询用法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。
逻辑操作符
一个基本的媒体查询，即一个媒体属性与默认指定的 all媒体类型
@media (min-width: 700px) { ... }
and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型,只有当每个属性都为真时，结果才为真
@media and (max-width:600px) and (min-width: 800px;){......}
媒体查询中使用逗号分隔效果等同于 or 逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
not键字应用于整个媒体查询，在媒体查询为假时返回真,not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。
@media not all (max-width:700px){......}
媒体属性
width:浏览器可视宽度
height:浏览器可视高度
device-width:设备屏幕的宽度
device-height:设备屏幕的高度
orientation:检测设备目前处于横向还是纵向状态
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例
color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
color-index:检查设备颜色索引表中的颜色，他的值不能是负数
monochrome:检测单色楨缓冲区域中的每个像素的位数。
resolution:检测屏幕或打印机的分辨率
grid：检测输出的设备是网格的还是位图设备。
3.常见问题
screen是什么，有哪些媒体类型
4.解决方案
screen是媒体类型(media type)的一种，用于电脑屏幕、智能手机、平板等，媒体类型也就是网页显示的媒介，比如，一般在screen上显示时，页面字体要大一些，在纸质媒体显示时，页面字体要小一些。那么如何告诉别人某个样式是适用于何种媒体类型的呢？这就要靠声明media type来实现了。
大部分媒体类型都已弃用了，下面这些是仍可以使用的
all:用于所有设备
print:用于打印机和打印预览
screen：用于电脑屏幕、智能手机、平板等
speech：应用于屏幕阅读器等发声设备
5、编码实战
下面是一个简单的响应式网页，断点在1200px，768px
<!DOCTYPE html>
<html>
<head>
<title>媒体查询演示</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
html,body,div{
padding: 0;
margin: 0;
}
@media (min-width: 1200px){
.col-lg-1{
display: inline-block;
width: 100%;
box-sizing: border-box;
}
.col-lg-2{
display: inline-block;
width: 50%;
box-sizing: border-box;
}
.col-lg-4{
display: inline-block;
width: 25%;
box-sizing: border-box;
}
}
@media(max-width: 1199px){
.col-md-1{
display: inline-block;
width: 100%;
box-sizing: border-box;
}
.col-md-2{
display: inline-block;
width: 50%;
box-sizing: border-box;
}
.col-md-4{
display: inline-block;
width: 25%;
box-sizing: border-box;
}
}
@media (max-width: 767px){
.col-sm-1{
display: inline-block;
width: 100%;
box-sizing: border-box;
}
.col-sm-2{
display: inline-block;
width: 50%;
box-sizing: border-box;
}
.col-sm-4{
display: inline-block;
width: 25%;
box-sizing: border-box;
}
}
.wrap{
font-size: 0;
}
.box{
padding: 30% 0;
background-color: red;
width: 80%;
margin: 5% auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="col-lg-4 col-md-2 col-sm-1">
<div class="box"></div>
</div>
<div class="col-lg-4 col-md-2 col-sm-1">
<div class="box"></div>
</div>
<div class="col-lg-4 col-md-2 col-sm-1">
<div class="box"></div>
</div>
<div class="col-lg-4 col-md-2 col-sm-1">
<div class="box"></div>
</div>
</div>
</body>
</html>
6.扩展思考
媒体查询的主要技巧？
让内容确定断点，设备分辨率是不断变化的，比如在移动端ipone主流分辨率320px、360px、414px，但是可能几年后就不一样了，Web本质是流动的，因此我们的工作是在任何屏幕上创建外观、功能等，而不是简简单单的几个断点。
在使用em、rem和百分比(%)等相对单位
条件加载媒体查询，也就是在页面中只是为了加强某些模块，并没有具体价值的部分，可以先隐藏掉，等到了合适宽度时再加载出来
7.参考文献
参考一：http://www.ibm.com/developerworks/cn/web/wa-cssqueries/
参考二：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
参考三：http://www.runoob.com/cssref/css3-pr-mediaquery.html
8.更多讨论
Mozilla专有的媒体属性
返回列表
评论