时间戳

首页 > 解决方案 > 控制 div 宽度的媒体查询

html - 控制 div 宽度的媒体查询

问题描述

width:100%当屏幕宽度小于 600 像素时，需要有一个 div 及其子输入。为什么下面的代码不能做到这一点？

当屏幕高于 600 像素并且在较小的屏幕上彼此低于 100% 宽度时，我需要并排潜水。因此他们的输入内容。

谢谢

/* include the padding in the total size of all elements */
*, *::before, *::after {
  box-sizing: border-box;
}
/* prevnet page refresh when overscrolling happens */
body {
  overscroll-behavior: contain;
}

#contact {
  padding: 1px;
  float: left;
  width: 250px;
  background-color: rgb(235, 115, 205);
}
#vehicle {
  padding: 1px;
  float: left;
  width: 250px;
  background-color: aqua;
}
input {
  width: 100%;
  padding: 2px;
}

@media  screen and (max-width: 600px) {
  div {
    width: 100%;
  }
}
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div id="contact">
    <input type="text" placeholder="Company name">
    <input type="text" placeholder="Full name">
    <input type="text" placeholder="Address">
    <input type="tel" placeholder="Phone numbers">
    <input type="email" placeholder="Email">
  </div>
  
    <div id="vehicle">
    <input type="text" placeholder="plate, vehicleId">
    <input type="text" placeholder="date, make, modle">
    <input type="text" placeholder="engine size, code, drive">
    <input type="text" placeholder="color, shape">
  </div>
  
  </body>

标签： htmlcss

解决方案

您需要提高媒体查询选择器的准确性，div#contact, div#vehicle { width: 100%; }而不仅仅是div. 媒体查询 css 工作得很好，但会被上面更准确的那个覆盖（按元素 ID 选择比按元素类型选择更准确）。

/* include the padding in the total size of all elements */
*, *::before, *::after {
  box-sizing: border-box;
}
/* prevnet page refresh when overscrolling happens */
body {
  overscroll-behavior: contain;
}

#contact {
  padding: 1px;
  float: left;
  width: 250px;
  background-color: rgb(235, 115, 205);
}
#vehicle {
  padding: 1px;
  float: left;
  width: 250px;
  background-color: aqua;
}
input {
  width: 100%;
  padding: 2px;
}

@media  screen and (max-width: 600px) {
  div#contact,
  div#vehicle {
    width: 100%;
  }
}
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div id="contact">
    <input type="text" placeholder="Company name">
    <input type="text" placeholder="Full name">
    <input type="text" placeholder="Address">
    <input type="tel" placeholder="Phone numbers">
    <input type="email" placeholder="Email">
  </div>
  
    <div id="vehicle">
    <input type="text" placeholder="plate, vehicleId">
    <input type="text" placeholder="date, make, modle">
    <input type="text" placeholder="engine size, code, drive">
    <input type="text" placeholder="color, shape">
  </div>
  
  </body>

推荐阅读