css3 多媒体查询

素颜马尾好姑娘i 2023-06-28 11:08 5阅读 0赞

媒体，一类传输信息的介质。

媒体在我们身边息息相关；电视机，手机，电脑等等都是媒体。

我们在前端开发的过程中，面对不同的媒体需要去设计不同的样式。

## 多媒体类型 ##

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>all</td> 
   <td>所有设备</td> 
  </tr> 
  <tr> 
   <td>print</td> 
   <td>打印机</td> 
  </tr> 
  <tr> 
   <td>screen</td> 
   <td>电脑，手机</td> 
  </tr> 
  <tr> 
   <td>speech</td> 
   <td>屏幕阅读器</td> 
  </tr> 
 </tbody> 
</table>

当然我们web前端主要是screen类型。

## media 多媒体查询 ##

我们在不同的媒体上引用不同的样式文件，以便达到不同媒体设备的响应式。

<link rel="stylesheet" media="screen" href="screen.css">

我们还可以通过@media来设置srceen设备的不同视口来设置不同的样式

@media screen and (max-width: 300px){ 
    	body { 
            background-color:blue;
        }
    }
    @media screen and (min-width: 300px){ 
     	body { 
            background-color:pink;
        }
    }

比如上方我们查询screen类型设备的小于300px时背景颜色为blue，大于300px时为pink。

![在这里插入图片描述][20200109190839126.gif_pic_center]

[20200109190839126.gif_pic_center]: https://img-blog.csdnimg.cn/20200109190839126.gif#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 09_CSS3多媒体查询

1 多媒体查询 1.1 媒体查询媒体查询能在不同的条件下使用不同的样式，使页⾯在不同在终端设备下达到不同的渲染效果。 CSS 的 Media Query 媒体查

一时失言乱红尘/ 2023年10月16日 12:58/ 0 赞/ 38 阅读

相关 css3 多媒体查询

媒体，一类传输信息的介质。媒体在我们身边息息相关；电视机，手机，电脑等等都是媒体。我们在前端开发的过程中，面对不同的媒体需要去设计不同的样式。多媒体类型 <t

素颜马尾好姑娘i/ 2023年06月28日 11:08/ 0 赞/ 6 阅读

相关 CSS3 @Media 媒体查询

CSS3 媒体类型 <table> <tbody> <tr> <th>值</th> <th>描述</th> </tr> <tr>

素颜马尾好姑娘i/ 2023年01月23日 14:51/ 0 赞/ 278 阅读

相关 css3媒体查询尺寸

转自：https://www.cnblogs.com/pangchunyu/p/11557487.html css3媒体查询尺寸 PC端按屏幕宽度大小排序（主流的用

短命女/ 2022年12月03日 09:14/ 0 赞/ 281 阅读

相关 CSS3中的media查询

这几天，在看慕课网的CSS3，写得很详细，地址在这：[http://www.imooc.com/code/1405][http_www.imooc

落日映苍穹つ/ 2022年08月07日 07:39/ 0 赞/ 173 阅读

相关 CSS3媒体查询

经验不足的前端人员在头几次面对一大堆兼容性问题时往往手足无措，有时候一个样式的兼容性问题我们不需要去这种写一个能匹配所有设备的CSS样式，而是可以完全针对不同特性的设备编写不同

深碍√TFBOYSˉ_/ 2022年07月14日 12:50/ 0 赞/ 288 阅读

相关 CSS3的媒体查询@media

CSS3的媒体查询@media 通过@media可以针对不同屏幕大小定义不同样式的网页，页面会根据浏览器长宽来渲染页面。语法： @media mediaT

╰+攻爆jí腚メ/ 2022年05月18日 09:19/ 0 赞/ 319 阅读

相关 CSS3——多媒体查询属性

多媒体查询语法 @media not|only mediatype and (expressions) \{ CSS-Code; \} not:

傷城~/ 2022年05月10日 00:40/ 0 赞/ 202 阅读

相关 Html5 @media + css3 媒体查询

[css3 media媒体查询器用法总结][css3 media] 随着响应式设计模型的诞生，Web网站又要发生翻天腹地的改革浪潮，可能有些人会觉得在国内IE6用

客官°小女子只卖身不卖艺/ 2021年11月02日 15:42/ 0 赞/ 429 阅读

相关 CSS3@media查询的使用

Media Queries能元素在不同的条件下使用不同的样式，使页面在不同的终端设备下达到不同的渲染效果。@media查询是CSS3新增的，比之前的media查询使时方便多了，

客官°小女子只卖身不卖艺/ 2021年09月20日 15:38/ 0 赞/ 334 阅读