返回

<br>10rem不全屏？安卓手机页面布局优化指南

前端

关键词：


使用flexible的布局方案后，部分安卓手机会出现10rem不能填充满整个页面宽度的情况，或小于页面宽度，或大于页面宽度。笔者在vivo x21上发现10rem小于页面宽度，而在galaxy note5上又发现10rem大于页面宽度。 10rem的宽度是1069，而页面宽度是1080，出现小于的情况；而galaxy note5的页面宽度是1440，出现大于的情况。

解决方案 1：设置视窗宽度

可以通过设置视窗宽度来解决这个问题。在<head>标签中添加<meta>标签：

<meta name="viewport" content="width=device-width, initial-scale=1">

这样可以将视窗宽度设置为设备宽度，从而解决10rem小于或大于页面宽度的问题。

解决方案 2：使用媒体查询

还可以使用媒体查询来解决这个问题。在CSS文件中添加以下媒体查询：

@media screen and (max-width: 1080px) {
  body {
    width: 100%;
  }
}

这样可以将视窗宽度设置为小于或等于1080px的设备的宽度为100%，从而解决10rem小于页面宽度的问题。

解决方案 3：优化页面布局

如果以上两种方法都不能解决问题，可以尝试优化页面布局。可以尝试使用flexbox或grid布局来布局页面，并使用百分比或vw单位来设置元素的宽度。

示例代码

使用flexbox布局：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.item {
  flex: 1 1 auto;
}

使用grid布局：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}

.item {
  grid-column: span 1;
}