随手挖坑记录一

碰到个1920px宽度并且内容全部塞得满满的直播间页面，思考了一下为了小屏幕电脑用了rem。并且媒体查询这样写。

@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);}

自信满满布局完。产品经理跟我说他那边浏览器显示我这个页面不正常。

WTF？？？？

看了下浮动内容大多折行了。于是把右浮的几个模块绝对定位，这次总不会掉了吧。但是还是显示的很奇怪。。。。

后来总算想起来我这里做的媒体查询基本针对移动端的，就加了一个pc端尺寸，显示当然会奇怪。。。后来就把媒体查询给加上了。。。

计算器敲了半天真捉急。。。
成果

/*@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;}
}*/
@media screen and (min-width:960px){html{font-size:50px;}
}
@media screen and (min-width:1024px){html{font-size:53px;}
}
@media screen and (min-width:1366px){html{font-size:70px;}
}
@media screen and (min-width:1680px){html{font-size:88px;}
}
@media screen and (min-width:1920px){html{font-size:99px;}
}

总结，电脑端页面rem适配不要忘了加上那几个尺寸。。。目前没听到产品经理哔哔。这个问题应该解决了。

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