1. 媒体查询—媒体类型
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>媒体查询_媒体类型</title>
<style>
h1 {
width: 600px;
height: 400px;
line-height: 400px;
background-image: linear-gradient(30deg, red, yellow, green);
margin: 0 auto;
text-align: center;
font-size: 100px;
color: white;
text-shadow: 0px 0px 10px black;
}
/* 只有在打印机或打印预览的时候才应用的样式 */
@media print {
h1 {
background: transparent;
}
}
/* 只有在屏幕上才应用的样式 */
@media screen {
h1 {
font-family: "仿宋";
}
}
/* 一直都应用的样式 */
@media all {
h1 {
color: skyblue;
}
}
</style>
</head>
<body>
<h1>带带大师兄</h1>
</body>
</html>2. 媒体查询—媒体特性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>媒体查询_媒体特性</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
height: 200px;
background-color: gray;
text-align: center;
line-height: 200px;
font-size: 100px;
}
/* 检测到视口宽度为800px时，应用如下样式 */
@media (width:800px) {
h1 {
background-color: green;
}
}
/* 检测到视口宽度小于等于700px时，应用如下样式 */
@media (max-width:700px) {
h1 {
background-color: orange;
}
}
/* 检测到视口宽度大于等于900px时，应用如下样式 */
@media (min-width:900px) {
h1 {
background-color: deepskyblue;
}
}
/* 检测到设备的宽度等于1920px时，应用如下样式 */
/* @media (device-width: 1920px) {
h1 {
background-image: linear-gradient(red, pink, lightblue);
}
} */
</style>
</head>
<body>
<h1>带带大师兄</h1>
</body>
</html>3. 媒体查询——运算符
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>媒体查询_运算符</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
height: 200px;
background-color: gray;
text-align: center;
line-height: 200px;
font-size: 100px;
}
/* 且运算符 */
/* @media (min-width: 700px) and (max-width: 800px) {
h1 {
background-color: green;
}
} */
/* @media screen and (min-width: 700px) and (max-width: 800px) {
h1 {
background-color: green;
}
} */
/* 或运算符 */
/* @media (max-width: 700px) or (min-width: 800px) {
h1 {
background-color: green;
}
} */
/* 否定运算符 */
/* @media not screen {
h1 {
background-color: green;
}
} */
/* 肯定运算符(可以用在处理ie兼容性问题的地方(如:认识screen,不认识and,导致样式乱了)) */
@media only screen and (width: 800px) {
h1 {
background-color: green;
}
}
</style>
</head>
<body>
<h1>带带大师兄</h1>
</body>
</html>4. 媒体查询—常用的阈值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>媒体查询_常用的阈值</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/small.css">
<link rel="stylesheet" href="./css/middle.css">
<link rel="stylesheet" href="./css/large.css">
<link rel="stylesheet" media="screen and (min-width: 1200px)" href="./css/huge.css">
</head>
<body>
<h1>带带大师兄</h1>
</body>
</html>
评论 (0)