【发布时间】：2020-12-14 15:55:11
【问题描述】：
我使用的是 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
}
}
如您所见，当手机尺寸为最大或接近最大宽度参数时，大部分像素都不会被使用。我的想法是：
- 为每 20 个像素创建更多 @media 查询代码行（假设从 320 像素到 640 像素） 这是 16 行 @media 查询行，像素大小为 320,340,360 等。
- 将宽度设置为 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+ 上的新变化，一切看起来都很棒。有些元素不再居中在主页上，但我会弄清楚的。
【问题讨论】：
-
不，不要为每 20 像素创建媒体查询——这太过分了，而且很难管理。您可以简单地使用百分比 - 即使没有计算，例如
width:94%提供 3% 的边距，与屏幕尺寸成比例的边距可以更美观。但是请注意，如果其他元素依赖于特定宽度，则对主题宽度的任何更改都可能会破坏布局。 -
你能先检查一下主题支持吗？因为似乎这是一个管理良好的主题。我相信它很容易解决。也许他们有一个主题设置，用于更宽的视图，比如全宽视图模板。
-
@Rosh_LK 我检查了它，并没有默认带有主题的全宽模板。我有一个“Elementor Full Width”，但我只有 1 个 elementor 页面。
-
@FluffyKitten % 仍然可以在媒体查询中工作吗？例如，我将最大宽度设置为 480 像素，并将宽度设置为 94%。如果 380 像素设备访问我的网站，宽度是 380 像素的 94% 还是 480 像素的 94%？感谢您的帮助！
-
@FluffyKitten 我也联系了主题开发人员，但因为我的支持过期了，我没有得到完整的答案，但它仍然是一个信息丰富的答案。他们代码的不同之处在于没有 mkdf-header-vertical 类。代码以“.single-post”类开头，所以我想这是我想要实现的正确方法。