转自 https://waliblog.com/css/2018/03/19/compatible.html
PC端网站一般我们都是以1366 +1200版心线来实现的，对于特殊需求，需要使用rem的适配方案，特此记录下
记录下方案：
以1920设计稿为基准
1、使用sass语法 转换px rem ，静态站点推荐使用我之前提到的 vscode插件easy-scss
https://www.cnblogs.com/joyZ/p/13342794.html
// PX 转 rem
@function px2Rem($px, $base-font-size: 18px) { @if (unitless($px)) { //有无单位 @return ($px / 19.2) * 1rem; } @else if (unit($px) == em) { @return $px; } @return ($px / $base-font-size) * 1rem; }
2、设置媒体查询
@media screen and (max-width: 1920px) {
html {
font-size: 19.2px;
}
}
@media screen and (max-width: 1680px) {
html {
font-size: 16.8px;
}
}
@media screen and (max-width: 1380px) {
html {
font-size: 14.4px;
}
}
@media screen and (max-width: 1300px) {
html {
font-size: 12.8px;
}
}
3、还原设计稿
设计稿70px 高度对应 height: px2Rem(70px);