html:<link> 标签中的 media 属性

html:<link> 标签中的 media 属性,第1张

html:<link> 标签中的 media 属性 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的设备 } 大显示器​

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/588802.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存