这是一个创建于 1281 天前的主题，其中的信息可能已经有所发展或是发生改变。
 |
1
murmur 2021-06-25 10:38:05 +08:00  1
没有自适应，不适应，用一些相对布局，能拉开就行
强制做自适应的结果，就是小米主站的横屏手机显示，直接 chrome 选调试工具转一下屏就可以看到效果了 |
 |
2
emonc 2021-06-25 10:39:15 +08:00
可以用 vw/vh
关于这个文章，考虑到 V 站不能说脏话我就不予置评了 |
 |
3
kop1989 2021-06-25 10:41:36 +08:00
实用层面上的自适应无非就是宽度匹配。
真正需要横屏、pad 使用的时候，考虑到内容密度的问题，你靠宽度匹配也不合适了。 需要重新规划布局，重新渲染。 |
 |
4
wenzichel 2021-06-25 10:43:00 +08:00 6
我们现在用的是 vw 和 /vh，配合着 webpack 的插件 postcss-px-to-viewport，可以将源码中的 px 转为 vw 单位。
require('postcss-px-to-viewport')({ viewportWidth: viewportWidth || 750, // 设计稿的宽度 unitPrecision: 3, // 单位精度，即保留几位小数 viewportUnit: 'vw' // 转换后的单位 }), |
 |
5
mxT52CRuqR6o5 2021-06-25 10:51:20 +08:00 2
@emonc 把别人带坑里去，自己水平就变相提高了
|
 |
6
dagouziwangwang 2021-06-25 10:58:05 +08:00 2
emmm 文章里说 “FaceBook 使用 Tailwind CSS 重构后，节省了接近 70%的 css 代码，威力惊人”，好奇 className 多了多少
|
 |
7
Vegetable 2021-06-25 10:58:47 +08:00
移动端我的体会是，如果不考虑横屏，vw/vh 很好用。引入横屏会麻烦一点。
这个文章早就看过了，一言难尽... |
 |
8
qaqLjj 2021-06-25 11:03:21 +08:00 via Android
vw 啊
|
|
9
murmur 2021-06-25 11:15:04 +08:00
无论 vw，vh 都有个单位，最忌讳的是设计一个全局变量，妄图通过修改这个变量适配各种屏幕尺寸，而且国产手机的 rom 各种魔改，你不知道在 ui 设定缩放的时候会出现什么奇葩问题
你看各家，有几个适配的，都是选一个最小尺寸，比如横排最小只能 4 个按钮，那更宽就加大间距，竖排因为可以滚动所以几乎必须要考虑，真遇到横屏，两边留白 遇到需要大字体的时候，基本没几个管的，微信是有内置字体调整，其余的你只能祈祷有老年人模式 除非你是对横屏非常依赖的东西，比如视频、游戏、文档编辑预览等 想做自适应，除非你页面简单到一行字一张图，稍微复杂一点需要排版就容易崩 至于折叠屏，你看有几家适配，当然折叠屏也不需要适配，这么大屏幕都可以显示电脑版了 |
|
10
murmur 2021-06-25 11:15:43 +08:00
更正：必须要=》没有必要
|
 |
11
Dukewill 2021-06-25 11:18:49 +08:00
小白请教下，vw/vh 跟直接用 % 有啥区别
|
 |
12
learnshare 2021-06-25 11:19:35 +08:00
em/rem 仅推荐应用在文本相关的属性中，如：
font-size/line-height/text-indent/word-spacing/letter-spacing/text-shadow 等 禁止在布局相关的属性中使用，如： width/height/margin/padding 等 根据 root.font-size(rem) 调整布局或整体缩放是错误的做法 px2rem 更是纯粹的自讨苦吃 （小程序 750rpx 也是这种方式，开发 /设计省事了，pixel perfect 没了，更大的屏幕没法适配） |
 |
14
yl20181003 2021-06-25 11:21:58 +08:00
@Dukewill #11 百分比是相对父元素的吧，vw/vh 相对视窗大小
|
 |
15
KuroNekoFan 2021-06-25 11:24:09 +08:00
自适应和相对长度单位是两个问题，自适应应该理解为针对不同特性的设备有不同的 layout
另外，相对长度单位也没必要用 rem，直接上 vw 即可，配合蓝湖的自定义屏幕宽度很方便 |
|
16
learnshare 2021-06-25 11:25:01 +08:00
总结来说，**缩放** 是 **适配（响应式）** 手段中最不该选择的方式之一
|
 |
17
kensoz 2021-06-25 11:27:15 +08:00
似乎现在 vw/vh 是主流？我这现在还在用 rem
|
 |
18
kuxuan 2021-06-25 11:29:41 +08:00 via iPhone
各位大佬，有用 vw/vh 做的示例吗，给个看看。
|
 |
19
wunonglin 2021-06-25 11:35:22 +08:00 1
自适应 !== 缩放
|
 |
20
CodingNaux 2021-06-25 11:45:30 +08:00
设计师偷懒只设计移动端界面，然后说适配 ipad，单纯放大，所谓的适应是这种吗？
这种没啥意思。 可以看看 bootstrap 怎么用 rem 的。响应式设计老生常谈了，但国内一般就是放大就所谓的适配，设计师也接受 |
 |
21
tinkerer 2021-06-25 12:02:44 +08:00
@mxT52CRuqR6o5 哈哈哈哈哈哈，你这个观点的角度很不错
|
 |
22
3dwelcome 2021-06-25 12:20:39 +08:00
这文章本身就是矛盾的。
作者推荐用 Tailwind CSS，可里面 REM 满天飞，我还在 V2 发过贴，专门吐槽过这点。 |
|
23
3dwelcome 2021-06-25 12:24:37 +08:00
@murmur “想做自适应，除非你页面简单到一行字一张图，稍微复杂一点需要排版就容易崩”
只要不是随心所欲手写 span 外套 div，严格按照布局规范来做(FLEX/GRID/BOOTSTRAP)，感觉要崩也难。 我现在复杂布局，都是用代码根据设计稿自动生成，最少保证自适应在视觉上的一致性。 至于美不美观另说。 |
 |
24
molvqingtai 2021-06-25 12:37:30 +08:00 via Android
手写的时候 vw/vm rem 配合着用，现在嘛，当然是 taiwindcss 啦
|
 |
25
IvanLi127 2021-06-25 12:39:05 +08:00 via Android
目前看 大部分用 rem 搞自适应的，都是叫缩放，惨不忍睹。
|
 |
26
otakustay 2021-06-25 12:48:04 +08:00
这问题你研究再深也无解的，它的根源是设计给的是什么，是响应式还是所有设备长一个样。设计要所有设备一个样，那实现上 rem 就是最佳的，归根到底设计水平太差
|
 |
28
codehz 2021-06-25 13:08:01 +08:00 via Android
响应式布局和 vw 这种相对比例布局都有各自的缺陷，可以说是两个极端
能做的话当然是响应式好，但是它的缺陷在于媒体查询是基于视口大小的，复杂布局使用起来就需要各种数学计算，还很难调试 如果有一个基于容器大小的查询，响应式就会好做很多 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries （还在草案阶段） |
 |
29
maplerecall 2021-06-25 13:28:43 +08:00 2
rem 是早期移动端兼容性不好加上产品、设计、开发缺少经验，强行要求 1：1 缩放设计稿导致的一种歪的路子，很不优雅，而且有无法解决的子像素 bug 。想要各设备统一直接 meta 里 viewport 宽度等于设计稿宽度就行了，这样所有东西的像素尺寸都和设计稿是完全一致的，整洁优雅，对于那种花里胡哨的专题、营销页效果拔群。
顺带吐槽： rem 在国内被这么广泛使用很大一部分原因是因为当时阿里早期用了，加上各种复制粘贴的灌水技术文导致很多人盲从。很早之前面试人，大多数移动端布局除了 rem 八股文之外一问三不知…… 几年前做一个新项目时我就说服设计做宽度自适应，然后完全用 px 布局，开发很舒服而且效果很好，结果后来被空降来的前端领导质疑，我就直接把整个移动端布局原理给整个团队普及了一下，然后他又说阿里都用 rem，这么大的公司做背书，你为啥自己搞一套，我就去找了一通，google，微软、facebook，甚至阿里自己新一些的天猫都用的 px，才给怼回去了……到头来得靠这种方法说服，现在想起来真是有些唏嘘。 |
 |
31
yhxx 2021-06-25 14:08:10 +08:00
|
 |
32
firhome OP @maplerecall 感谢回复，宽度自适应我能理解，但是其它完全用 px 布局，指的是哪些地方用 px 呢？如果在高清的屏幕小岂不是显得很小？
|
 |
33
thulof 2021-06-25 14:15:41 +08:00
打扰了，在某大厂，啥 rem 、vh/vw 也没用，一直用的是 px，PC/移动端是两套完全不同的交互
|
 |
34
anjianshi 2021-06-25 14:21:27 +08:00
真的，这个文章，还有作者在下面的回复，什么狗屁啊！
|
|
36
codehz 2021-06-25 14:28:41 +08:00
@firhome 理论上 px 是会考虑 dpi 的（也就是不等于物理像素），所以唯一的问题在于你期望它在不同屏幕上时需要的布局（比如手机屏幕太小，用 pc 的布局方案就会超出屏幕）
|
 |
37
zzwyh 2021-06-25 14:31:37 +08:00
@maplerecall px 的布局是指在哪方面呢？这个地方有点迷糊
|
 |
38
Huelse 2021-06-25 14:51:01 +08:00
说起来这也是前端的一个痛点，还是看看国外大厂怎么做的吧,例如 https://stripe.com/
|
 |
39
wanguorui123 2021-06-25 14:56:09 +08:00
我一般 px*2
|
 |
41
unco020511 2021-06-25 15:22:11 +08:00
没有一劳永逸的适配方案,不同需求不同方案
|
 |
42
Cbdy 2021-06-25 15:26:34 +08:00 via Android
这篇文章关于 rem 的观点说得很对
|
 |
43
iPhone9 2021-06-25 15:42:24 +08:00 via iPhone
是他不会用
|
 |
44
TimPeake 2021-06-25 16:02:35 +08:00
`2021 年 React 项目推荐的和应该放弃的技术方案` 看到这个标题 ，还没翻到下面，大概就猜出来了这篇文章有多么沙雕。
-------------------------------------------------- 正经话： 现在主流的移动端适配都是 vw 了。大概就是 4 楼的方案 |
 |
45
zedcoding 2021-06-25 16:12:44 +08:00
推荐 pxtovw 吧
|
 |
46
Obrigado0815 2021-06-25 16:13:40 +08:00
我用 vw ；
有个专门的库，浏览器预览时，会帮忙把 css 代码中的 px 自动转换成 vw ； |
|
48
murmur 2021-06-25 16:18:30 +08:00
@Huelse 这就是功能越简单适配越容易的例子，他的主站就一个功能：宣传产品，卖掉产品，只需要看，不需要什么交互
当然问题也有，随意的适配就没有什么思考，比如 support 功能，正常情况下，右侧的导航是浮动的，你可以很容易的找到你要的类目，比如 getting started 等切换到手机，侧栏被放置在页面最底下，也就是说为了导航我要看一堆不是我需要的东西 |
 |
49
gdrk 2021-06-25 16:24:47 +08:00
现在常用的就是 4 楼的方案，rem 只是当时移动端浏览器对 vw/vh 支持度太差的 hack 手段啊。时代再进步，站在现在喷以前的技术方案挺无聊的
|
 |
50
anguiao 2021-06-25 16:25:53 +08:00
用“修改根字体大小+rem”的方式来做自适应，只能说是一种凑合的方案。
这样出来的效果，就是大屏手机和小屏手机显示的内容是一样多的（忽略屏幕比例的前提下），大屏手机的字很大，小屏手机的字很小，用户体验怎么也不能算好。 至于用 vm/vh，我认为和用“修改根字体大小+rem”没有本质区别，都是在“凑合”。 |
 |
51
magichacker 2021-06-25 17:04:18 +08:00
@wenzichel 头像是本人吗？
|
|
52
maplerecall 2021-06-25 17:18:16 +08:00 via Android
|
 |
53
ciming 2021-06-25 17:34:08 +08:00
我看起点的移动端是这样处理的
html { background-color: #fff; font-size: 16px; font-size: calc(100% + 2 * (100vw - 360px) / 39); font-size: calc(16px + 2 * (100vw - 360px) / 39); line-height: 1.5 } @media screen and (min-width: 414px) { html { font-size:calc(112.5% + 4 * (100vw - 414px) / 586); font-size: calc(18px + 4 * (100vw - 414px) / 586) } } @media screen and (min-width: 750px) { html { font-size:calc(137.5% + 6 * (100vw - 1000px) / 1000); font-size: calc(22px + 6 * (100vw - 1000px) / 1000) } } |
 |
54
beilo 2021-06-25 17:38:19 +08:00
@maplerecall 大佬有对应的资料嘛? 想学习下
|
 |
55
lupkcd 2021-06-25 17:51:59 +08:00
px2vw 就行了 rem 可以放弃了
|
 |
56
wednesdayco 2021-06-25 18:02:24 +08:00
移动端布局：
1·device-width 设定为固定值 老掉牙但最好使 2·rem/em 这个两三年前流行 3·vw/vh 小数点问题比较严重还是 4·百分比布局 这种一般不会去对文本做 5·@media 这个一般结合以上的使用，毕竟每个宽度写一套要死人的 欢迎大佬补充 |
 |
57
Torpedo 2021-06-25 19:39:20 +08:00
客户端里的页面不要用 rem，原因很简单：你的客户端基本可以确定不是按照 rem 的缩放模式来做的。你用了 rem，和客户端差异就会很大
|
 |
58
faceRollingKB 2021-06-25 20:08:25 +08:00
实践中发现 rem 单位用处不大，使用 px 单位再加上 media 就可以同时适配不同尺寸的页面，当然设计也要根据页面尺寸来
|
 |
59
zephyru 2021-06-26 10:23:32 +08:00
虽然都感觉 rem 不好，但我也基本没见到，系统性讲非 rem 布局的屏幕适配方案，虽然 flex，gird，vw /vh,媒体查询，这些配合起来怎么都能解决问题...但就是不知道有没有系统性得实践方案..实际项目中看到得大都乱得很
|
Select Language