不管是面试还是工作过程中,移动端的布局都比较常见,而移动端适配方法也是多种多样。一般来说,主要还是从viewport、rem、百分比几个点下手。
一般来说,开发过程中,我们希望能够直接按照设计图来开发,不管设计图是两倍还是三倍图,能够直接写设计图尺寸而不需要换算,同时有高质的设计图还原度,想想都比较爽。
这里介绍一种使用vw和rem来布局的方案。
该方案思路主要是,设置视口宽度为设备宽度,使用vw来动态设置根元素的font-szie,同时使用sass的css function来实现设计尺寸转rem的功能,从而实现一套不需要js计算而自动设置根元素font-szie的rem布局。
vw
vw表示当前视口宽度的百分之一。
rem布局过程中依赖于根元素的font-size属性,而如果设置一个固定的font-size,再使用rem来布局,会导致小屏手机视觉上觉得网页被放大,而大屏手机上则显得网页布局稀疏。
所以咱们需要根据收据的屏幕大小等比的设置font-size,从而实现大小屏手机视觉一致的效果。实现这个功能可以使用js在页面载入时,读取屏幕宽度,再根据设计图标准宽度做一些转换。
而使用vw天然就是一个根据屏幕宽度来做计算的长度单位,完美实现以上js计算功能。同时在移动端,vw的兼容性还不错,完全可以直接使用。
计算方法:
// 设计图标准根元素字体 / 设计图标准宽度 * 100
const vw = 16