文章目录
一、什么是css自媒体查询
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
二、用法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
三、代码解释
@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;
}
}
四、效果展示
1.正常分辨率
2.当屏幕宽度小于768px时
3.当屏幕宽度在768px与1440px之间
4.完整代码
<!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>
五、自媒体查询一些常用设备宽度
手机,小于 768px
平板,大于等于 768px
桌面显示器,大于等于 992px
大桌面显示器,大于等于 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;
}
}