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-row-grid-section {
        width: 420px
    }
}

如您所见，当手机尺寸为max或接近max-width参数时，大部分像素均未使用。我想做的是：

1. 每20个像素创建更多@media查询代码行（比如说从320px到640px） @media查询行的16行，像素大小为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 +的新更改，一切看起来都很棒。一些元素不再位于主页的中心，但是我会弄清楚的。

解决方法

您可以使用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-row-grid-section {
    width: 95%;
}

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

在这种情况下，所有内容都在.mkdf-header-vertical下，因此，如果只有该类别的一个容器，或者该类别的容器具有一致的宽度，并且.elementor-widget-wrap是其父{{1 }}，那么这些元素的宽度确实会保持一致。

如果要在容器的边缘和这些元素之间保持一致的像素数，则假定上一段中的条件成立，您可以简单地执行类似的操作

.mkdf-header-vertical

并将上述宽度设置为.mkdf-header-vertical { padding-left: 20px; padding-right: 20px; } 。