以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 (写完后页面会自动更新,不用再刷新了)