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,媒体查询,这些配合起来怎么都能解决问题...但就是不知道有没有系统性得实践方案..实际项目中看到得大都乱得很
|