CSS3_媒体查询（十一）

news/2024/11/24 17:11:39/

CSS3_响应式布局

1、媒体样式

在不同媒体上显示不同的样式。

常用阈值：

小于768px：小屏幕；
768px-992px：中等屏幕；
992px-1200px：大屏幕；
大于1200px：超大屏幕。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>查询媒体类型</title><style>css">h1 {width: 300px;height: 300px;line-height: 300px;background-image: linear-gradient(30deg, red, yellow, green);margin: 0 auto;text-align: center;font-size: 30px;color: white;text-shadow: 0 0 10px black;}/* 只有在打印机上才应用的样式 */@media print {h1 {background: transparent;}}/* 只有在屏幕上才应用的样式 */@media screen {h1 {font-family: "Forte";}}/* 在所有情况下都使用的字体 */@media all {h1 {font-family: "Forte";}}</style>
</head><body><h1>测试文本</h1>
</body></html>

2、媒体特性

根据媒体视口的大小和媒体宽度进行样式的变化。

width：检测视口宽度；
max-width：检测视口最大宽度；
min-width：检测视口最小宽度；
height：检测视口高度;
max-height：检测视口最大高度；
min-height：检测视口最小宽度；
device-width：检测屏幕的宽度；
max-device-width：检测屏幕的最大宽度；
min-device-width：检测屏幕的最小宽度；
orientation：检测视口的旋转方向
portrait：视口处于纵向，高度大于宽度；
landscape：视口处于横向，宽度大于高度。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>媒体类型</title><style>css">div {background-color: aqua;height: 200px;line-height: 200px;text-align: center;font-size: 50px;}/* 视口宽度小于700px的时候背景设置为黄色 */@media (max-width:700px) {div {background-color: yellow;}}/* 视口宽度大于900px的时候背景设置为蓝色 */@media (min-width:900px) {div {background-color: blue;}}/* 视口宽度为500px的时候背景设置为红色 */@media (width:500px) {div {background-color: red;}}/* 只有设备宽度为2560px(因为2560缩放了1.25倍)时,才会生效 */@media (device-width:2048px) {div {background-color: black;}}</style>
</head><body><div><p>示例文本</p></div>
</body></html>

3、运算符

可以通过运算符将媒体特性联系在一起：

and：并且；
, 或者 or：或；
not：否定；
only：肯定。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>运算符</title><style>css">div {height: 300px;background-color: antiquewhite;}@media (min-width:600px) and (max-width:800px) {div {background-color: aqua;}}</style>
</head><body><div></div>
</body></html>