![9e7a429dc72effee7552161a9a9bfae9.gif](https://img-blog.csdnimg.cn/img_convert/9e7a429dc72effee7552161a9a9bfae9.gif)
自适应目前已经是很多项目的标配了,查看各种开源框架都可以发现类似的代码,那么背后的原理是什么呢?在不引入外部 CSS
模块的情况下,我们又该如何去实现自己的自适应模块呢?以下是我的一些实践。
在 CSS
中,通过 @media
属性来实现屏幕宽度查询,其原始代码如下:
.autoScreen {
background-color: #ffffff; // 背景色为 #ffffff
}
@media (min-width: 576px) {
.autoScreen {
background-color: #aaaaaa; // 当屏幕宽度大于 576px 时,背景色为 #aaaaaa
}
}
@media (min-width: 1024px) {
.autoScreen {
background-color: #000000; // 当屏幕宽度大于 1024px 时,背景色为 #000000
}
}
如此书写的麻烦在于需要不停的记忆各种像素的大小,那么借助 Sass
我们就可以写出更表意的写法:
$mobile-width: 0;
$pad-width: 576px;
$pc-width: 1024px;
@mixin mobile {
@media (min-width: $mobile-width) {
@content;
}
}
@mixin pad {
@media (min-width: $pad-width) {
@content;
}
}
@mixin pc {
@media (min-width: $pc-width) {
@content;
}
}
.autoScreen {
background-color: #fff;
width: 100%;
height: 100%;
@include pad {
background-color: #aaa;
}
@include pc {
background-color: #000;
}
}
这样在个人项目中,css代码将会被更好的组织起来,如果有更多宽度的屏幕区别,也可以使用很多框架中使用的诸如 sm
md
lg
等来表达宽度。
相关链接
Sass教程 Sass中文文档 | Sass中文网