如何使html代碼響應
[英]how to make html code responsive
問題描述
嗨，我想使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>
4 個解決方案
解決方案1
1 2015-03-31 07:00:43
您需要為父div添加寬度以調整子元素的大小。 在示例中，row_inner_wrapper的寬度應定義為80％或您想要的任何寬度。
這是針對此代碼的，如果您希望完整的網頁響應所有設備的兼容性，則需要添加
<meta name="viewport" content="width=device-width, initial-scale=1">
標記在文檔的頭部，還需要@media查詢
解決方案2
1 2015-03-31 07:06:40
這是響應的非常基本的結構。 如果要添加使用內部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>
解決方案3
0 2015-03-31 08:46:33
就像@ 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*/}
}
解決方案4
-1 2015-03-31 06:55:54
首先，為什么您要使用內聯CSS？ 這是一種非常討厭的編碼方式。...例如，您可以使用@media查詢或使用bootstrap框架。
如何使用HTML代碼制作一個響應框？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.