广树
2024-09-20 12:18
@ZeroCounter：这个成就明显就是想你读两遍
导航
萌即是正义！时不时分享一些ACG活动记录与有趣代码的小站！
侧边栏
正在攻略
PSN奖杯卡
【响应式布局】响应式布局基础之媒体查询
作者：广树时间：2016-12-01 11:38:53分类：CSS/HTML
在以前的WEB概念中人们的第一反应往往是用“PC来看”，但是随着智能手机和平板的普及，用户的浏览环境逐渐倾向PC以外的终端。“响应式WEB”也因此受到了关注。
也就是说，用户使用什么终端=用什么媒体来访问这么一回事。
比如想从大显示器转变为小显示器的时候，如果只能判断媒体（无法判断条件分支），仅凭CSS是什么都做不了的。
为了解决这一问题，扩张出了能够判断媒体特性的媒体查询诞生了。
这里就是媒体查询。其意思是“画面宽度小于480px加载style.css”
也就是说，超过指定数值（例子中为宽480px）则不加载该css的意思。
但是如果不在这个范围内不加载任何css的话也不是很科学。
这个分歧点被称之为“断点”。
虽然断点可以设置非常多，但是设置的越多越难维护，现在一般的网站主要区分智能手机、平板、PC这几大类终端。
portrait为竖屏，landscape为横屏。可以通过朝向改变CSS。
现在比较常用的如下。
这次将简单说一下关于响应式布局中的媒体查询。
所谓的媒体查询？
媒体查询是从CSS2时代开始，以media标签发展而来的CSS3新元素。
类似下面的代码应该是大家都看过的。
<link rel="stylesheet" href="css/style.css" media="screen">上面的代码是以通常显示器为对象，加载“style.css”。
也就是说，用户使用什么终端=用什么媒体来访问这么一回事。
比如想从大显示器转变为小显示器的时候，如果只能判断媒体（无法判断条件分支），仅凭CSS是什么都做不了的。
为了解决这一问题，扩张出了能够判断媒体特性的媒体查询诞生了。
主要的媒体类型
screen（一般的显示器）、projection(已废弃。 用于投影设备)、print(用于打印机和打印预览)、tv(已废弃。 用于电视和网络电视)、all(用于所有设备)等
参考：http://www.runoob.com/cssref/css3-pr-mediaquery.html
媒体查询的书写方式
媒体查询主要通过以下两种方法来实现。
通过link元素来指定
和以前的css文件读取方法没什么差异，实际代码如下。
<head> <link rel="stylesheet" href="style.css" media="screen and (max-width:480px)"> /** 中略 **/ </head>media=” ”的地方，在screen后面还写了什么。
这里就是媒体查询。其意思是“画面宽度小于480px加载style.css”
也就是说，超过指定数值（例子中为宽480px）则不加载该css的意思。
但是如果不在这个范围内不加载任何css的话也不是很科学。
所以一般媒体查询会写多个代码。
<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">/* 画面宽度小于或等于480px，加载这个文件。*/ <link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:1024px)"> /* 画面宽度480px～1024px区间内加载这个文件 */ <link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">/* 画面大于或等于1024px，加载这个文件 */如上述代码，可以通过指定分歧点来适用不同的css文件。
这个分歧点被称之为“断点”。
虽然断点可以设置非常多，但是设置的越多越难维护，现在一般的网站主要区分智能手机、平板、PC这几大类终端。
通过样式表来指定的方式
和前面通过断点加载不同样式表不同，这个方法是直接写在CSS样式表文件中。
/*
@media以外的地方为所有尺寸适用。
*/
p {
color:red;
}
@media screen and (min-width:480px) {
/* 画面宽度大于等于480px，读取这里的样式 */
p { color:#ededed;}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 画面宽度从768px到1024px读取这里的样式 */
p {}
}
@media screen and (min-width:1024px) {
/* 画面尺寸大于1024px读取这里的样式 */
}
以下代码是区分iPhone、iPad、PC的基本断点。
想挑战响应式布局的话可以用来当作参考。
/* iPhone 竖屏 */
@media screen and (min-width:480px) {
/* for iPhone Landscape (iPhone 横) */
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* for iPad */
}
@media screen and (min-width:1024px) {
/* for PC */
}
媒体查询可以指定的属性
前面主要介绍的是以窗口宽度为参数进行切换，除了这以外还有许多方法，这里例举常用的。
根据终端朝向判断
//竖屏的情况下
@media screen and (orientation:portrait){
p {font-size: 1em; }
}
//横屏的情况下
@media screen and (orientation:landscape){
p {font-size: 1.2em; }
}
根据设备的朝向可以使用“orientation”。portrait为竖屏，landscape为横屏。可以通过朝向改变CSS。
根据像素密度判断
/* 视网膜屏的情况下适用 */
@media screen and (-webkit-min-device-pixel-ratio:2){
p {font-size: 1.2em; }
}
这个方法是比较老旧的方法，是可以通过设备的像素密度来判断。现在比较常用的如下。
@media screen and (min-resolution: 2dppx)或者
@media screen and (min-resolution: 2dppx)指定设备的像素密度。分辨率可以用dp或dpcm来表示。