PC端网站 rem适配方案

以1920设计稿为准
1、使用sass语法 转换px rem ， vscode编辑器安装插件easy-scss
安装之后打开插件setting.json， 在setting.json里配置转换后css的路径 “easysass.targetDir”: “./css”

创建css文件、scss文件：

项目中如何使用index.scss文件：
$yellow: yellow;
$theme: blue;
$orange: orange;
$red: red;

// PX 转 rem
@function px2Rem($px, KaTeX parse error: Expected '}', got 'EOF' at end of input: … @if (unitless(px)) {
//有无单位
@return (KaTeX parse error: Expected 'EOF', got '}' at position 24: …2) * 1rem; }̲ @else if (unit…px) == em) {
@return KaTeX parse error: Expected 'EOF', got '}' at position 9: px; }̲ @return (px / $base-font-size) * 1rem;
}

.nav p{
font-size: px2Rem(12px);
color: $red;
}

easy-scss 自动编译后的index.css：
.nav p {
font-size: 0.66667rem;
color: red;
}

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、代码热更新插件：Liver Serve （写完后页面会自动更新，不用再刷新了）