时间戳

首页 > 解决方案 > Pad Left 在移动设备上不起作用

css - Pad Left 在移动设备上不起作用

问题描述

左边的垫子不适用于我的移动代码。我正在尝试用文章 div 填充段落文本。它似乎在桌面分辨率上运行良好。有什么线索吗？谢谢！

@media only screen and (max-width: 400px) {
  article {
    width: 100%;
    margin: auto;
  }
  article h2 {
    width: 100%;
    margin: 10px;
    text-align: left;
    line-height: 1.4em;
    font-size: 30px;
    z-index: -1;
    opacity: 1;
    padding: 10px;
  }
  article p {
    width: 100%;
    margin: auto;
    padding-left: 10px;
  }
}
<article>
  <h2><em> "Fanwood Text is a revival of Fairfield. Duh."</em></h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</article>

标签： css

解决方案

它似乎是基于我在这个 JSFiddle 中看到的 - 这里。我添加了背景黄色以观察缩放浏览器窗口时发生的变化。此外，为了更好地可视化与媒体查询一起使用的更改，我将左边的填充加倍到 20px

    @media only screen and (max-width: 400px) {

article {
width: 100%;
margin: auto;

}

article h2 {
width: 100%;
margin: 10px;
text-align: left;
line-height: 1.4em;
font-size: 30px;
z-index: -1;
opacity: 1;
padding: 10px;

}

article p {

width: 100%;
margin: auto;
padding-left: 20px;
background: yellow;

}
}

推荐阅读