时间戳

首页 > 解决方案 > 如何在 Wordpress 中为每个操作系统设置 css 值？

css - 如何在 Wordpress 中为每个操作系统设置 css 值？

问题描述

我知道我知道这可能只是一种解决方法，但我只是一个 Wordpress 业余爱好者，目前需要一个快速的解决方案，即使是一个肮脏的解决方案......

我的 Wordpress 网站有一个侧边栏。不幸的是，我有一个问题，在 android 上（可能还有 IOS - 没有检查）侧栏几乎占据了移动屏幕宽度的一半，而在 Windows 中，在 pc\laptop 屏幕上看起来还不错。所以，我在自定义 CSS 中缩小了侧边栏的宽度，现在我遇到了相反的问题。看起来在移动设备上找到，在 PC 显示器上看起来很糟糕。

我正在使用氦主题。

这是我用来设置侧边栏宽度的 css 值：

width: calc(100% - 100px);

我检查了“浏览器和操作系统查找器”插件，但不明白如何根据我的需要使用。

我想专业人士有更好的解决方案，但现在即使是快速而肮脏的解决方案也会受到欢迎。

侧边栏（填充按钮小部件）与 PC 屏幕上的背景项目重叠的示例：

侧边栏（充满按钮小部件）与 PC 屏幕上的背景项目重叠的示例

谢谢你。

标签： csswordpress

解决方案

您不应该根据设备来确定要显示的内容，而是根据特征来确定显示的内容，为此我建议使用 css 媒体查询https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries /Using_media_queries

这允许您根据大小和其他因素更改 css，例如

@media (min-width: 300px) and (max-width:480px) {
     /* styles here */
}

您甚至可以添加诸如方向之类的东西

@media (orientation: landscape) { ... }

这比只寻找特定设备（例如 iphone）要好的原因是，如果 Apple 发布了具有更大屏幕的新 iPhone，您的标准样式表可能有效，也可能无效。媒体查询将为您提供更大的灵活性。

推荐阅读