html - 根据设备调整 div 大小

Question

因此，如果我的 div 是移动设备(特别是智能手机)，我无法调整它的大小。现在我使用的移动设备是iPhone7plus。所以我不确定我的尺寸是否适用于此设备。

我原来的 css(用于桌面)是这样的:

div#allContent div#mainContent div#contentText {
  width:50%;
  /*other styles*/
}

因此屏幕上的文本位于页面的一半，注册表单位于另一半。现在，当我在 iPhone 中查看时，表单中的下拉元素太大，我看不到下拉框中的文本。因此，我尝试将 contentText div 的宽度设置为 100%，然后将表单 div 设置为 100%。

我把它添加到我的 css 文件的底部

我试过第一行:

/*@media only screen and (min-device-width:320px) and (max-device-width:480px) {
@media screen and (min-device-width:320px) and (max-device-width:480px) {
  div#allContent div#mainContent div#contentText {
    width:100%;
  }
  div#allContent div#mainContent div#signupContent {
    width:100%;
  }
}

是不是因为我有一个更大的移动设备，所以它不工作？我应该增加最大值吗？我正在学习移动设备支持。

Answer 1

i pad和记事本设备宽度开始后，移动设备最大宽度可以为767。

@media screen and (min-device-width:320px) and (max-device-width:767px) {
  //code comes here
 }