样式link属性media用法--媒体类型查询

最新推荐文章于 2022-03-10 18:17:16 发布

风神.NET

最新推荐文章于 2022-03-10 18:17:16 发布

阅读量1.9k

点赞数 1

分类专栏： HTML5+CSS|CSS3

原文链接：https://blog.csdn.net/WuLex

版权

HTML5+CSS|CSS3 专栏收录该内容

153 篇文章 10 订阅

订阅专栏

引用外部样式使用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的设备 }  大显示器

不知跬步，无以至千里；不积小流，无以成江海。菜鸟的梦想是雄鹰。

风神.NET

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
样式link属性media用法--媒体类型查询

引用外部样式使用link你可能想针对将要显示页面的设备类型(桌面PC、笔记本电脑、平板电脑、手机或者甚至页面的印刷版本)来调整页面的样式，可以利用一个media属性，在<link>元素中增加这个属性，只使用适用于指定设备的样式文件。<link href="..." rel="stylesheet" media="screen and (max-device-width=...
复制链接

扫一扫