37.Media Queries——媒体类型
让一个页面适应不同终端
screen all print 最为常见
媒体类型的引入方法：
1.link方法：
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
通过在link标签中添加media属性指定不同类型
2.@import方法
1）通过@import调用另一个样式文件
@importurl(reset.css) screen;
@importurl(print.css) print;
2）在<head>中的<style>标签中引入媒体类型方法。
<head>
<style type="text/css">
@importurl(style.css) all;
</style>
</head>
3.media方法
1）样式文件中引入媒体类型
@media screen {
选择器{/*你的样式代码写在这里…*/}
}
2)在<head>标签中的<style>中引用
<head>
<style type="text/css">
@media screen{
选择器{/*你的样式代码写在这里…*/}
}
</style>
</head>
使用media queries方法
@media 媒体类型and （媒体特性）{你的样式}
媒体类型：设备类型
媒体特性：设备特性 包括两部分类似样式的书写方式 例如：(max-width: 480px)
实际项目中常使用的方式：
1.最大宽度
例如：
@media screen and (max-width:480px){
.ads {
display:none;
}
}
当屏幕小于480时，id为ads的部分被隐藏
2.最小宽度
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}
同理
3.多个媒体特性使用
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
表示：当屏幕在600到900之间时，背景颜色为。。。
4.设备屏幕输出宽度device width
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
表示：iPhone.css样式，适用于最大设备宽度为480px
5.not关键字
@media not print and (max-width: 1200px){样式代码}
表示：除了打印设备以及最大宽度是1200的所有设备
6.only关键字
<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用
如果没有明确媒体类型，则默认为all
另外 样式中还可以使用多条语句将同一样式应用于不同的媒体类型和媒体特性，例如：
<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
表示 style.css被用在小于或等于480px的手持设备中 活着屏幕宽度大于或等于960px的设备上
38.响应式设计（rwd）
1.流体网格
参考了流体设计中的网格设计，每个网格格子使用百分比单位控制网格大小。
能够根据屏幕大小作出相应的比例缩放
2.弹性图片
指的是：不给出图片尺寸，根据流体网格进行缩放，用于适应各种网格的尺寸。实现方法：
img {max-width:100%;}
为每个断点提供不同的图片，解决方法：
html：
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />
css：
@media (min-device-width:600px){
img[data-src-600px]{
content: attr(data-src-600px,url);
}
}
@media (min-device-width:800px){
img[data-src-800px] {
content:attr(data-src-800px,url);
}
}
达到自适应的效果，但这种方法适配的断点较少，并不实用
rwd最关注的就是：根据用户使用的设备当前宽度，加载备用样式
4.屏幕分辨率
处理不同分辨率：
1.1024px显屏
@media screen and (max-width : 1024px) {
/* 样式写在这里 */
}
2.800px显屏
@media screen and (max-width : 800px) {
/* 样式写在这里 */
}
3.640px显屏
@media screen and (max-width : 640px) {
/* 样式写在这*/
}
4.iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* 样式写在这 */
}
5.iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* 样式写在这 */
}
6.iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
/* 样式写在这 */
}
5.主要断点
就是设备宽度的临界值，其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。
简单的说：就是使用主要断点和次要断电，创建媒体查询条件。每个断点对应调用一个样式文件（或代码）
为了满足更多样式，需要添加次要断点，但是也需要添加维护的样式
meta标签
作用：为了让responsive设计在智能设备中显示正常，也就是web页面适应屏幕大小，通常使用meta标签重置
meta标签被称为可视区域meta标签，其使用方法如下
<meta name=”viewport” content=”” />
在ie6-8中，完全不支持css media
如果要在ie6-8中使用，可以添加以下样式，活着单独创建一个名为responsive.css的wenjian
脚本下载地址：
media-queries.js(http://code.google.com/p/css3-mediaqueries-js/)
respond.js(https://github.com/scottjehl/Respond)
<!—[if lt IE9]>
<scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
<![endif]>
38.自由放缩属性resize
即允许用户拖动方式修改元素尺寸来改变元素大小
为了增强用户体验
语法：resize: none | both | horizontal | vertical | inherit
例如：通过resize属性，让文本域可以沿水平方向拖大。代码为：
textarea {
-webkit-resize: horizontal;
-moz-resize: horizontal;
-o-resize: horizontal;
-ms-resize: horizontal;
resize: horizontal;
}
39.外轮廓属性
与border呈现的效果相似，但是outline（外轮廓）不占用网页布局空间，不一定是矩形，属于一种动态样式，只有在获取到焦点或者被激活的时候呈现
语法：outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
关于属性说明：
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
