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

深藏阁楼爱情的钟 2021-07-04 22:30 401阅读 0赞

**引用外部样式使用`link`**

你可能想针对将要显示页面的设备类型(桌面`PC`、笔记本电脑、平板电脑、手机或者甚至页面的印刷版本)来调整页面的样式，可以利用一个`media`属性，

在`<link>`元素中增加这个属性，只使用适用于指定设备的样式文件。  
![在这里插入图片描述][20190830170659674.png]  
![在这里插入图片描述][20190830170716943.png]

查询中有很多属性可以使用，如依赖设备实际屏幕的大小(`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

### 语法 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>screen</code></td> 
   <td align="left">计算机屏幕（默认）。</td> 
  </tr> 
  <tr> 
   <td align="left"><code>tty</code></td> 
   <td align="left">电传打字机以及类似的使用等宽字符网格的媒介。</td> 
  </tr> 
  <tr> 
   <td align="left"><code>tv</code></td> 
   <td align="left">电视机类型设备（低分辨率、有限的滚屏能力）。</td> 
  </tr> 
  <tr> 
   <td align="left"><code>projection</code></td> 
   <td align="left">放映机。</td> 
  </tr> 
  <tr> 
   <td align="left"><code>handheld</code></td> 
   <td align="left">手持设备（小屏幕、有限带宽）。</td> 
  </tr> 
  <tr> 
   <td align="left"><code>print</code></td> 
   <td align="left">打印预览模式/打印页面。</td> 
  </tr> 
  <tr> 
   <td align="left"><code>braille</code></td> 
   <td align="left">盲人点字法反馈设备。</td> 
  </tr> 
  <tr> 
   <td align="left"><code>aural</code></td> 
   <td align="left">语音合成器。</td> 
  </tr> 
  <tr> 
   <td align="left"><code>all</code></td> 
   <td align="left">适用于所有设备。</td> 
  </tr> 
 </tbody> 
</table>

## CSS3 `@media` 查询 ##

### CSS 语法 ###

@media mediatype and|not|only (media feature) { 
        CSS-Code;
    }

你也可以针对不同的媒体使用不同 `stylesheets` :

@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的设备 }  大显示器

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

[20190830170659674.png]: /images/20210704/7c9d9ac8c8c349c3af5fdbbccc057e66.png
[20190830170716943.png]: /images/20210704/71f06601fd1342e19fb8ebc9cba794e4.png