如何实现px和rem完美转换
答案:1 悬赏:10 手机版
解决时间 2021-11-28 09:06
- 提问者网友：姑娘长的好罪过
- 2021-11-27 14:47
如何实现px和rem完美转换
最佳答案
- 五星知识达人网友：春色三分
- 2021-11-27 14:57
1.首先要确认UI的设计稿的基准是按照哪种设备宽度的机型设计的，通常的设计稿是按照iphone6 plus也就是宽度750px来设计的。这样我们拿到手之后就要把如下的responsive.css中的 @media screen and (min-width: 320px) 设置成为font-size: 100px;
2.引入responsive.css成功后，之后在写页面样式的时候就可以按照 设计稿上显示宽度 除以 2 除以 100 得到。例如：100px/2/100 = 0.5rem;
@media screen and (min-width: 320px) {
html {
font-size: 84.375px!important;
}
}
@media screen and (min-width: 330px) {
html {
font-size: 87.5px!important;
}
}
@media screen and (min-width: 340px) {
html {
font-size: 90.625px!important;
}
}
@media screen and (min-width: 350px) {
html {
font-size: 93.75px!important;
}
}
@media screen and (min-width: 360px) {
html {
font-size: 96.875px!important;
}
}
@media screen and (min-width: 370px) {
html {
font-size: 100px!important;
}
}
@media screen and (min-width: 380px) {
html {
font-size: 103.125px!important;
}
}
@media screen and (min-width: 390px) {
html {
font-size: 106.25px!important;
}
}
@media screen and (min-width: 400px) {
html {
font-size: 109.375px!important;
}
}
@media screen and (min-width: 410px) {
html {
font-size: 112.5px!important;
}
}
@media screen and (min-width: 420px) {
html {
font-size: 115.625px!important;
}
}
@media screen and (min-width: 430px) {
html {
font-size: 117.75px!important;
}
}
@media screen and (min-width: 440px) {
html {
font-size: 120.875px!important;
}
}
@media screen and (min-width: 450px) {
html {
font-size: 124px!important;
}
}
@media screen and (min-width: 460px) {
html {
font-size: 127.125px!important;
}
}
@media screen and (min-width: 470px) {
html {
font-size: 130.25px!important;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 133.375px!important;
}
}
@media screen and (min-width: 490px) {
html {
font-size: 136.5px!important;
}
}
@media screen and (min-width: 500px) {
html {
font-size: 139.625px!important;
}
}
@media screen and (min-width: 639px) {
html {
font-size: 142.75px!important;
}
}
@media screen and (min-width: 719px) {
html {
font-size: 135.875px!important;
}
}
@media screen and (max-width: 319px) {
html {
font-size: 84.375px!important;
}
}
2.引入responsive.css成功后，之后在写页面样式的时候就可以按照 设计稿上显示宽度 除以 2 除以 100 得到。例如：100px/2/100 = 0.5rem;
@media screen and (min-width: 320px) {
html {
font-size: 84.375px!important;
}
}
@media screen and (min-width: 330px) {
html {
font-size: 87.5px!important;
}
}
@media screen and (min-width: 340px) {
html {
font-size: 90.625px!important;
}
}
@media screen and (min-width: 350px) {
html {
font-size: 93.75px!important;
}
}
@media screen and (min-width: 360px) {
html {
font-size: 96.875px!important;
}
}
@media screen and (min-width: 370px) {
html {
font-size: 100px!important;
}
}
@media screen and (min-width: 380px) {
html {
font-size: 103.125px!important;
}
}
@media screen and (min-width: 390px) {
html {
font-size: 106.25px!important;
}
}
@media screen and (min-width: 400px) {
html {
font-size: 109.375px!important;
}
}
@media screen and (min-width: 410px) {
html {
font-size: 112.5px!important;
}
}
@media screen and (min-width: 420px) {
html {
font-size: 115.625px!important;
}
}
@media screen and (min-width: 430px) {
html {
font-size: 117.75px!important;
}
}
@media screen and (min-width: 440px) {
html {
font-size: 120.875px!important;
}
}
@media screen and (min-width: 450px) {
html {
font-size: 124px!important;
}
}
@media screen and (min-width: 460px) {
html {
font-size: 127.125px!important;
}
}
@media screen and (min-width: 470px) {
html {
font-size: 130.25px!important;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 133.375px!important;
}
}
@media screen and (min-width: 490px) {
html {
font-size: 136.5px!important;
}
}
@media screen and (min-width: 500px) {
html {
font-size: 139.625px!important;
}
}
@media screen and (min-width: 639px) {
html {
font-size: 142.75px!important;
}
}
@media screen and (min-width: 719px) {
html {
font-size: 135.875px!important;
}
}
@media screen and (max-width: 319px) {
html {
font-size: 84.375px!important;
}
}
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
点此我要举报以上问答信息
大家都在看
推荐资讯