古炫,刘艺恩,何炅马丽小品2014
响应式：适应不同的终端，在不同的终端有较好的显示效果
媒体类型：
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech "听觉"类似的媒体类型
tty 不适用像素的设备
tv 电视
@media only 只有在特定的某种设备上识别
and 连接媒体类型和媒体特性的
@media not 是用来排除某种特殊类型的 如@media not tv
@media (orientation:portrait) 屏幕垂直
@media (orientation:landscape) 屏幕水平
媒体特性：
min-width 当屏幕大小大于等于某个值的时候识别
max-width 当屏幕大小小于等于某个值的时候识别
<style>
#box{
width:100px;
height:100px;
background-color:red;
}
@media braille {
#box{
background-color:green;
}/*当在盲文触觉设备上是绿色*/
}
@media tv {
#box{
background-color:pink;
}/*当在tv设备上是粉色*/
}
@media all{
#box{
background-color:red;
}/*在所有媒体上都是红色*/
}
@media only screen{
#box{
background-color:pink;
}
}/*仅仅在彩屏设备下识别,only可以省略*/
@media all and (min-width:500px){
#box{
background-color:green;
} /*当屏幕宽度>=500的时候识别*/
}
@media all and (max-width:500px){
#box{
background-color:yellow;
} /*当屏幕宽度<=500的时候识别*/
}
@media (orientation:landscape){
div{
background-color:#000;
}
} /*当屏幕为水平，基本不用*/
@media (orientation:portrait){
div{
background-color:yellow;
}
} /*当屏幕为垂直，基本不用*/
</style>
<div id="box">
</div>
响应式的引入方式一：
<link rel="stylesheet" href="01.css" media="all and (min-width:400px)"/>
<link rel="stylesheet" href="02.css" media="all and (min-width:600px)"/>
<link rel="stylesheet" href="03.css" media="all and (min-width:800px)"/>
<link rel="stylesheet" href="04.css" media="all and (min-width:1000px)"/>
响应式的引入方式二：
<style>
@import url(01.css) (min-width:400px);
@import url(01.css) (min-width:400px) and (max-width:799px);
@import url(01.css) (min-width:800px);
@import url(01.css) (min-width:1000px);
</style>
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
我要评论
网友评论