Question

左侧的键盘不适用于我的移动代码。我试图用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>

Answer 1

它似乎基于in this JSFiddle -here.的工作原理，我添加了背景黄色以观察缩放浏览器窗口时发生的更改。另外，我将填充向左增加了一倍，达到20像素，以便更好地可视化媒体查询中的更改

    @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;

}
}

左移键盘在移动设备上不起作用

1 个答案: