1、媒体查询—媒体类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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: 0 0 10px black;
}
/* 只有打印机或打印预览才应用的样式 */
@media print{
h1{
background: transparent;
}
}
/* 只有在屏幕上才应用的样式 */
@media screen{
h1{
font-family: "翩翩体-简";
}
}
/* 一直应用的样式 */
@media all{
h1{
color: red;
}
}
</style>
</head>
<body>
<h1>新年快乐</h1>
</body>
</html>2、媒体特征
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
h1{
height: 200px;
background-color: gray;
line-height: 200px;
text-align: center;
font-size: 100px;
}
/* 等于 */
@media(width:800px){
h1{
background-color: antiquewhite;
}
}
/* 小于等于700px时 */
@media (max-width:700px){
h1{background-color: green;}
}
/* 大于等于900 */
@media(min-width:900px){
h1{
background-color: orange;
}
}
/* 根据屏幕大小 */
/* @media(device-width){
} */
</style>
</head>
<body>
<h1>你好啊</h1>
</body>
</html>3、运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
h1{
height: 200px;
background-color: gray;
line-height: 200px;
text-align: center;
font-size: 100px;
}
/* 且运算符 */
/* @media(min-wdith:700px) and (max-width:800px){
h1{
background-color: orange;
}
} */
/* 或运算符 */
@media screen and (min-width:700px) and (max-width:800px){
h1{
background-color: orange;
}
}
/* 否定运算符 */
@media not screen{
h1{
background-color: orange;
}
}
/* 肯定运算符 */
@media only screen{
h1{
background-color: orange;
}
}
</style>
</head>
<body>
<h1>你好啊</h1>
</body>
</html>
评论 (0)