长屏适配
单页适配
参考
前言
曾经屏幕适配一直是个头疼的问题,各种坑,各种浏览器&设备兼容问题,好在的是,随着技术&标准的不断发展,这个问题得到了极大程度的解决,这篇文章主要对之前开发过程中的屏幕适配问题做个的简单总结,包括两个部分。
长屏适配
得益于CSS样式中vh&vw单位的支持普及,终于可以放心大胆的使用了,避免使用相对繁琐的scale
、em
、rem
。
如图所示:
vh:将window.innerHeight
分成100份,即1vh
等于window.innerHeight
的1%
vw:将window.innerWidth
分成100份,即1vw
等于window.innerWidth
的1%
注意:长度包括滚动条
注意:长度包括滚动条
注意:长度包括滚动条
然后,我们就可以放心的使用vw当做长度单位来进行排版啦,因为在长屏的情况下,高度我们不在意(因为高度随页面内容变化),而元素会随着宽度的变化而变化。
以750x1334的设计稿为例,750/100=7.5px,那么1vw=7.5px,在排版的时候,根据这个单位换算即可。
列表项
列表项
列表项
列表项
列表项
列表项
列表项
列表项
那么有同学可能有疑问了,vw
和%
百分比有啥区别?在我看来,主要有2个。
1、百分比是定义基于包含块(父元素)宽度的百分比宽度,受到position
属性的影响。而vw永远以浏览器可视区为基准。
2、百分比只能用于width和height,而vw可以用于任何以大小为单位的属性,例如font-size
,这样就非常方便了。
单页适配
与长屏不同的是,类似单页H5小游戏,H5单页滚屏展示等,我们需要在屏幕内将页面完整的展现出来,这就没法使用vw了,因为我们需要根据设计图比例,保证单页完整动态计算和限制页面的展示大小展示,而vw无法做单一限制,这时js+百分比就派上用场了。
以微信中的单页活动展示为例,去掉64px的顶部导航,设计图定为750*1206。
有2种情况:
1、当屏幕宽度大于设计稿时
为了保证单页完整显示,需要以高度为基准,动态计算出宽度,居中显示
2、当屏幕宽度小于设计稿时
为了保证单页完整显示,需要以宽度为基准,动态计算出高度,居中显示
字体大小,也可根据缩放比例,动态计算px
示例代码如下:传送门
列表项
列表项
列表项
参考
https://developer.mozilla.org/en-US/docs/Web/CSS/length#vw
https://github.com/amfe/lib-flexible
https://www.w3cplus.com/css/vw-for-layout.html