前端:用Sass简化媒体查询
在进行媒体查询的编写的时候,我们可以利用scss与与编译器,通过@include混入的方式对代码进行简化,从而大大提高了代码的可维护性,也减少了代码的编写量,废话不多说,直接上代码
(图片来源网络,侵删)
// 定义设备数值 $breakpoints: ( 'phone': (320px, 480px), 'ipad': (481px, 768px), 'notebook': (769px, 1024px), 'pc': 1205px ); // sass 混合 @mixin respnseTo($breakname) { // map-get:从对应键值对中获取数据, $bp: map-get($breakpoints, $breakname); // 判断 $bp 是 list,还是单个值 @if type-of($bp) == 'list' { // 从 list 中获取第一项和第二项数据 $min: nth($bp, 1); $max: nth($bp, 2); @media (min-width: $min) and (max-width: $max) { // @content:混入其他的数据 @content; } } @else { @media (min-width: $bp) { @content; } }; } .container { width: 100%; @include respnseTo('phone') { height: 50px; } @include respnseTo('ipad') { height: 60px; } }
最后编译结果:
@media (min-width: 320px) and (max-width: 480px) { .header { height: 50px; } } @media (min-width: 481px) and (max-width: 768px) { .header { height: 60px; } }
(图片来源网络,侵删)
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...