廊坊做网站哪家好,企业网站如何备案流程,学校网站建设分工,代理网店怎么做在进行媒体查询的编写的时候#xff0c;我们可以利用scss与与编译器#xff0c;通过include混入的方式对代码进行简化#xff0c;从而大大提高了代码的可维护性#xff0c;也减少了代码的编写量#xff0c;废话不多说#xff0c;直接上代码#xff1a;
// 断点列表 相当…在进行媒体查询的编写的时候我们可以利用scss与与编译器通过include混入的方式对代码进行简化从而大大提高了代码的可维护性也减少了代码的编写量废话不多说直接上代码
// 断点列表 相当于js中的数组只不过这里数组用()表示
$breakpoints: (phone: (320px,480px,),pad: (481px,768px,),notebook: (769px,1024px,),pc: (1025px,1200px,),// 大屏tv: 1201px,
);
// 混合
mixin respond-to($breakname) {// map-get函数可以拿到上面定义的map数组中的值$bp: map-get($breakpoints, $breakname);// type-of用于判断上面的键是否是数组/列表类型if type-of($bp) list {$min: nth($bp, 1); // 拿到设备尺寸的最小值, 列表中的第一个值$max: nth($bp, 2); // 拿到设备尺寸的最大值, 列表中的第二个值// 最小值 and 最大值media (min-width: $min) and (max-width: $max) {// 类似于vue中的插槽在此处挖一个坑外面可以往里面传入不同的css样式// 比如下面代码示例中传入的是heigth的值content;}} else {media (min-width: $bp) {content;}}
}// 编写scss代码
.header {display: flex;width: 100%;background-color: pink;include respond-to(phone) {height: 50px;}include respond-to(pad) {height: 60px;}include respond-to(notebook) {height: 80px;}include respond-to(pc) {height: 100px;}include respond-to(tv) {height: 200px;}
}最终编译的结果
.header {display: flex;width: 100%;background-color: pink;
}media (min-width: 320px) and (max-width: 480px) {.header {height: 50px;}
}media (min-width: 481px) and (max-width: 768px) {.header {height: 60px;}
}media (min-width: 769px) and (max-width: 1024px) {.header {height: 80px;}
}media (min-width: 1025px) and (max-width: 1200px) {.header {height: 100px;}
}media (min-width: 1201px) {.header {height: 200px;}
}如此一来编写响应式布局就变得十分方便了~
