Next.js 实现移动端自适应布局的三种方式

随着移动端的普及，越来越多的网站需要实现移动端自适应布局。Next.js 作为一款流行的 React 框架，也可以实现移动端自适应布局。本文介绍了 Next.js 实现移动端自适应布局的三种方式，希望对前端开发者有所帮助。

什么是移动端自适应布局

移动端自适应布局是指网站在不同设备上自动适应不同的屏幕尺寸和分辨率，以保证在不同设备上都能有良好的用户体验。移动端自适应布局需要通过 CSS 的媒体查询、rem 等技术实现。

方式一：使用 viewport 和 rem

Viewport 是指浏览器用来显示网页的区域，可以通过设置 viewport 的宽度来适应不同的屏幕尺寸。而 rem 则是相对于根元素 html 的字体大小，可以根据根元素的字体大小设置各种元素的大小。

下面是使用 viewport 和 rem 实现移动端自适应布局的示例代码：

html {
  font-size: 62.5%;
}

@media screen and (max-width: 640px) {
  html {
    font-size: 50%;
  }
}

body {
  font-size: 1.6rem;
}

h1 {
  font-size: 2.4rem;
  margin-bottom: 1.6rem;
}

p {
  font-size: 1.6rem;
  line-height: 1.8;
  margin-bottom: 1.6rem;
}

方式二：使用 CSS 单位 vw 和 vh

CSS 单位 vw 和 vh 是相对于 viewport 的宽度和高度的单位。使用 CSS 单位 vw 和 vh 可以便捷地实现移动端自适应布局，不需要像 rem 一样特别计算。

下面是使用 CSS 单位 vw 和 vh 实现移动端自适应布局的示例代码：

body {
  width: 100vw;
  height: 100vh;
  font-size: 2vw;
}

h1 {
  font-size: 5vw;
  margin-bottom: 3vh;
}

p {
  font-size: 2.5vw;
  line-height: 1.5;
  margin-bottom: 3vh;
}

方式三：使用第三方库

除了自己写 CSS，还可以使用第三方库来实现移动端自适应布局。常用的库有 viewport-units-buggyfill、lib-flexible 等。这些库可以方便快捷地实现移动端自适应布局，但会增加网站的依赖。

下面是使用 viewport-units-buggyfill 实现移动端自适应布局的示例代码：

import vhCheck from 'vh-check';

vhCheck();

body {
  height: 100vh;
  font-size: 2vw;
}

h1 {
  font-size: 5vw;
  margin-bottom: 3vh;
}

p {
  font-size: 2.5vw;
  line-height: 1.5;
  margin-bottom: 3vh;
}

总结

以上是 Next.js 实现移动端自适应布局的三种方式，使用不同的方式可以根据实际需求来选择。使用 viewport 和 rem 可以保证兼容性好，使用 CSS 单位 vw 和 vh 可以方便快捷地编写 CSS，使用第三方库可以提高效率和便捷性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ab553badd4f0e0ff4f6d49