如何使html代码响应

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％或您想要的任何宽度。

链接

这是针对此代码的，如果您希望完整的网页响应所有设备的兼容性，则需要添加

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

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

Answer 2

这是响应的非常基本的结构。 如果要添加使用内部CSS，请在<head>使用它。

 .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; } } 

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

正如swapnil solanke所说，不要忘记在<head>添加<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查询或使用bootstrap框架。