适配方案vw vh

vw:相对于视窗的宽度[视窗的宽度是100vw]【视窗window.innerWidth】

vh:相对于视窗的高度[视窗的高度是100vh]

vmin:视口宽度或高度,选择小的那个

vmax:视口宽度或高度,选择大的那个

与stylus结合使用vw vh 单位

以iphone6尺寸作为基准

$vw_base = 750

vw_count(x)

      (x / 750)*100vw

.item

    height vw_count(100)  //在设计图上item元素高度为100

    line-height vw_count(100)

rem和vw vh结合实现布局优化

给根元素设置随着饰扣变化而变化的vw单位,实现动态改变其大小

限制根元素字体大小的最大最小值,配合body加上最大宽度和最小宽度

以psd750尺寸作为基准

$vw_fontsize = 75

rem($px)

    ($px / $vw_font-size) * 1rem     // 1rem 对应设计图的尺寸为75px

html{

    font-size : 10vw //  ( 75px / 750 ) * 100vw

}

.item

    height  rem(100)  //在设计图上item元素的告诉为100px

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容