如何解决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参数时,大部分像素均未使用。我想做的是:
- 每20个像素创建更多@media查询代码行(比如说从320px到640px) @media查询行的16行,像素大小为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 +的新更改,一切看起来都很棒。一些元素不再位于主页的中心,但是我会弄清楚的。
解决方法
您可以使用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;
}
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。