资讯详情

如何把web平分成750份

 

把屏幕宽度平分成 750 份（移动端标准 750 设计稿逻辑）

核心思路：视口总宽度 = 750 基准单位，主流两种实现：vw 原生方案、rem 方案，刚好对应 750px 设计稿。

一、vw 方案（纯 CSS，最简单，推荐）

屏幕总宽度 = 100vw，要把 100vw 等分 750 份：

 

单份宽度：

 

份

 

也就是：设计稿 1px = 0.133333vw

换算公式：

 

设计稿px × (100 / 750) = vw

 

简写：px ÷ 7.5 = vw

示例

设计稿 100px：

 

$100÷7.5\approx 13.333vw$

• 375px（手机半屏）= 50vw
• 750px（满屏）= 100vw

直接使用

css

 

 

 

 

/* 设计稿宽 150px */
.box {width: calc(150 / 7.5 * 1vw);/* 简写 width: 20vw; */
}

 

工程化自动转换（项目必用）

打包插件 postcss-px-to-viewport，配置直接写 750 设计稿 px，自动转 vw：

js

 

运行

 

 

 

// postcss.config.js
module.exports = {plugins: {'px-to-viewport': {viewportWidth: 750, // 核心：把视口划分为750份unitPrecision: 5,viewportUnit: 'vw'}}
}

 

之后写 width: 300px，编译自动转为对应 vw，完美对应 750 等分。

二、rem 方案（老方案，JS 把 html 根字号设为屏幕宽度 / 7.5）

目标：1rem = 设计稿 100px，整屏宽度 = 7.5rem，刚好对应 750 份。

js

 

运行

 

 

 

function setRem() {const width = document.documentElement.clientWidth;// 屏幕宽度 / 7.5，1rem = 屏幕宽度的 1/7.5document.documentElement.style.fontSize = width / 7.5 + 'px';
}
setRem();
window.onresize = setRem;

 

逻辑：

• 屏幕宽度 W，根字号 fontSize = W / 7.5
• 整屏宽度 = 7.5rem = 750 份，所以 1rem = 100份，0.01rem = 1份
   
  设计稿 100px = 1rem，1px = 0.01rem。

三、直观理解 750 等分

1. 手机屏幕物理宽度 375px（iPhone）
    
   fontSize = 375 / 7.5 = 50px
    
   7.5rem = 375px，等价于把 375px 物理屏幕，虚拟切成 750 格，每一格虚拟单位 = 0.5 物理 px
2. 平板宽 750px，fontSize=100px，7.5rem=750px，虚拟 1 格 = 真实 1px。

四、配套限制（必加，防止大屏无限放大）

不管 vw 还是 rem，PC 大屏要限制最大尺寸，不要无限等比放大：

css

 

 

 

 

html {max-width: 750px;margin: 0 auto;
}
.box {max-width: 750px;min-width: 320px;
}

 

总结

1. 原生手写：px ÷ 7.5 得到 vw，实现屏幕 750 等分；
2. 项目开发：px-to-viewport 设置 viewportWidth:750，直接写设计稿 px；
3. rem 原理本质也是按 宽度/7.5 划分 750 虚拟等分，现在 vw 方案更优无需 JS。