@media,手机端

.a{
width: 200px;
height: 200px;
border: 1px;
background-color: #0000FF;
}

使用media时需要在head标签里加上

<meta name="viewport" content="width=device-width(设备的宽度),initial-scale=1.0"(缩放比例)/>

电脑的样式,大的向小的写 
 @media screen and (max-width:1200px) {
.a{
display: none;
}
}
@media screen and (max-width:992px) {
.a{
display: none;
}

/* 手机 750,640*/
/* @media screen and (max-width:768px) {
.a{
display: none;
}
}*/

手机端

html{
font-size: 13.333333333vw;/* 每100像素占这些 */100/750*100等于字体大小 750是设计图宽度,字体单位是vm
}
div{
width: 3rem;/* 像素除100 */手机端页面宽度除以100,获得页面宽度单位是rem
}

posted @ 2020-04-22 16:41  wangmeihao  阅读(536)  评论(0)    收藏  举报