这是一个创建于 473 天前的主题，其中的信息可能已经有所发展或是发生改变。
我刚刚学完 React ，React 很香，然后我用 TailwindCSS 写了一个小页面，这个页面我是直接用像素的，但这样肯定是有问题的，在这种 1080p 的屏幕还好，但在 5k 屏或者 6k 屏那个页面就会显得巨小。
我是做 Android 的，在 Android 就是无脑用 dp ，如果要特定适配一些屏幕，就修改 dp 到 px 的转换值就好。
第 1 条附言 · 2023-07-31 13:43:43 +08:00
看不懂啊，只懂像素这个单位，有系统点的书籍推荐吗？ rem 我也查了，确实看不太懂
 |
1
GTim 2023-07-31 09:23:16 +08:00
rem
|
 |
2
wolfan 2023-07-31 09:24:00 +08:00
我一直用 rem ……
|
 |
3
ToPoGE 2023-07-31 09:27:49 +08:00
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Viewport_meta_tag |
 |
4
zhhanging 2023-07-31 09:27:52 +08:00  2
一般不需要处理，高分屏会开缩放，不影响的，如果一个用户用 5k 6k 屏幕，但是还是 100%缩放，那他的所有用户界面都会变得很小，基本无法正常使用
|
 |
5
lynan 2023-07-31 09:30:25 +08:00
一样的，做 px 到 rem 的转换就好了
|
 |
6
crysislinux 2023-07-31 09:31:30 +08:00 via Android
就用 px 也可以。5k 屛一般也是缩放显示的，无所谓。
|
 |
7
horizon 2023-07-31 09:33:29 +08:00
tailwind 不是已经给你处理了么
|
 |
8
LandCruiser 2023-07-31 09:37:07 +08:00
页面在高分屏下看起来小是正常现象。如果你想所有屏幕下，显示比例都一样，那就得严格用百分比，或者 vw ，vh
|
 |
9
Leviathann 2023-07-31 10:04:28 +08:00
tailwind 默认不是 rem 吗，你每个样式都手动改成 px ？
|
 |
10
nnegier OP |
 |
11
darkengine 2023-07-31 10:20:16 +08:00
用 px 就可以了，浏览器也不是按照物理分辨率显示的，是按照逻辑分辨率。例如 iPhone 的： https://www.ios-resolution.com/ 浏览器的 px 是指 Logical Width 和 Logical Height
|
 |
12
thetbw 2023-07-31 10:25:18 +08:00
同 4 楼，就按照 1080p 用像素设计就行了，目前 windows 大多数软件都是这样，4k 的话开 200%缩放系统会自动处理，不开的话 windows 自带的开始菜单都会小的看不清，根本不是你的问题
|
 |
13
LavaC 2023-07-31 10:28:04 +08:00
我自己做项目是用 px 的，就算是高分屏，你浏览器内尺寸往往也没有几千乘几千这么大。
公司项目用的 px2rem ，只能说大致效果保证了各种尺寸差不多，但是也会导致很多额外小问题，比如在这你这里字体刚好不换行，在人家那就换行了。 |
 |
14
ZGame 2023-07-31 10:34:47 +08:00
同上 ,px2rem,
如果是数据大屏的话 需要全屏展示就要固定 px,利用 css scale 去做伸缩 |
 |
15
chf007 2023-07-31 11:05:01 +08:00
要看你的项目是 PC 端，还是移动端。
移动端就用上边说的缩放的解决。 PC 端还要看你是搞内容型的还是展示型的，内容型一般有个最大宽度，然后整体居中展示，你搞很宽体验也不好。 展示型的也是缩放解决。 |
 |
16
hevi 2023-07-31 11:07:39 +08:00
px 和 rem
|
 |
17
cslive 2023-07-31 11:25:14 +08:00
TailwindCSS 默认不上 rem 吗
|
 |
18
shenyuzhi 2023-07-31 11:27:51 +08:00
没有特殊需求的话，用 px 。
px+meta 声明+flex+grid 能解决 99%的需求。 |
 |
19
xudaxian520bsz 2023-07-31 11:27:54 +08:00
rem 已经开始逐渐淘汰了，现在主流是 vw 和 vh ，原理和 rem 类似，但是浏览器原生支持。
|
 |
20
z1645444 2023-07-31 12:07:15 +08:00 via Android
px ，插件 postcss-vw-to-px ，本质上还是用 vw
|
 |
21
crazyTanuki 2023-07-31 12:20:06 +08:00
rem 可以用,但是 vw 比较适合一些,因为这个单位上标准就是为了解决这方面的问题的
|
|
22
crazyTanuki 2023-07-31 12:20:58 +08:00
不过 h5,ipad,pc 还是得分开媒体查询,不能 vw 一把梭
|
 |
23
dufu1991 2023-07-31 12:22:13 +08:00 1
你都用 Tailwind 了，还问这种问题。一般来说，移动端多使用 flex 布局，宽高都不写死，除非是给图片固定宽高比的的容器。这样也实现了响应式布局。我的项目中（移动端）尺寸都写的很少。
|
 |
24
thinkershare 2023-07-31 12:51:51 +08:00
没有统一的标准答案，每个单位都有自己的使用场景，我一般在可视化这种场景中使用 vw/vh, PC 网页使用 px, 移动网页使用 rem, 打印使用 pt
|
 |
