<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>100.media</title>
<style>
/*
需求:
大于等于1200px的时候pc
大于等于768px的时候pad
大于等于414px的时候iphone6Plus
大于等于375px的时候iphone6
大于等于320px的时候iphone4
*/
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
background: yellowgreen;
margin: auto;
}
@media screen and (min-width: 320px){
.box:after{
display: block;
content: "iphone4";
text-align: center;
font-size: 60px;
}
}
@media screen and (min-width: 375px){
.box:after{
display: block;
content: "iphone6";
text-align: center;
font-size: 60px;
}
}
@media screen and (min-width: 414px){
.box:after{
display: block;
content: "iphone6Plus";
text-align: center;
font-size: 60px;
}
}
/*min-width:768px,最小尺寸768px,相当于大于等于768px*/
@media screen and (min-width: 768px){
.box:after{
display: block;
content: "pad";
text-align: center;
font-size: 60px;
}
}
@media screen and (min-width: 1200px){
.box:after{
display: block;
content: "pc";
text-align: center;
font-size: 60px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
