使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
格式为:media="条件"
,url('style.css') 条件
标签上<link rel="stylesheet" href="style.css" media="screen and (max-width: 800px)">
样式表引用<style media="print">
@import
样式引用@import url(style1.css) sreem;
格式为:@media 条件
@media sreen and (min-width: 750px), sreen and (max-width: 750px) and (min-width: 1000px) {
color: red
}
@media sreen and (min-width: 750px) {
color: red
}
@media sreen and (min-width: 750px), sreen and (max-width: 750px) and (min-width: 1000px) {
color: red
}
@media not sreen and (min-width: 750px) {
color: red
}
@media only sreen and (min-width: 750px) {
color: red
}
可以编写不同的媒体类型(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
}