前端面试：谈谈你对移动端适配的认识

2023-05-26 今日头条 NativeBase

加入收藏

回答

移动端适配是指在不同的移动设备上展示相同的页面效果，以适应不同的屏幕分辨率和设备像素密度的要求。

常见的移动端适配方案有：

1.媒体查询：使用css3的媒体查询，根据不同屏幕宽度设置不同的样式，实现响应式布局。

2.百分比布局：使用百分比单位设置元素的宽度和高度，以适应不同屏幕分辨率的要求。

3.rem布局：使用相对单位rem，根据根元素字体大小设置其他元素的大小，可以实现根据设备像素密度适配不同的屏幕分辨率。

4.viewport：通过viewport标签设置设备的宽度和缩放比例，使网页在不同设备上展示相同的效果。

5.Flex 布局。

6.使用适配库如amfe-flexible，postcss-pxtorem等。

7.设备检测 Modernizr

简单介绍

1.REM布局

REM 是 CSS3 中的一个相对单位，它相对于根元素（html）的字体大小进行计算。

通过改变根元素的字体大小，来改变其他元素的尺寸，以此来实现布局的自适应。

<html>
  <head>
    <style>
      html {
        font-size: calc(100vw / 10); /* 假设设计稿宽度为750px, 1rem = 75px */
      }
      div {
        width: 1rem; /* div的宽度为75px */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

如何动态改变根元素的字体大小呢？

其实是搭配媒体查询来达到动态效果：

html {
  font-size: 16px; /* 默认字体大小 */
}

/* 当视口宽度小于600px时，改变字体大小 */
@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
}

/* 当视口宽度小于400px时，再次改变字体大小 */
@media (max-width: 400px) {
  html {
    font-size: 12px;
  }
}

由于rem是相对于<html>元素的字体大小，所以当我们改变<html>元素的字体大小时，所有使用rem单位的元素的大小也会随之改变。这使得我们可以根据视口的大小来调整页面的布局和元素的大小。

2.什么是 Modernizr？

Modernizr是一个JAVAScript库，它可以帮助你检测用户的浏览器是否支持你需要的HTML5和CSS3特性。

这样你就可以根据这些检测结果来决定你的代码是否要使用某个特性，或者提供一个备选方案。

if (Modernizr.canvas) {
  // 浏览器支持canvas
  // 在canvas上画图
} else {
  // 浏览器不支持canvas
  // 提供一个备选方案
}