前面看看图一乐，神作链接在最后（学技术直接去就好了），现在四级了会自动推荐，想回到胡乱写写想发啥发啥的日子，，，

背景

在rem / vw文章或者视频的评论区，总会有第三个声音：flex & px才是最优解！（蒙蔽，主要是因为不懂）

battle截图来自bilibili：移动端最佳的适配方案，目前前端圈最流行的技术方案，关键核心点：vw vh的转换的评论区。

概括来说呢，up主讲到了vw适配方案在项目中如何落地；然后楼主提出了不认可，并指出了px + flex布局 + 媒体查询的适配方案。

两种移动端适配思想概述

等比缩放适配

关于移动端适配方案，我大致陈述一下我浅薄的见解，最常规的vw与rem方案其实本质是一类，可以概括为等比缩放适配，即不同宽度（不同机型）的设备展示的内容不同的表现，仅仅是页面整体的一种缩放——屏大字大，当然不光是字，而是页面整体。

用户体验至上的响应式适配（自己起的名字）

而如上评论区提出的px + flex布局 + 媒体查询的适配方案核心思想在于考虑用户体验——用户使用大屏设备如ipad应该看到更多的内容，而不是更大的文字与按钮。所以这种适配方案要做的事情的核心就是——大屏展示更多内容，我思考了一下可能的实施方案：

0. 容器的大小（宽度）单位仍然用静态的px，然后字体大小可以用rem等单位（随大屏变大，所以容器高度可能不加以限制，虽内容多少变化）
1. 通过媒体查询（查询设备宽度）搭配flex布局控制好容器的换行，具体来说就是一个内容模块大屏两行展示对应小屏可能四行展示。

我的观点

两种方案出发点是不一样的，没必要拉踩

采用等比缩放适配方案与pc端开发无异，在开发效率上明显占优，但是大屏用户可能体验不好；而“响应式适配”与之相反。

下附一个前辈的看法，不引战，只是加一点思想的碰撞。愚者比较，智者欣赏，欣赏我们前端开发工程师工作中的技术权衡&为用户体验考虑的尽心尽力，具体的业务场景取其所需即可。

等以后来填坑（抛砖引玉）

下面本想详细记录一下两种等比缩放方案的技术细节的，但是拜读了前辈三篇文章之后觉着没必要了，可以客观的说我这时候如果去写，那么我这篇文章只是相形见绌，没啥价值，给未来的自己挖个坑吧，会来填的。下面是前辈的三篇关于移动端的文章：

• 深入浅出移动端适配（总结版）

• Web移动端适配方案（两种等比缩放适配方案）
• 【又硬又细】移动端Web开发踩坑指北