如何将元素响应式地定位在页面的特定点,而不会因媒体查询而失去理智

问题描述 投票:0回答:1

所以,我有一个有点奇怪的想法。我的(正在进行中的)网站登陆的背景图像是我在 Blender 中制作的一座建筑物,我的想法是在建筑物的门上放置一个简单的 div,这会将用户从登陆页面重定向到点击后的真实主页。 我有这个背景图像的两个不同版本,我通过媒体查询在它们之间切换:用于横向设备的标准(水平)版本,以及用于纵向设备的适当剪切(垂直)版本。这意味着设备之间的门位置非常不一致。 现在的问题是,我正在疯狂地尝试找到一种解决方案来定位这个具有良好响应能力的“门”div。有什么技巧可以避免使用十亿次媒体查询吗?如果没有,至少处理这些查询最明智的方法是什么? (使用百分比?使用 vh 和 vw?使用像素?) 预先感谢。

html css media-queries
1个回答
0
投票

我认为你必须使用@media,除非你使用像bootstrap或tailwind这样的工具。 我知道有一些标准可以让它变得更容易一些。

手机:320-480px 平板电脑:481-768 像素 桌面:769-1024px Xl 桌面:1201 像素及以上

我使用 Tailwind,为此你可以编写内联 css,如 md: lg: xl: 而不是像素

你用的是什么前端框架?

© www.soinside.com 2019 - 2024. All rights reserved.