请问 Web 布局是用什么单位呀？

[nnegier]

我刚刚学完 React ，React 很香，然后我用 TailwindCSS 写了一个小页面，这个页面我是直接用像素的，但这样肯定是有问题的，在这种 1080p 的屏幕还好，但在 5k 屏或者 6k 屏那个页面就会显得巨小。

我是做 Android 的，在 Android 就是无脑用 dp ，如果要特定适配一些屏幕，就修改 dp 到 px 的转换值就好。

看不懂啊，只懂像素这个单位，有系统点的书籍推荐吗？ rem 我也查了，确实看不太懂

[GTim]

rem

[wolfan]

我一直用 rem ……

[ToPoGE]

<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

[zhhanging]

一般不需要处理，高分屏会开缩放，不影响的，如果一个用户用 5k 6k 屏幕，但是还是 100%缩放，那他的所有用户界面都会变得很小，基本无法正常使用

[lynan]

一样的，做 px 到 rem 的转换就好了

[crysislinux]

就用 px 也可以。5k 屛一般也是缩放显示的，无所谓。

[horizon]

tailwind 不是已经给你处理了么

[LandCruiser]

页面在高分屏下看起来小是正常现象。如果你想所有屏幕下，显示比例都一样，那就得严格用百分比，或者 vw ，vh

[Leviathann]

tailwind 默认不是 rem 吗，你每个样式都手动改成 px ？

[nnegier]

@Leviathann
@horizon 我不熟。我的确是全部都改成像素了-[xxpx]。我回去看看

[darkengine]

用 px 就可以了，浏览器也不是按照物理分辨率显示的，是按照逻辑分辨率。例如 iPhone 的： https://www.ios-resolution.com/ 浏览器的 px 是指 Logical Width 和 Logical Height

[thetbw]

同 4 楼，就按照 1080p 用像素设计就行了，目前 windows 大多数软件都是这样，4k 的话开 200%缩放系统会自动处理，不开的话 windows 自带的开始菜单都会小的看不清，根本不是你的问题

[LavaC]

我自己做项目是用 px 的，就算是高分屏，你浏览器内尺寸往往也没有几千乘几千这么大。
公司项目用的 px2rem ，只能说大致效果保证了各种尺寸差不多，但是也会导致很多额外小问题，比如在这你这里字体刚好不换行，在人家那就换行了。

[ZGame]

同上 ,px2rem,
如果是数据大屏的话 需要全屏展示就要固定 px,利用 css scale 去做伸缩

[chf007]

要看你的项目是 PC 端，还是移动端。

移动端就用上边说的缩放的解决。

PC 端还要看你是搞内容型的还是展示型的，内容型一般有个最大宽度，然后整体居中展示，你搞很宽体验也不好。
展示型的也是缩放解决。

[hevi]

px 和 rem

[cslive]

TailwindCSS 默认不上 rem 吗

[shenyuzhi]

没有特殊需求的话，用 px 。
px+meta 声明+flex+grid 能解决 99%的需求。

[xudaxian520bsz]

rem 已经开始逐渐淘汰了，现在主流是 vw 和 vh ，原理和 rem 类似，但是浏览器原生支持。

[z1645444]

px ，插件 postcss-vw-to-px ，本质上还是用 vw

[crazyTanuki]

rem 可以用,但是 vw 比较适合一些,因为这个单位上标准就是为了解决这方面的问题的

[crazyTanuki]

不过 h5,ipad,pc 还是得分开媒体查询,不能 vw 一把梭

[dufu1991]

你都用 Tailwind 了，还问这种问题。一般来说，移动端多使用 flex 布局，宽高都不写死，除非是给图片固定宽高比的的容器。这样也实现了响应式布局。我的项目中（移动端）尺寸都写的很少。

[thinkershare]

没有统一的标准答案，每个单位都有自己的使用场景，我一般在可视化这种场景中使用 vw/vh, PC 网页使用 px, 移动网页使用 rem, 打印使用 pt

[learnshare]

/t/835716

谨慎看待各种“缩放”手段

[learnshare]

/t/877412 em/rem

[7gugu]

3202 年直接用 rem 吧，只要做一次，其他场景只要改一下 root-fontsize 就能兼容

