做一个scss的pc端适配
时间: 2023-06-02 15:01:48 浏览: 72
首先,我们需要设置一个全局的基准字体大小,比如:
```scss
$base-font-size: 16px;
html {
font-size: $base-font-size;
}
```
这样我们就可以使用相对单位rem来进行适配了。接下来,我们可以使用媒体查询来对不同屏幕尺寸进行适配。
例如,对于小于等于768px的屏幕,我们可以设置为移动端样式:
```scss
@media screen and (max-width: 768px) {
// 移动端样式
}
```
对于大于768px的屏幕,我们可以设置为PC端样式:
```scss
@media screen and (min-width: 769px) {
// PC端样式
}
```
在PC端样式中,我们可以使用栅格系统来进行布局,例如:
```scss
.container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 1200px;
.col {
flex: 1 1 0;
padding: 0 15px;
&.col-1 {
flex-basis: 8.33%;
}
&.col-2 {
flex-basis: 16.67%;
}
// ...
&.col-12 {
flex-basis: 100%;
}
}
}
```
这样就可以实现PC端的栅格布局了。同时,我们也可以使用CSS3的flexbox和grid来进行布局,具体使用方式可以参考相关文档。
总之,通过设置全局的基准字体大小,配合媒体查询和栅格系统等布局方式,就可以实现一个基本的PC端适配了。