Question

我无法将此代码转换为动态代码。如何调整div的宽度，使其动态调整。当我们使用任何设备，如移动桌面平板电脑或任何其他设备时，它应显示相同。当我们调整大小时，它不会改变外观。我使用百分比调整了宽度，但它无法正常工作。

＆＃13;

    .observeSingleEvent(of: .value, with: { (snapshot) in               
        if let dict = snapshot.value as? [String : Any] {
            let userId = dict["uid"] as? String ?? ""
            print("Found uid: \(userId)")
            self.userDoesExist = true
        }
    })

＆＃13;

Answer 1

对HTML中的所有内容进行内联样式不是一种好习惯。

您可以使用media-query屏幕尺寸以下的680px，div将占据容器的整个宽度。

＆＃13;

.bubble1 {
  width: 650px;
}

.rectangle {
  width: 680px;
}

.triangle-r {
  left: 650px;
}

@media only screen and (max-width: 680px) {
  .bubble1 {
    width: 100%;
  }
  .rectangle {
    width: 110%;
  }
  .triangle-r {
    left: 100%;
  }
}

＆＃13;

<div class="bubble1" style="background: rgb(255, 255, 255); border-radius: 
    10px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 8px; clear: both; font-family: 
    Arial, Helvetica, sans-serif; font-size: 12px; margin: 10px auto; position: 
    relative; z-index: 9;">

  <div class="rectangle" style="background: rgb(127, 157, 185); box-shadow: 
    rgba(0, 0, 0, 0.55) 0px 0px 4px; float: left; height: 50px; left: -15px; 
    position: relative; top: 30px;  z-index: 10;">
    <h2 style="color: white; font-size: 30px; font-style: italic; font- 
       weight: 
       normal; line-height: 1.2em; margin: 0px 0px 20px; padding: 6px 0px 0px; 
       text-align: center; text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px;">
      abash</h2>
  </div>

  <div class="triangle-l" style="border-color: transparent rgb(125, 144, 163) 
    transparent transparent; border-style: solid; border-width: 15px; height: 
    0px; left: -30px; position: relative; top: 65px; width: 0px; z-index: -1;">
  </div>

  <div class="triangle-r" style="border-color: transparent transparent 
    transparent rgb(125, 144, 163); border-style: solid; border-width: 15px; 
    height: 0px;  position: relative; top: 35px; width: 0px; z- 
    index: -1;">
  </div>

  <div class="info" style="color: #999999; padding: 60px 25px 35px;">
    <div id="inf303">
      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Meaning</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        शर्मिंदा करना, Cause to feel embarrassed</div>

      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Key</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        बेशर्म</div>
      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Link</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        बेशर्म लोगों की खुद की तो इज्ज़त होती नहीं और दूसरों को शर्मिंदा करते रहते हैं.</div>

      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Synonyms</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        Embarrass, shame, disconcert, confound, awe</div>

      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Usage</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        she was not&nbsp;<span style="background-attachment: initial; background- 
    clip: initial; background-image: initial; background-origin: initial; 
    background-position: initial; background-repeat: initial; background-size: 
    initial; border: none; color: #333333; padding: 0px 
    2px;">abashed</span>&nbsp;at being caught</div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

<div style="border: 1px solid red; padding: 15px; min-width:100px; display: inline-block height: fit-content">
    test text
</div>

试试这个。

Answer 3

您可以尝试使用vw单位设置div的宽度。 vw设置元素相对于视口宽度的宽度。对于视口高度，还有vh。

示例：

width = 50vw;

这会将元素的宽度设置为视口宽度的50％。因此，div的宽度将动态设置为适合各种屏幕尺寸。

Answer 4

要使用css对页面做出响应，您可以使用@media only screen property。 媒体查询允许您根据自己的喜好更改不同设备和屏幕尺寸的元素样式：

@media only screen and (max-width: 400px) //Only apply the following styles for screen sizes than do not exceed a maximum width of 400px. 
  {
       div 
        {
           //Add styles here for all div elements, to be applied only on screen sizes less than 400px wide.
         }

       body 
        {
          //Add styles here for the document body, to be applied only on screen sizes less than 400px wide.
         }
   }

Div和body样式仅适用于宽度小于400px的屏幕。

您可以根据需要设置任意数量的媒体查询，以使您的网站在所有设备上做出响应。

使用div创建动态框

4 个答案: