1,媒体查询-媒体类型
代码演示
<style>
h1{
width: 600px;
height: 400px;
margin: 0 auto;
text-align: center;
line-height: 400px;
background-image: linear-gradient(30deg,red,yellow,green);
color: white;
font-size: 100px;
text-shadow: 0 0 10px black;
}
/* 只有在打印机或打印预览才应用的样式 */
@media print{
h1{
background-color: transparent;
}
}
/* 只有在屏幕上才应用的样式 */
@media screen {
h1{
font-family: '翩翩体-简';
}
}
@media all{
h1{
color: red;
}
}
</style>
</head>
<body>
<h1>新年快乐</h1>
</body>
2,媒体查询-媒体特性
总结
代码演示
<style>
*{
margin: 0;
padding: 0;
}
h1{
height: 200px;
background-color: gray;
text-align: center;
line-height: 200px;
font-size: 100px;
}
/* 检测到视口的宽度800,应用如下样式 */
@media (width:800px){
h1{
background-color: green;
}
}
/* 检测到视口的宽度小于等于700,应用如下样式 */
@media (max-width:700px){
h1{
background-color: orange;
}
}
/* 检测到视口的宽度大于等于900,应用如下样式 */
@media (min-width:900px){
h1{
background-color: pink;
}
}
/* 检测到视口的高度等于600,应用如下样式 */
@media (height:600px){
h1{
background-color: yellow;
}
}
/* 检测到屏幕的宽度等于1536,应用如下样式 */
@media (device-width:1536px){
h1{
color: white;
}
}
</style>
</head>
<body>
<h1>你好啊</h1>
</body>
3,媒体查询-运算符
总结
代码演示
<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: orange;
}
} */
/* @media screen and (min-width:700px) and (max-width:800px) {
h1{
background-color: orange;
}
} */
/* 或运算符 */
/* @media (max-width:700px) or (min-width:800px) {
h1{
background-color: orange;
}
} */
/* @media screen and (max-width:700px) or (min-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>
4,媒体查询-常用阈值
总结
代码演示
<style>
*{
margin: 0;
padding: 0;
}
h1{
height: 200px;
background-color: gray;
text-align: center;
line-height: 200px;
font-size: 100px;
}
@media screen and (max-width:768px) {
h1{
background-color: orange;
}
}
@media screen and (min-width:768px) and (max-width:992px){
h1{
background-color: green;
}
}
@media screen and (min-width:992px) and (max-width:1200px) {
h1{
background-color: yellow;
}
}
@media screen and (min-width:1500px) {
h1{
background-color: blueviolet;
}
}
</style>
</head>
<body>
<h1>你好啊</h1>
</body>