浅谈移动端的自适应布局问题(响应式、rem/em、Js动态)

移动端自适应布局问题是在不同屏幕尺寸的移动设备上保持网页布局始终合适的问题。常见的解决方案包括响应式、rem/em以及Js动态。

响应式布局

响应式布局是指适配不同宽度的屏幕，使用CSS3的媒体查询（Media Query）来给不同尺寸的设备设置不同的样式。通常响应式布局可以分成三份（移动端、平板、PC端）设置不同的CSS样式。

以两列布局为例，代码如下：

<div class="container">
  <div class="col-1">Column 1</div>
  <div class="col-2">Column 2</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.col-1 {
  flex: 1;
  padding: 10px;
  background-color: blue;
  color: #fff;
}

.col-2 {
  flex: 1;
  padding: 10px;
  background-color: red;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .col-1, .col-2 {
    width: 100%;
  }
}

在这段代码中，.container设置为flex布局，.col-1和.col-2设置为flex:1，使用flexbox实现两列布局。Media Query设置当屏幕宽度小于767px时，使.col-1和.col-2的宽度变为100%。

rem/em布局

rem和em都是相对长度单位，rem是相对HTML根元素的字体大小，而em是相对于自身父元素的字体大小。这两种相对长度单位可以让开发者根据不同屏幕的尺寸自适应地设置元素的大小。

以一个按钮为例，代码如下：

<button class="btn">Click me</button>

.btn {
  font-size: 1rem;
  padding: 0.5em 1em;
  border: solid 1px #eee;
  background-color: #fff;
  color: #333;
}

@media screen and (max-width: 767px) {
  .btn {
    font-size: 2rem;
  }
}

在这段代码中，.btn的字体大小设置为1rem，这个1rem相对于HTML根元素的字体大小。在Media Query设置中，当屏幕宽度小于767px时，.btn的字体大小变为2rem，即根据屏幕尺寸自适应地调整。

Js动态布局

使用JavaScript动态地设置元素的大小也是一种常用的自适应布局方式。

以设置元素高度为屏幕高度的一半为例，代码如下：

<div class="container">
  <div class="box"></div>
</div>

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 50%;
  background-color: blue;
}

@media screen and (max-width: 767px) {
  .box {
    width: 100%;
  }
}

var box = document.querySelector('.box');
box.style.height = window.innerHeight / 2 + 'px';

window.addEventListener('resize', function () {
  box.style.height = window.innerHeight / 2 + 'px';
});

在这段代码中，.container设置为100vh高度的flex布局，.box的宽度设置为50%以及蓝色背景。JavaScript动态地设置.box的高度，通过window.innerHeight获取屏幕高度，将.box的高度设置为屏幕高度的一半。同时使用window.addEventListener监听resize事件，当屏幕尺寸发生变化时重新设置.box的高度。