Question

您好我想让HTML代码响应。这是我的代码，但它没有响应我应该怎么做。我听说过媒体查询。如何将它用于我的代码。在我的代码中只有内联css。我怎么可能让我的代码响应。

<div class="row_inner_wrapper  clearfix" style="background-color: #777777;background-position: left top;background-repeat: no-repeat; margin-top: 3%;">


<div style = "width: 60%; height:50%; font-weight: bold; font-size: 20px; float: left; background-color: #777777;">
<div style = "width: 28%;  float: left;">
<img src= "C://wamp//www//rushi.jpg";  alt="" style ="max-width: 100%; height: auto; width: 100%; margin-left:10%"></div>

<div style = "width: 72%; float: left";>
<div style="font-weight: bold; font-family: Patua One,Arial,Tahoma,sans-serif; text-align: center;"><strong>abc  </strong></div>
<div style = "text-align: center;">  </div>

<div style = "width: 30%; float: left; margin-left: 5%">
<span style="font-weight: bold;"><strong>abc</strong></span><br/>
<span> Bathroom </span></div>

<div style = "width: 30%; float: left;">
<span style="font-weight: bold;"><strong>abc </strong></span><br/>
<span>abc</span></div>

<div style = "width: 30%; float: left;">
<span style="font-wight: bold;"><strong>abc</strong></span><br/>
<span>abc </span></div>


</div>



</div>


<div style = "width: 40%;  float:left; font-weight: bold; font-size: 20px; ">
<div style = "width: 100%; float: left;">
<span></span><br/>
<span style="font-family: bold;"><strong>abc</strong></span>
</div>



</div>
</div>

Answer 1

您需要为父div添加宽度，以使子元素可以调整大小。在你的例子中，row_inner_wrapper应该有一些80％的宽度或者你想要的任何宽度。

<强> LINK

它适用于此代码，如果您希望完整的网页响应所有设备的复杂性，则需要添加

<meta name="viewport" content="width=device-width, initial-scale=1">

标记在文档的头部，还需要@media查询

Answer 2

这是响应式的基本结构。如果你想添加使用内部css，请在<head>。

中使用它

＆＃13;

.main-wrapper {
  min-height: 100px;
  background: black;
}
@media (max-width: 1023) {
  .main-wrapper {
    background: yellow;
  }
}
@media (max-width: 767) {
  .main-wrapper {
    background: green;
  }
}
@media (max-width: 479) {
  .main-wrapper {
    background: red;
  }
}

＆＃13;

<div class="main-wrapper"></div>

＆＃13;

正如swapnil solanke所述，请勿忘记在<meta name="viewport" content="width=device-width, initial-scale=1">

中添加<head>

Answer 3

@ w3debugger确实触及你可以使用@media queries和<meta name="viewport" content="width=device-width, initial-scale=1">。我使用它的方式是从Mobile设计开始，如果屏幕使用min-width扩展到某个宽度，则创建响应式更改。

/* Initial mobilephone state*/
.row_inner_wrapper div{
  padding:1em}

/* TABLETS */
@media only screen and (min-width: 40.063em) {
 .row_inner_wrapper div{
    padding:0}
}

/* LARGE SCREENS*/
@media only screen and (min-width: 64.063em) {
 .row_inner_wrapper div{
    /*something else*/}
}

Answer 4

首先，为什么你使用内联css？这是一种非常讨厌的编码方式.... 例如，您可以使用@media查询或使用引导框架。

如何使HTML代码响应

4 个答案: