HTML - 文本/按钮对齐（CSS 媒体）[重复]

Question

这个问题已经存在：

HTML桌面和移动设备[关闭]

去年关闭。

https://jsfiddle.net/5d401nso/1/

#mobileview{
  /*background-image:url("");
  background-size:100% 100%;*/
  width:auto;
  height:auto;
}

@media(max-width: 768px){
  #mobileview{

width:411px;
height:411px;
   }
}
@media(max-width: 500px){
    #mobileview{

width:411px;
height:411px;
}
}

以上是我创建的 jsfiddle。

当前问题：不支持移动视图并寻找在移动视图中将文本和按钮对齐方式从中心更改为“左”的方法

我想要的解决方案：在移动视图中（最大宽度 768px 或 500px ）时，文本和按钮将对齐左侧而不是中心。

Answer 1

将 p { text-align: left } 放在您的 @media {} 中，在您希望它发生的任何断点处。 然而小tipp。 为了使其更具响应性，为您的图像提供最大宽度而不是静态宽度，这样您的图像就会在屏幕调整时调整大小。 另请注意，您有 500 和 700 像素的确切设置。 如果你说@media(max-width: 700px) 它将适用于所有小于 700px 的东西。 如果您想要向下 500 像素，则不需要定义 500 像素。 如果你想在 500px 和 700px 之间发生一些事情，我们 (min-width: 500px) 和 (max-width: 700px)

@media(max-width: 500px){
  #mobileview{
     max-width: 100%;
     height: auto;
  }
  p {
    text-align: left;
  }
}