Как сделать 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

Прежде всего, почему у использование встроенного CSS? Это очень неприятный способ кодирования ... Например, вы можете использовать запросы @media или использовать фреймворк bootstrap.

источник

2015-03-31 06:55:54

не уверен, что этот actaully отвечает на вопрос .. было бы хорошо, как комментарий, хотя –

Вам нужно добавить ширину для родительского 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 сказал, не забудьте добавить в <meta name="viewport" content="width=device-width, initial-scale=1"><head>

источник

2015-03-31 07:06:40 w3debugger

как @ w3debugger сделал коснемся вы могли бы использовать @media queries и <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-код отзывчивым

ответ

Смежные вопросы