跳到主要内容

自适应页面

首先得区分自适应布局和响应式布局之间的区别。

自适应布局是指在同一设备类型下，页面可以根据窗口大小等比例缩放，以适应不同尺寸的屏幕。在自适应布局中，页面的布局和元素大小会根据浏览器窗口的大小进行调整，但不会改变元素的排列顺序。

响应式布局则更加灵活，它是指在不同设备类型下，页面可以通过隐藏、调整布局和改变元素的排列顺序等方式，以适应不同的屏幕尺寸和设备特性。在响应式布局中，可以使用媒体查询、弹性布局和其他技术手段，根据设备的特性和屏幕尺寸，调整页面的布局和样式。

postcss​

本教程通过rem的方案来进行自适应，rem是相对根元素font-size的单位。为了简化编写rem单位，可以使用postcss插件进行转化。

首先安装postcss插件：

npm install postcss postcss-pxtorem autoprefixer -D

然后创建postcss.config.js文件，并写入以下内容：

postcss.config.js
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
        'postcss-pxtorem': {
            rootValue: 16,
            propList: ['*', '!font-size']
        }
    }
};
  • rootValue，表示1rem等于多少px，这里设置为16px。
  • propList，表示需要转化哪些属性。这里设置为*，表示所有属性都需要转化， 同时!font-size表示不转化font-size属性。

个人建议, 使用自适应布局和响应式布局混合搭配时，最好不要转化font-size为rem，避免出现字体大小过小的情况。

设置根元素fon-size​

假设设计稿的宽度是1242px，那么根元素font-size的值为：屏幕宽度 * 16 / 1242

通过css设置根元素字体大小(推荐):

global.css
/* 1242下，1rem = 16px */
html {
    font-size: calc(100vw * 16 / 1242);
}

当然，你也可以通过js设置根元素字体大小:

app/page.jsx
function setFontSize() {
  // 获取屏幕宽度
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

  // 根据屏幕宽度和设计稿的尺寸比例计算字体大小
  var fontSize = screenWidth / 10; // 假设设计稿宽度为10rem

  // 设置HTML元素的字体大小
  document.documentElement.style.fontSize = fontSize + 'px';
}

setFontSize();
window.addEventListener('resize', setFontSize);