不同尺寸设计图 rem 断点数据记录

320px宽的设计图

@media screen and (min-width: 320px) {
    html {
        font-size: 100px;
    }
}
 
@media screen and (min-width: 360px) {
    html {
        font-size: 112.5px;
    }
}
 
@media screen and (min-width: 400px) {
    html {
        font-size: 125px;
    }
}
 
@media screen and (min-width: 440px) {
    html {
        font-size: 137.5px;
    }
}
 
@media screen and (min-width: 480px) {
    html {
        font-size: 150px;
    }
}
 
@media screen and (min-width: 640px) {
    html {
        font-size: 200px;
    }
}
 
html {
    font-size: 31.25vw;
}

640宽的设计图

@media screen and (min-width:320px){html{font-size:50px;}
}
@media screen and (min-width:360px){html{font-size:56px;}
}
@media screen and (min-width:400px){html{font-size:63px;}
}
@media screen and (min-width:440px){html{font-size:69px;}
}
@media screen and (min-width:480px){html{font-size:75px;}
}
@media screen and (min-width:640px){html{font-size:100px;}
}
html{font-size:-webkit-calc(100vw/6.4);font-size:calc(100vw/6.4);}

1080宽【莫名其妙的尺寸】

@media screen and (min-width: 320px) {
    html {
        font-size: 30px;
    }
}
 
@media screen and (min-width: 360px) {
    html {
        font-size: 33px;
    }
}
 
@media screen and (min-width: 400px) {
    html {
        font-size: 37px;
    }
}
 
@media screen and (min-width: 440px) {
    html {
        font-size: 41px;
    }
}
 
@media screen and (min-width: 480px) {
    html {
        font-size: 44px;
    }
}
html {
font-size: -webkit-calc(100vw/10.8);
font-size: calc(100vw/10.8);
}

@media screen and (min-width: 640px) {
    html {
        font-size: 60px;
    }
}

1920px

@media screen and (min-width:320px){html{font-size:16px;}
}
@media screen and (min-width:360px){html{font-size:18px;}
}
@media screen and (min-width:400px){html{font-size:20px;}
}
@media screen and (min-width:440px){html{font-size:22px;}
}
@media screen and (min-width:480px){html{font-size:25px;}
}
@media screen and (min-width:640px){html{font-size:33px;}
}
html{font-size:-webkit-calc(100vw/19.2);font-size:calc(100vw/19.2);}

 

转载于:https://www.cnblogs.com/liyinSakura/p/5751788.html