CSS中media的最全用法格式总结！

最新推荐文章于 2024-09-09 20:47:20 发布

Ｓòrry╮

最新推荐文章于 2024-09-09 20:47:20 发布

阅读量6.3k

点赞数 1

分类专栏： HTML 前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_44100002/article/details/117554127

版权

前端同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

HTML

11 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3中的@media查询用于创建响应式设计的方法，包括如何为不同屏幕尺寸设置样式，如何使用逻辑运算符组合媒体条件，以及常见的媒体特性。还探讨了在实践中设置媒体查询时应注意的顺序问题，确保样式正确应用。此外，文章还涵盖了适用于不同设备类型的媒体类型，并列举了使用媒体查询时的关键点和常见问题。

摘要由CSDN通过智能技术生成

media的定义和使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

给引用样式整体设置media

格式为：media="条件" ，url('style.css') 条件

<link> 标签上

<link rel="stylesheet" href="style.css" media="screen and (max-width: 800px)">

<style>样式表引用

<style  media="print">

@import样式引用
在style.css样式表中引用：

@import url(style1.css) sreem;

给部分样式设置media

格式为：@media 条件

@media sreen and (min-width: 750px), sreen and (max-width: 750px) and (min-width: 1000px) {
	color: red
}

逻辑运算符(logical operators)

and：条件同时满足时

@media sreen and (min-width: 750px) {
	color: red
}

，（逗号）:条件1或者条件2满足时

@media sreen and (min-width: 750px), sreen and (max-width: 750px) and (min-width: 1000px) {
	color: red
}

not: 条件未满足时

@media not sreen and (min-width: 750px) {
	color: red
}

only: 浏览器不支持媒体查询即忽略后面样式

@media only sreen and (min-width: 750px) {
	color: red
}

media条件总结

可以编写不同的媒体类型（Media Type），不同的媒体特性（Media features）设置媒体查询条件（Media queries），符合此媒体查询条件时，应用样式。
有多个媒体查询条件时，用括号连接，全满足时应用样式。

⭐条件语法： only | not Media Type and (Media Feature) and (Media Feature)...，...

⭐条件语法中文版：逻辑运算符（logical operators）only | not 媒体类型(Media Type) 逻辑运算符（logical operators）and (媒体特性(Media features) ) 逻辑运算符（logical operators）and (媒体特性(Media features) ) , …

⭐条件语法示例：

@media only sreen and (min-width: 750px), sreen and (max-width: 750px) and (min-width: 1000px) {
	color: red
}
@media not sreen and (min-width: 750px), sreen and (max-width: 750px) and (min-width: 1000px) {
	color: red
}
<style media="print">

常用的媒体特性

(max-width:599px)
(min-width:600px)
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比

媒体类型

在这里插入图片描述
目前剩余可用类型：screen print speech all

使用时需要注意的问题

⭐条件有重合部分时，范围更大的条件要写在范围更小条件之前:

min-width作为判断条件时要width从小到大排

@media (min-width: 768px){
	.container{
		width:750px;
	}
}

@media (min-width: 992px){
	.container{
		width:970px;
	}
}

@media (min-width: 1200px){
	.container{
		width:1170px;
	}
}