碰到个1920px宽度并且内容全部塞得满满的直播间页面，思考了一下为了小屏幕电脑用了rem。并且媒体查询这样写。
@media screen and (min-320px){html{font-size:16px;} } @media screen and (min-360px){html{font-size:18px;} } @media screen and (min-400px){html{font-size:20px;} } @media screen and (min-440px){html{font-size:22px;} } @media screen and (min-480px){html{font-size:25px;} } @media screen and (min-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-320px){html{font-size:16px;} } @media screen and (min-360px){html{font-size:18px;} } @media screen and (min-400px){html{font-size:20px;} } @media screen and (min-440px){html{font-size:22px;} } @media screen and (min-480px){html{font-size:25px;} } @media screen and (min-640px){html{font-size:33px;} }*/ @media screen and (min-960px){html{font-size:50px;} } @media screen and (min-1024px){html{font-size:53px;} } @media screen and (min-1366px){html{font-size:70px;} } @media screen and (min-1680px){html{font-size:88px;} } @media screen and (min-1920px){html{font-size:99px;} }
总结，电脑端页面rem适配不要忘了加上那几个尺寸。。。目前没听到产品经理哔哔。这个问题应该解决了。