25
learnshare 2023-07-31 13:35:00 +08:00
|
|
26
learnshare 2023-07-31 13:54:10 +08:00
/t/877412 em/rem
|
 |
27
7gugu 2023-07-31 14:25:41 +08:00
3202 年直接用 rem 吧，只要做一次，其他场景只要改一下 root-fontsize 就能兼容
|
 |
28
superedlimited 2023-07-31 14:45:04 +08:00 via Android
如果不设置，那么 1rem 就是 16px 。但为了做适配，应结合 viewport 来设置 1rem 等于多少 px 。详细谷歌一下 viewport+rem ，结果有很多。
|
 |
29
dfkjgklfdjg 2023-07-31 15:39:49 +08:00
默认 `px` 就行了，遇到自适应的情况在考虑用 `vw/vh` 这种视窗单位。
用 `em/rem` 做兼容（适配）的时代已经过去了。 反正我是非常抗拒 `flexible` + `px2rem/px2vw` 这种无脑一刀切的缩放方案。 响应式，响应式，并不是缩放而已。 |
|
30
xudaxian520bsz 2023-07-31 15:45:08 +08:00
@dfkjgklfdjg 那是因为现在的网站是两种开发模式：第一种，就是响应式网站，以小米网站为例，适用各种设备；第二种，以京东网站为例，pc 设备一套，移动端设备一套，并且 pc 使用的就是浮动布局，移动端使用功的就是 flex + vw 的方式。
|
|
31
xudaxian520bsz 2023-07-31 15:49:48 +08:00
@nnegier 前端和安卓等不一样，操作系统将 DP 抽象了，比如我们可以统一设置 1920px * 1080px ，缩放比是 100% ，这样就不用区分什么 2k 屏、4k 屏了，统一按照 1920px * 1080px 来做；其实，在前端对移动站有两种对待：第一种，就是响应式布局，开发比较麻烦，但是适用各种设备，以小米官网为例；第二章，是 pc 端一套，移动站一套，以京东为例，并且移动站一般使用 vw + flex 进行开发，grid 也行。
|
|
32
dfkjgklfdjg 2023-07-31 16:35:13 +08:00
@xudaxian520bsz #30 ，这种“商城”模式下依旧使用缩放方案的大多是都是历史遗留问题（淘宝 PC 改版之后已经不在使用这种缩放方案了）。
另外就算是两套系统，也可以在 PC 端使用响应式布局的设计的，只不过处于开发安排没有足够的工期，所以才会考虑使用 `px2rem/px2vw` 这种方案来应付。如果是各种展示类型的 或者 重交互的，这种缩放方案就是不合适的。 所以我的认为在排除历史遗留和工期问题之后，依然使用这缩放方案的原因就是前端的懒惰。 |
 |
33
tsutomu 2023-07-31 18:28:11 +08:00
px 就是比较好的解决方案了，原生就实现了不同大小屏幕的缩放。rem vw 等方案都是 kpi 下的产物，减少自适应开发的工作量。实在不行就在网站下面添加一个自定义基本字号的功能，然后使用 rem
|
 |
34
leedarmau 2023-07-31 19:12:14 +08:00
就应该用 px 。
人家用大屏幕是为了看更多内容，用高分屏是更好的效果，不是让你显示成老人版的 |
 |
35
1039460820 2023-07-31 23:41:28 +08:00
用 px ，还是看设计跟用户电脑
|
|
36
xudaxian520bsz 2023-08-01 09:09:26 +08:00
@dfkjgklfdjg 缩放是必须的吧，因为实际开发中，移动端设备的尺寸实在是太多了，比如：国内的 Android 设备就喜欢天天发型号，难道我们也一个个去适配；在实际开发中，其实开发的思想很简单，设计给了一个 375 * 667 （ iphone 6 、7 、8 ，） 的设计图，那么我们就需要在不同的分辨率的屏幕上能够适配，这就是 rem 和 vw 的最基本的原理所在了。
为什么缩放，就是因为，管你用户掏出什么类型的 Android 或 iphone 手机，劳资照样保证页面不变形，布局不会错位。 |
|
37
dfkjgklfdjg 2023-08-01 09:20:03 +08:00
@xudaxian520bsz #36 ，所以说到底就是懒啊，另外 rem 和 vw 就不是一回事。平时用 px2rem 做做数据大屏的缩放适配也就算了，还想用一个方案全部解决掉，用户屏幕更大，不是想文字和方块展示的更大。
其实做好自适应设计就不需要考虑各种的分辨率，都是弹性布局在区间内做好适配就可以了，也同时解决了移动端横竖屏和笔记本端的系统缩放适配问题。 |
 |
38
summerwar 2023-08-01 10:12:27 +08:00
tailwindcss 上可以设定不同分辨率上的字体大小，比如 h1 ，写 text-lg lg:text-xl xl:text-2xl ，这样就可以实现默认 text-lg 字号，lg 上 text-xl ，xl 上 text-2xl ，具体可以自定义大小和尺寸
|
 |
39
mithenji 2023-08-01 11:02:34 +08:00
怎么没人提 vw
|
 |
40
mynameislihua 2023-08-01 16:28:26 +08:00
同意，不要无脑 rem ，一般给固定的宽高+flex 就能达到很不错的效果了而且内容可控
|
Select Language