时间戳

首页 > 解决方案 > Wordpress - 带有媒体查询的响应式宽度

css - Wordpress - 带有媒体查询的响应式宽度

问题描述

我正在使用来自 Mikado 的 Backpack Traveler 主题，我对从移动设备查看文章的宽度不满意。我有一个想法，但我想在我做之前在这里征求意见，因为我是新手。

这是主题当前使用的代码（我将仅添加 2 个示例）：

@media only screen and (max-width:768px) {
    .mkdf-header-vertical .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element,
    .mkdf-header-vertical .mkdf-container-inner,
    .mkdf-header-vertical .mkdf-grid,
    .mkdf-header-vertical .mkdf-row-grid-section {
        width: 600px
    }
}

@media only screen and (max-width:680px) {
    .mkdf-header-vertical .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element,
    .mkdf-header-vertical .mkdf-container-inner,
    .mkdf-header-vertical .mkdf-grid,
    .mkdf-header-vertical .mkdf-row-grid-section {
        width: 420px
    }
}

如您所见，当手机尺寸为最大或接近最大宽度参数时，大部分像素都没有使用。我想做的是：

  1. 每 20 个像素创建更多的@media 查询代码行（假设从 320px 到 640px）这是 16 行 @media 查询行，像素大小为 320,340,360 等。
  2. 将宽度设置为 calc(100% - 20px)

这肯定不是最好的方法，但我没有任何其他想法，所以我决定在这里问。

编辑：我已经联系了主题开发人员，他们告诉我改用这段代码

@media only screen and (max-width: 480px){
 .single-post .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element, 
 .mkdf-container-inner, .mkdf-grid, .mkdf-row-grid-section {
 width: X; 
 } 
}

我猜 .single-post 仅适用于文章本身，因此在弄乱宽度大小时不会破坏任何内容。我已将宽度设置为 95%，最大宽度为 480 像素。我会为 680px、768px 和 1024px 做同样的事情。

编辑 2：我尝试了三星 Galaxy S9+ 的新变化，一切看起来都很棒。有些元素不再以主页为中心，但我会弄清楚的。

标签： csswordpresswidthmedia

解决方案

您可以使用vw（视口宽度）单位并减少（甚至可能消除）对这些@media断点的需求，例如：

.mkdf-header-vertical .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element,
.mkdf-header-vertical .mkdf-container-inner,
.mkdf-header-vertical .mkdf-grid,
.mkdf-header-vertical .mkdf-row-grid-section {
    width: 95vw;
}

该vw单位表示视口宽度（浏览器窗口大小）的 1%，因此95vw是浏览器窗口宽度（或全屏浏览器的屏幕宽度，如手机和平板电脑上的屏幕宽度）的 95%，与设备大小无关.

编辑：根据 FluffyKitten 的评论，最好使用旧的%而不是vw. 如果元素在同一容器或不同容器下但宽度一致，则如下所示会更好：

.mkdf-header-vertical .elementor-widget-wrap>.mkdf-row-grid-section.elementor-element,
.mkdf-header-vertical .mkdf-container-inner,
.mkdf-header-vertical .mkdf-grid,
.mkdf-header-vertical .mkdf-row-grid-section {
    width: 95%;
}

顺便提一句。%比或断点更向后兼容。vw@media

在这种情况下，一切都在 下.mkdf-header-vertical，因此如果该类只有一个容器，或者该类的容器具有一致的宽度，并且如果.elementor-widget-wrap是其 parent 的 100% .mkdf-header-vertical，那么这些元素确实具有一致的宽度。

如果您希望容器边缘和这些元素之间的像素数一致，那么假设上一段中的条件成立，您可以简单地执行类似的操作

.mkdf-header-vertical { 
    padding-left: 20px;
    padding-right: 20px;
}

并将上述宽度设置为100%.

推荐阅读