引用外部样式使用link
你可能想针对将要显示页面的设备类型(桌面PC
、笔记本电脑、平板电脑、手机或者甚至页面的印刷版本)来调整页面的样式,可以利用一个media
属性,
在<link>
元素中增加这个属性,只使用适用于指定设备的样式文件。
<link href="..." rel="stylesheet" media="screen and (max-device-width=480px)" />
<link href="..." rel="stylesheet" media="print" />
查询中有很多属性可以使用,如依赖设备实际屏幕的大小(min-device-width、max-device-width
),使用浏览器窗口大小(max-width、min-width
),以及显示方向[ orientation
,这个可以时横向(landscape
)或纵向(portrait
)],
此外还有很多其他的属性。可以根据需要为html
增加多个<link>
标记,涵盖你要支持的所有设备。
在css
中增加媒体查询
要为CSS
指定有特定属性的设备,还有一种方法:不是在link
标记中使用媒体查询,还可以直接写在CSS
中。
采用这种方式,@media
规则中只包含特定于中媒体类型的CSS
规则。在CSS
文件中,要把对所有媒体类型都通用的规则放在@media
规则下面,这样一来,就不会不必要的重复规则了。另外浏览器加载页面时,它会通过媒体类型来确定页面适用的规则,而将不匹配的规则忽略。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="static/css/test.css" rel="stylesheet" media="screen and (min-width:1024px)" />
<link href="static/css/test.css" rel="stylesheet" media="screen and (max-width:1024px)" />
</head>
<body>
<div class="div_test">
hello world!!!
</div>
</body>
</html>
test.css
样式文件:
@media screen and (min-width:1024px)
{
.div_test{
font-size:50px;
font-family:'Times New Roman';
font-style:oblique;
color: #000000;
background-color: #808080;
margin:30px;
padding:50px;
padding-left:100px;
border: dashed 1px #0cf60a;
border-radius:5px;
}
}
@media screen and (max-width:900px)
{
.div_test{
font-size:50px;
font-style:oblique;
background-color: #b6ff00;
margin:30px;
padding:50px;
padding-left:100px;
border: double 1px #0cf60a;
border-radius:5px;
}
}
html:<link>
标签中的 media
属性
定义和用法
media
属性规定被链接文档将显示在什么设备上。
media
属性用于为不同的媒介类型规定不同的样式。
media
属性值 (所有浏览器都支持值)
screen
print
all
语法
<link media="value">
值 | 描述 |
---|---|
screen | 计算机屏幕(默认)。 |
tty | 电传打字机以及类似的使用等宽字符网格的媒介。 |
tv | 电视机类型设备(低分辨率、有限的滚屏能力)。 |
projection | 放映机。 |
handheld | 手持设备(小屏幕、有限带宽)。 |
print | 打印预览模式/打印页面。 |
braille | 盲人点字法反馈设备。 |
aural | 语音合成器。 |
all | 适用于所有设备。 |
CSS3 @media
查询
CSS 语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
你也可以针对不同的媒体使用不同 stylesheets
:
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
.class {
background: #ccc;
}
}
总结:顺序不能反
@media (max-width: 767px) { ... col-xs-3... } { //<=767的设备 } 手机
@media (min-width: 768px) { ... col-sm-3... } { //>=768的设备 } 平板
@media (min-width: 992px) { ... col-md-3...} { //>=992的设备 } 电脑
@media (min-width: 1200px) { ... col-lg-3...} { //>=1200的设备 } 大显示器
不知跬步,无以至千里;不积小流,无以成江海。菜鸟的梦想是雄鹰。