rem+媒体查询解决移动端

分别适应不同移动端宽度

320px，360px，375px，414px，540px，640px，750px

min-width:320px意思是选择屏幕宽度大于320px
@media screen and (min-width:320px) {
/psdWidth:750px 预设字体基础值 100px 1rem=100px/

html{
font-size: 42.67px;

}

@media screen and (min-width:360px) {

html{
font-size: 48px;

}

}

@media screen and (min-width:375px) {

html{
font-size: 50px;

}

}

@media screen and (min-width:414px) {

html{
font-size: 55.2px;

}

}
@media screen and (min-width:540px) {

html{
font-size: 72px;

}

}
@media screen and (min-width:640px) {

html{
font-size: 55.2px;

}

}

@media screen and (min-width:750px) {

html{

font-size: 100px;

}

}
}
.a
{
不同的屏幕宽度，1rem=不同的px值
这里的元素a在不同宽度的屏幕下对应的大小就会改变
width: 1rem;
height: 1rem;
background-color: aqua;
}