分别适应不同移动端宽度
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;
}