为什么90%的div-height在两个不同的屏幕上是不同的？

在回答这个问题之前，首先需要了解一些前端开发的基础知识。

在前端开发中，div元素是HTML中的一个常用标签，用于创建一个块级容器。div的高度可以通过CSS的height属性来设置，可以使用像素（px）、百分比（%）、视窗单位（vw、vh）等单位进行设置。

然而，为什么90%的div-height在两个不同的屏幕上是不同的呢？这是因为不同的屏幕分辨率、设备像素密度（DPI）以及浏览器的缩放等因素会影响到网页的显示效果。

屏幕分辨率：屏幕分辨率指的是屏幕上水平和垂直方向上的像素数量。不同的屏幕分辨率会导致网页在不同屏幕上显示的大小不同，从而影响到div元素的高度。
设备像素密度（DPI）：设备像素密度是指每英寸的像素数量，通常以每英寸像素数（PPI）来衡量。高像素密度的设备（如Retina屏幕）具有更多的物理像素，相同大小的元素在高像素密度设备上显示会更加清晰，但也会导致元素在物理尺寸上变小，从而影响到div元素的高度。
浏览器缩放：用户可以通过浏览器的缩放功能来调整网页的显示比例。当用户对网页进行放大或缩小操作时，div元素的高度也会相应地改变。

综上所述，90%的div-height在两个不同的屏幕上是不同的主要是由于屏幕分辨率、设备像素密度和浏览器缩放等因素的影响。为了在不同屏幕上实现一致的显示效果，可以采用以下方法：

使用相对单位：相对单位（如百分比、视窗单位）可以根据屏幕大小自动调整元素的尺寸，从而实现在不同屏幕上的一致性。例如，可以使用百分比设置div的高度，使其相对于父元素或视窗的高度进行调整。
响应式设计：通过使用CSS媒体查询和弹性布局等技术，可以根据不同的屏幕尺寸和设备特性，为不同的屏幕大小提供不同的样式和布局，从而适应不同屏幕上的显示需求。
使用JavaScript动态计算：通过JavaScript可以获取屏幕分辨率、设备像素密度等信息，并根据这些信息动态计算div的高度，从而实现在不同屏幕上的一致性。

需要注意的是，以上方法仅为解决div高度在不同屏幕上的一致性问题的一些常用做法，并不是万能的解决方案。在实际开发中，还需要根据具体情况综合考虑各种因素，并进行适当的调整和优化。

腾讯云相关产品和产品介绍链接地址：