04-媒体查询

随记123

已于 2024-05-30 15:32:08 修改

阅读量522

点赞数 10

分类专栏：前端 HTML5-CSS3 文章标签：媒体前端 css3

于 2024-05-30 15:13:56 首次发布

本文链接：https://blog.csdn.net/weixin_55702682/article/details/139325181

版权

前端同时被 2 个专栏收录

45 篇文章

订阅专栏

HTML5-CSS3

9 篇文章

订阅专栏

1. 媒体查询

使用CSS3 @media查询，你可以针对不同的设备类型以及设备的不同特性，定义不同的样式。

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

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

1.1 浏览器支持

表格中的数字表示支持 @media 规则的第一个浏览器的版本号。

Rule	chrome	IE	firefox	Safari	opera
@media	21	9	3.5	4.0	9

1.2 响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

1.3 响应式布局容器

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

父容器版心的尺寸划分

超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

1.4 媒体查询语法

样式表中的CSS媒体查询(语法)

@media not|only mediatype and (expressions) and（expressions）...{
	CSS-Code;
}

mediatype：设备类型；
expressions：设备特性；
使用 not，and 和 only 等逻辑操作符构建复杂的媒体查询,上面语法中的[ and (设备特性)]可以出现0~N次。
可以对多个设备特性进行匹配。

示例如下

@media (max-width: 768px) {
  .box {
    background-color: red;
  }
}
@media (min-width: 768px) {
  .box {
    background-color: green;
  }
}
@media (min-width: 992px) {
  .box {
    background-color: blue;
  }
}
@media (min-width: 1200px) {
  .box {
    background-color: black;
  }
}

1.4.1 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
	.box {
   		display:none;
  	}
}

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。

1.4.2 最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
	.box{
		width: 980px;
	}
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

1.4.3 多个媒体特性使用

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {
      background-color:#f5f5f5;
    }
}

1.5 媒体类型

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。

1.6 设备特性

特性	合理的双方的特性值	说明
width	带单位的长度值，例如600px	匹配浏览器窗口的宽度
height	带单位的长度值，例如600px	匹配浏览器窗口的高度
orientation	auto用户代理将文档的方向设置为自动	通过设备的倾斜摆动情况来决定文档显示的方向 orientation: auto; orientation: portrait;/锁定为纵向/ orientation: landscape;/* 锁定为横向*/