[superedlimited]

如果不设置，那么 1rem 就是 16px 。但为了做适配，应结合 viewport 来设置 1rem 等于多少 px 。详细谷歌一下 viewport+rem ，结果有很多。

[dfkjgklfdjg]

默认 `px` 就行了，遇到自适应的情况在考虑用 `vw/vh` 这种视窗单位。
用 `em/rem` 做兼容（适配）的时代已经过去了。

反正我是非常抗拒 `flexible` + `px2rem/px2vw` 这种无脑一刀切的缩放方案。
响应式，响应式，并不是缩放而已。

[xudaxian520bsz]

@dfkjgklfdjg 那是因为现在的网站是两种开发模式：第一种，就是响应式网站，以小米网站为例，适用各种设备；第二种，以京东网站为例，pc 设备一套，移动端设备一套，并且 pc 使用的就是浮动布局，移动端使用功的就是 flex + vw 的方式。

[xudaxian520bsz]

@nnegier 前端和安卓等不一样，操作系统将 DP 抽象了，比如我们可以统一设置 1920px * 1080px ，缩放比是 100% ，这样就不用区分什么 2k 屏、4k 屏了，统一按照 1920px * 1080px 来做；其实，在前端对移动站有两种对待：第一种，就是响应式布局，开发比较麻烦，但是适用各种设备，以小米官网为例；第二章，是 pc 端一套，移动站一套，以京东为例，并且移动站一般使用 vw + flex 进行开发，grid 也行。

[dfkjgklfdjg]

@xudaxian520bsz #30 ，这种“商城”模式下依旧使用缩放方案的大多是都是历史遗留问题（淘宝 PC 改版之后已经不在使用这种缩放方案了）。
另外就算是两套系统，也可以在 PC 端使用响应式布局的设计的，只不过处于开发安排没有足够的工期，所以才会考虑使用 `px2rem/px2vw` 这种方案来应付。如果是各种展示类型的 或者 重交互的，这种缩放方案就是不合适的。

所以我的认为在排除历史遗留和工期问题之后，依然使用这缩放方案的原因就是前端的懒惰。

[tsutomu]

px 就是比较好的解决方案了，原生就实现了不同大小屏幕的缩放。rem vw 等方案都是 kpi 下的产物，减少自适应开发的工作量。实在不行就在网站下面添加一个自定义基本字号的功能，然后使用 rem

[leedarmau]

就应该用 px 。

人家用大屏幕是为了看更多内容，用高分屏是更好的效果，不是让你显示成老人版的

[1039460820]

用 px ，还是看设计跟用户电脑

[xudaxian520bsz]

@dfkjgklfdjg 缩放是必须的吧，因为实际开发中，移动端设备的尺寸实在是太多了，比如：国内的 Android 设备就喜欢天天发型号，难道我们也一个个去适配；在实际开发中，其实开发的思想很简单，设计给了一个 375 * 667 （ iphone 6 、7 、8 ，） 的设计图，那么我们就需要在不同的分辨率的屏幕上能够适配，这就是 rem 和 vw 的最基本的原理所在了。
为什么缩放，就是因为，管你用户掏出什么类型的 Android 或 iphone 手机，劳资照样保证页面不变形，布局不会错位。

[dfkjgklfdjg]

@xudaxian520bsz #36 ，所以说到底就是懒啊，另外 rem 和 vw 就不是一回事。平时用 px2rem 做做数据大屏的缩放适配也就算了，还想用一个方案全部解决掉，用户屏幕更大，不是想文字和方块展示的更大。
其实做好自适应设计就不需要考虑各种的分辨率，都是弹性布局在区间内做好适配就可以了，也同时解决了移动端横竖屏和笔记本端的系统缩放适配问题。

[summerwar]

tailwindcss 上可以设定不同分辨率上的字体大小，比如 h1 ，写 text-lg lg:text-xl xl:text-2xl ，这样就可以实现默认 text-lg 字号，lg 上 text-xl ，xl 上 text-2xl ，具体可以自定义大小和尺寸

[mithenji]

怎么没人提 vw

[mynameislihua]

同意，不要无脑 rem ，一般给固定的宽高+flex 就能达到很不错的效果了而且内容可控