移动端页面适配的四种实用方法

现在用手机浏览网页的人越来越多，各种手机屏幕尺寸也各不相同。作为前端开发者，让网页在不同尺寸的手机上正常显示是个必须解决的问题。下面介绍四种常用的移动端适配方案，每种方法都有自己的优缺点，适合不同的使用场景。

方法一：viewport缩放

这种方法最简单直接。按照设计稿标准（比如750px宽度）完成页面开发后，在head标签里添加viewport设置：

<meta name="viewport" content="width=750, initial-scale=0.5">

上面例子是针对750px设计稿适配375px屏幕。initial-scale的计算公式是：屏幕逻辑像素宽度 ÷ 设计稿宽度。

为了适配各种屏幕，需要用JavaScript动态设置：

<script>
  function setViewport() {
    const designWidth = 750; // 设计稿宽度
    const scale = window.screen.width / designWidth;
    const content = `width=${designWidth}, initial-scale=${scale}`;
    
    let metaViewport = document.querySelector('meta[name="viewport"]');
    if (!metaViewport) {
      metaViewport = document.createElement('meta');
      metaViewport.name = 'viewport';
      document.head.appendChild(metaViewport);
    }
    metaViewport.content = content;
  }

  setViewport();
  window.addEventListener('orientationchange', setViewport); // 处理屏幕旋转
</script>

优点：

开发简单快速
页面整体自动缩放

缺点：

所有元素都会缩放，无法控制个别元素不缩放
边框等细节在大屏上可能显得过粗，小屏上过细

方法二：rem方案

rem是相对单位，1rem等于html根元素的字体大小。通过调整根元素字体大小，就能控制整个页面的缩放比例。

HTML中设置根元素字体大小：

<script>
  const DESIGN_WIDTH = 750; // 设计稿宽度
  
  function setRootFontSize() {
    const fontSize = (100 * window.screen.width) / DESIGN_WIDTH;
    document.documentElement.style.fontSize = fontSize + 'px';
  }
  
  window.addEventListener('resize', setRootFontSize);
  setRootFontSize();
</script>

css中使用rem单位：

<style>
  .box {
    width: 4.25rem;  /* 设计稿425px ÷ 100 */
    height: 10rem;   /* 设计稿1000px ÷ 100 */
    font-size: 0.2rem; /* 设计稿20px ÷ 100 */
    border: 1px solid #ccc; /* 不需要缩放的用px */
  }
</style>

如果使用Sass，可以写个转换函数：

@function px2rem($px) {
  @return $px * 1rem / 100;
}

.header {
  font-size: px2rem(28);
}

还可以配合媒体查询，不用JavaScript：

<style>
  @media screen and (min-width: 320px) {
    html { font-size: 50px; }
  }
  @media screen and (min-width: 500px) {
    html { font-size: 75px; }
  }
  @media screen and (min-width: 800px) {
    html { font-size: 100px; }
  }
  
  .title {
    height: 1rem;
    font-size: 0.5rem;
    line-height: 1rem;
  }
</style>

优点：

灵活，可以控制哪些元素缩放，哪些不缩放
换算相对简单，有现成的插件工具

缺点：

需要JavaScript配合
原理相对复杂

方法三：vw/vh方案

vw表示视口宽度的1%，vh表示视口高度的1%。需要缩放的元素用vw/vh单位，不需要缩放的继续用px。

假设设计稿宽度750px，一个按钮在设计稿上标注为：

宽度：120px
文字大小：28px
高度：48px
边框：1px（不缩放）

转换计算：

宽度：120 ÷ 750 × 100 = 16vw
文字大小：28 ÷ 750 × 100 = 3.73vw
高度：48 ÷ 750 × 100 = 6.4vw

<style>
  .button {
    width: 16vw;
    font-size: 3.73vw;
    line-height: 6.4vw;
    border: 1px solid #000; /* 边框不缩放 */
    text-align: center;
  }
</style>

可以用calc计算，更清晰：

<style>
  .button {
    width: calc(100vw * 120 / 750);
    font-size: calc(100vw * 28 / 750);
    line-height: calc(100vw * 48 / 750);
    border: 1px solid #000;
  }
</style>

或者用CSS变量：

<style>
  :root {
    --ratio: calc(100vw / 750);
  }
  .button {
    width: calc(120 * var(--ratio));
    font-size: calc(28 * var(--ratio));
    line-height: calc(48 * var(--ratio));
  }
</style>

Sass写法：

@function px2vw($px) {
  @return $px * 100vw / 750;
}

.button {
  width: px2vw(120);
  font-size: px2vw(28);
  line-height: px2vw(48);
}

优点：

不需要JavaScript
适配原理简单
灵活控制缩放

缺点：

手动计算比较麻烦
兼容性需要注意（CSS变量在IE不支持）

方法四：Flex弹性布局

有些场景不需要整体缩放，只需要合理的布局排列。这时候用Flex布局最合适。

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

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .item {
    flex: 0 0 48%; /* 每行显示2个，中间有间距 */
    margin-bottom: 10px;
  }
  
  @media screen and (min-width: 768px) {
    .item {
      flex: 0 0 32%; /* 大屏每行显示3个 */
    }
  }
</style>

适用场景：

内容列表、卡片布局
不需要严格等比缩放的页面
希望在不同屏幕上有不同排列方式的布局

什么时候需要等比缩放？

栅格化布局：页面元素位置和大小需要严格按比例变化
头屏大图：需要保持宽高比例，避免变形
整体性强的页面：所有元素都需要按屏幕尺寸调整

什么时候用Flex布局就够了？

内容列表页：只需要合理排列，不需要严格缩放
工具类应用：功能为主，样式为辅
后台管理系统：主要在电脑端使用，移动端次要

特殊场景：高度适配

有些场景需要高度也要适配，比如电视大屏、全屏展示页面：

<style>
  .fullscreen-section {
    width: 100vw;
    height: 100vh; /* 撑满整个屏幕 */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .content {
    width: 80vw;
    height: 80vh;
    background: #f5f5f5;
  }
</style>

小程序开发提示

如果你开发微信小程序或使用uniapp，直接在750px设计稿下使用rpx单位即可：

/* 设计稿上10px，代码就写10rpx */
.element {
  width: 10rpx;
  height: 20rpx;
  font-size: 14rpx;
}

总结建议

简单项目：用viewport缩放，快速上手
复杂项目：用rem或vw方案，更灵活控制
内容型页面：用Flex布局，注重排列而非缩放
小程序：直接用rpx单位

选择哪种方法要根据项目需求来定。小型活动页用viewport缩放就够了，大型应用建议用rem或vw方案。关键是多实践，找到最适合自己项目的适配方案。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13015