vueCli3实现图片自适应高度兼容iphoneX等手机

上一篇讲用TS动态去获取元素的高度有时候会出现获取的高度和页面高度不匹配的情况,因为有些刘海屏的手机计算高度会有些不同所以获取的高度就不同,这个时候可以采用布局的方式把图片铺满页面不用TS去动态获取了,代码如下:


页面结构样式

把背景图片作为img插入页面并且给外面的download_main_box设置position定位, 给图片设置高度100%,这里注意给子元素设置height:100%父元素也一定要设置1height:00%不然不会生效的。

页面内容部分用个download_content_box包起来并且设置position定位,这样里面就可以正常布局了


样式代码


样式是采用less编写的其实和普通的css也没有区别布局都是一样的,希望以上内容对你们能有所帮助

你可能感兴趣的:(vueCli3实现图片自适应高度兼容iphoneX等手机)