让div自适应不同尺寸手机屏幕的两种方法

随着全面屏时代的到来，现在手机屏幕比例有很多种，在做H5页面时，怎么能让div撑满整个手机屏幕呢？在本文中，我们将介绍两种方法来实现这一目标。

方法一：针对只有一个DIV或者仅有一页内容的页面

首先，在HTML的`body`标签中添加一个`div`标签：

```html

```

然后，在CSS样式表中定义以下样式：

```css

* {

margin: 0;

padding: 0;

}

div {

width: 100%;

height: 100%;

background: ff0000;

position: absolute;

}

```

保存并刷新页面，您会发现`div`已经默认撑满了整个手机屏幕。

方法二：针对多个DIV的页面

如果页面中有多个`div`需要撑满屏幕，我们可以使用另一种方法。

首先，在HTML的`body`标签中添加一个父容器`div`：

```html

```

然后，在CSS样式表中定义以下样式：

```css

* {

margin: 0;

padding: 0;

}

.container {

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

}

.content {

flex: 1;

background: ff0000;

}

```

上述代码中，我们使用了flex布局，将父容器的高度设为100%，内部的`.content`元素会根据剩余空间等比例分配高度，从而实现了自适应的效果。

保存并刷新页面，您会发现所有的`.content`元素都撑满了整个手机屏幕。

总结

通过以上两种方法，我们可以让`div`元素自适应不同尺寸的手机屏幕。如果页面只有一个`div`或者仅有一页的内容，可以直接设置其宽高为100%；如果页面中有多个`div`，则可以使用flex布局来实现自适应效果。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。