@charset "UTF-8";
@mixin queryWidth($min, $max) {
@if $min == -1 {
@media screen and (max-width: $max+px) {
html {
font-size: ( ($max+1) / 375 ) * 100px;
}
}
} @else if $max == -1 {
@media screen and (min-width: $min+px) {
html {
font-size: ( $min / 375 ) * 100px;
}
}
} @else {
@media screen and (min-width: $min+px) and (max-width: $max+px) {
html {
font-size: ( $min / 375 ) * 100px;
}
}
}
}
@include queryWidth(-1, 319); // for iphone 4
@include queryWidth(320, 359); // for iphone 5
@include queryWidth(360, 374);
@include queryWidth(375, 383); // for iphone 6
@include queryWidth(384, 399);
@include queryWidth(400, 413);
@include queryWidth(414, -1); // for iphone 6 plus
media实现的rem为单位的响应式
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
