html5中让div撑满不同尺寸手机屏幕的2种方法

来源：互联网 2023-03-16 19:11:51 286

随着全面屏时代的到来，现在手机屏幕比例有很多种，在做H5页面时，怎么能让div撑满整个手机屏幕？

工具/原料

如果我们整个页面只有一个DIV，或者说只有1屏的页面时，可以使用此方法。在body中加入div标签【div>/div>】,然后在style中定义样式【*{margin: 0;padding: 0;}】。

html5中让div撑满不同尺寸手机屏幕的2种方法

1本页面未经许可获取自百度经验

然后直接定义div样式【div{width: 100%;height: 100%;background: #ff0000;position: absolute;}】.保存后刷新页面，可以看到，已经默认撑满整个手机屏幕啦。

html5中让div撑满不同尺寸手机屏幕的2种方法

如果是比较复杂的页面，我们只需要第一屏撑满全屏，可以使用此方法。单独定义html和body的样式。【html,body{width: 100%;height: 100%;}】。

html5中让div撑满不同尺寸手机屏幕的2种方法

然后给DIV添加嵌套样式【.bg{width: 100%;height: 100%;background: #ff0000;}】并在DIV中引入bgCSS【div class="bg">/div>】保存页面后可以看到此时div也撑满屏幕了。

html5中让div撑满不同尺寸手机屏幕的2种方法

为了方便观察，我们在添加一个不同颜色的DIV【div class="content">/div>】并定义CSS【width: 10rem;height: 5rem;background: #ffea00;】。保存后网上滑屏，可以看到后添加的DIV也可以正常显示啦。

html5中让div撑满不同尺寸手机屏幕的2种方法

在浏览器开发者模式下，可以切换手机的型号，不同型号手机屏幕比例是不一样的哦，可以看到，从普通的16:9的屏幕切换到iphone7时，屏幕虽然变长了，但是下面的黄色div是不会显示出来的。

html5中让div撑满不同尺寸手机屏幕的2种方法

再切换到最新的全面屏iphone X 时，依然是红色的div撑满全屏的。

html5中让div撑满不同尺寸手机屏幕的2种方法

上滑屏幕后才会看到下面的其他div模块，这样就可以实现想要的效果啦。

html5中让div撑满不同尺寸手机屏幕的2种方法

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML