Article directory
1. What is css self-media query
Using the @media query, you can define different styles for different media types.
@media can set different styles for different screen sizes, especially if you need to set up a responsive page, @media is very useful.
When you reset the browser size, the page will also be re-rendered based on the browser's width and height.
2. Usage
@media mediatype and|not|only (media feature) {
CSS-Code;
}
3. Code explanation
@media screen and (max-width: 768px) {
//当屏幕宽度小于768px时使用以下的样式代码
.div{
background-color: blue;
}
}
@media (min-width:769px) and (max-width: 1440px) {
//当屏幕宽度大于768px小于1440px时使用以下样式代码
.div{
background-color: yellow;
}
}
4. Effect display
1.Normal resolution
2. When the screen width is less than 768px
3. When the screen width is between 768px and 1440px
4. Complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自媒体查询</title>
</head>
<body>
<div class="div">
text
</div>
</body>
<style type="text/css">
.div{
text-align: center;
width: 500px;
height: 500px;
background-color: red;
}
@media only screen and (max-width: 768px){
.div{
background-color: blue ;
}
}
@media (min-width:768px) and (max-width: 1440px) {
.div{
background-color: yellow;
}
}
</style>
</html>
5. We-media query the width of some commonly used devices
Mobile phone, less than 768px
tablet, greater than or equal to 768px
desktop monitor, greater than or equal to 992px
large desktop monitor, greater than or equal to 1200px
/**iphone5*/
@media (min-width: 320px) {
.component {
width: 300px;
background: #00ffff;
font-size: 23px;
}
}
/**iphone6*/
@media (min-width: 375px) {
.component {
width: 360px;
background: #0000ff;
font-size: 26px;
}
}
/**iphone6*/
@media (min-width: 375px) and (min-resolution: 192dpi) {
.component {
background-image: url(/img/retina2x.png);
background: #6666ff;
}
}
/**pc*/
@media (max-width: 480px) {
.component {
background: #00ff00;
}
}
/**pc*/
@media (max-width: 767px) {
.component {
background: #00ff00;
}
}
/**pc*/
@media (min-width: 768px) and (max-width: 979px) {
.component {
width: 600px;
background: #00ff00;
font-size: 30px;
}
}
/**pc*/
@media (max-width: 979px) {
.component {
background: #00fff0;
}
}
/**pc*/
@media (min-width: 980px) {
.component {
width: 900px;
background: #00ff00;
font-size: 35px;
}
}
/**pc*/
@media (min-width: 1200px) {
.component {
width: 1000px;
background: #00ff00;
}
}