如何使HTML代碼響應

嗨，我想使HTML代碼響應。這是我的代碼，但它不響應，我應該怎麼做。我聽到了關於媒體查詢的一些事如何將其用於我的代碼。在我的代碼中只有內聯css在那裏。我怎麼可能讓我的代碼響應。如何使HTML代碼響應

<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>

來源

2015-03-31 user3471546

-1

首先，爲什麼是U使用內聯CSS？這是一個非常討厭的編碼方式.... 例如，您可以使用@media查詢或使用引導框架。

來源

2015-03-31 06:55:54

不確定這個行爲是否會回答這個問題..儘管作爲一個評論會很好 – 2015-03-31 07:00:29

您需要爲父div添加寬度以使子元素可以重新調整大小。在你的例子中，row_inner_wrapper應該有一些寬度定義爲80％或任何你想要的。

LINK

，它是這個代碼，如果你想要完整的網頁響應所有設備compitibility你需要添加

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

標籤在該文件，還你的頭部需要@media查詢

來源

2015-03-31 07:00:43

這是響應的基本結構。如果你想添加使用內部的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>

來源

2015-03-31 07:06:40 w3debugger

爲@ w3debugger那樣觸摸時，你可以利用@media queries和<meta name="viewport" content="width=device-width, initial-scale=1">添加<meta name="viewport" content="width=device-width, initial-scale=1">。我使用它的方式是從Mobile設計開始，如果屏幕使用最小寬度擴展到某個寬度，則創建響應式更改。

/* 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*/} 
}

來源

2015-03-31 08:46:33 Rocksteady

如何使HTML代碼響應

回答

相關問題