2023 年了，前端最流行的自适应方案是什么？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 514 天前的主题，其中的信息可能已经有所发展或是发生改变。

想做个视频网站，要求 pc 和手机自适应，有好用的方案推荐吗？

自适应

方案

好用

流行

31 条回复 • 2023-07-07 08:46:32 +08:00

yhxx

2023-07-06 10:24:25 +08:00

最流行的方案是做两套，监测设备自动跳转(doge:

estk

2023-07-06 10:32:07 +08:00 via iPhone

css media query

chuck1in

2023-07-06 10:35:24 +08:00

@yhxx 已经不流行那个什么媒体查询了？

rainsounds

2023-07-06 10:41:19 +08:00

pc 响应式布局容器+媒体查询，手机 px 转 viewport

lovedebug

2023-07-06 10:44:09 +08:00

做两套，BFF 层一个功能就是做这个的后端适配的

murmur

2023-07-06 10:47:46 +08:00

媒体查询那是糊弄人的，做个给程序员用的网站还行，苹果做了响应式，你没看到他每一块内容都是精心设计过的

lilei2023

2023-07-06 10:54:12 +08:00

px 转 viewport 吧，感觉挺省事

sentinelK

2023-07-06 10:56:15 +08:00

pc 和手机不可能“自适应”。

都是要针对性设计功能的，pc 和手机的操作习惯，屏幕比例，屏幕空间都不一样，自适应的结果就是两边不讨喜，左右不是人。

chjieza

2023-07-06 11:05:26 +08:00

同一楼，桌面设备和移动设备各一套，同时每套响应式布局容器+媒体查询+媒体查询，移动端设备也做得原因是适配 IPAD ，甚至为平台再做一套。

tkHello

2023-07-06 11:05:33 +08:00

做两套一直是最流行的

tkHello

2023-07-06 11:06:23 +08:00

1 套的没成功过都是玩家可以用来忽悠老板

chjieza

2023-07-06 11:06:30 +08:00

当然也得看页面是什么，核心产品肯定是要尽可能适配。一般的活动页啥的，保准布局不乱差不多就行了。

ruoxie

2023-07-06 11:09:02 +08:00 via iPhone

做两套，不然后期就是折磨自己

crysislinux

2023-07-06 11:09:59 +08:00 via Android

一套只适合那种布局比较简单的站。复杂了就容易搞得一团糟

tool2d

2023-07-06 11:12:16 +08:00

要求不高就用 tailwind css 的自适应框架。

要求高，那就只能两套了。PC 页面靠点击，手机页面靠滑动，操作逻辑都不太一样。

yuthelloworld

2023-07-06 11:22:51 +08:00

css media query + js matchMedia
可以用 tailwind css
目前就是用这个方案做的 pc + 移动端，支持 pc 点击和手机滑动

abc635073826

2023-07-06 14:18:30 +08:00

强制跳转

wolfan

2023-07-06 14:20:00 +08:00

css media flex+grid

ruzhan123

2023-07-06 16:07:08 +08:00

代码布局尽量用百分比，然后慢慢适配屏幕吧

dcsuibian

2023-07-06 16:10:23 +08:00

我也感觉做两套比较好，一套响应式太费脑子

dioxide

2023-07-06 17:19:02 +08:00

做一套响应式同时适配两端的话, 前提设计、后期维护成本会很高. 分开实现更实际

dioxide

2023-07-06 17:20:41 +08:00

如果 PC 和 pad 之间(可是区域尺寸跨度不大)间适配还有可行性, 操作体检也接近些

libasten

2023-07-06 17:34:40 +08:00 via Android

看这个帖子刷新最近的观念了，
之前以为响应式自适应是很多大公司首选呢。
现在看来，还是做两套最科学啊。
不过自适应还是要考虑吧？现在移动端屏幕尺寸五花八门的。

maplerecall

2023-07-06 18:10:24 +08:00

两套，实践下来 media query 只适合做同平台下不同尺寸的适配，不适合做跨平台

suzic

2023-07-06 18:12:38 +08:00 via Android

这需求不是多复杂的场景，完全可以一套啊，想 diy 就自己写，不想 diy 就找 md 规范的组件库，谷歌这套是自适应的

murmur

2023-07-06 18:29:42 +08:00

@libasten 不适应，就是拉大百分比，其余的地方留空

适应的反例就是小米的网站，他没有监测横屏竖屏，如果是横屏浏览，就会错误的返回 pad 尺寸

然后就能看到奇葩的界面布局

现在应该改过来了，不过现在总体策略就是单做移动，ipad 两侧留白给你显示个大手机，pc 干脆提示下载 app

shui14

2023-07-06 20:52:23 +08:00

这个要分类型的，如果是展示型，偏设计或者内容的，css 多套就可以了；如果是功能型的或者业务型的，要么两套，要么做取舍，因为很多时候手机和电脑的操作天然就不一样，强行一致往往就是强奸用户，比如产品逼着开发给安卓搞上 ios 的选择器，完全不尊重平台的差异，根据差异来调整。

anoninz

2023-07-06 21:36:54 +08:00

不知道啥流行，但如果两端功能一致的话，可以数据层写一套，UI 层写两套。UI 尽量薄。

qweruiop

2023-07-06 23:04:23 +08:00

一般都是写 2 套吧，现在移动和 pc 的交互方式差异巨大。。。

unclemcz

2023-07-07 07:56:57 +08:00 via Android

我只会 bootstrap

woshinide300yuan

2023-07-07 08:46:32 +08:00

我只会复制粘贴
@media (min-width:1200px){.container{max-width:1160px}
}