移动端自适应布局解决方案(基于vw布局)
本文参考自张鑫旭大神的文章:http://www.zhangxinxu.com/wordpress/2016/08/vw-viewport-responsive-layout-typography/
在移动端进行布局时,为了兼容不同的设备屏幕,往往是使用媒体查询,设置几个断点,让其在不同的屏幕大小时展示不同效果,但是这样做的效果并不好,也不能很好的达到不同屏幕完美适应的问题。
下面的这个解决方案是基于张鑫旭博客给出的布局方案,使用vw
视口宽度来兼容不同的设备。
$browser-default-font-size: 16px !default;
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
@mixin pxCalc($property, $values...) {
$max: length($values);
$pxValues: '';
$remValues: '';
@for $i from 1 through $max {
$value: strip-units(nth($values, $i));
$browser-default-font-size: strip-units($browser-default-font-size);
$pxValues: #{$pxValues + $value}px;
@if $i < $max {
$pxValues: #{$pxValues + " "}
}
@for $i from 1 through $max {
$value: strip-units(nth($values, $i));
$remValues: #{$remValues + $value / strip-units($browser-default-font-size)}rem;
@if $i < $max {
$remValues: #{$remValues + " "};
}
}
}
#{$property}: $pxValues;
#{$property}: $remValues;
}
html {
font-size: $browser-default-font-size;
}
@media screen and (min-width: 375px) {
html {
font-size: calc(100% + 2 * (100vw - 375px) / 39);
font-size: calc(16px + 2 * (100vw - 375px) / 39);
}
}
@media screen and (min-width: 414px) {
html {
font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
font-size: calc(18px + 4 * (100vw - 414px) / 586);
}
}
@media screen and (min-width: 600px) {
html {
font-size: calc(125% + 4 * (100vw - 600px) / 400);
font-size: calc(20px + 4 * (100vw - 600px) / 400);
}
}
@media screen and (min-width: 1000px) {
html {
font-size: calc(137.5% + 5 * (100vw - 1000px) / 1000);
font-size: calc(22px + 5 * (100vw - 1000px) / 1000);
}
}
为了方便计算,使用sass来实现效果。
比如如下的样式
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
padding: 15px;
}
可以修改为
.box {
@include pxCalc(width, 200px);
@include pxCalc(height, 200px);
border: 1px solid #000;
@include pxCalc(padding, 15px);
}
编译之后的结果如下:
.box {
width: 200px;
width: 12.5rem;
height: 200px;
height: 12.5rem;
border: 1px solid #000;
padding: 15px;
padding: 0.9375rem;
}
这样就能实现了缩放网页时,达到有点类似于缩放图片的效果,布局不会出现错乱,完美兼容各种屏幕。
如果您觉得本文对您有用,欢迎捐赠或留言~
- 本博客所有文章除特别声明外,均可转载和分享,转载请注明出处!
- 本文地址:https://www.leevii.com/?p=908