Сделать html отзывчивым

Question

Я довольно новый для Html. У меня есть веб-страница, которую мне нужно сделать отзывчивой для использования на планшетах и ​​мобильных телефонах. Что мне нужно сделать, чтобы это произошло.

стили:

#header { 
     font-size:30px; 
     color:white; 
     text-align:center; 
     padding-top:10px; 
     padding-bottom:10px; 
    } 


</style> 

HTML:

<div style="background-image:url(); height:350px; width:900px;margin-left:auto;margin-right:auto;"> 
    <div id="header">text</div> 
    <div id="para">text</br>text</div> 
    <div id="splash_img"><img src=""/></div> 

    <div id="game_img"><img src="" /> 

     <div id="video_play"><img src=""/></div> 
     </div> 

форма:

 <div id="form_container"><div id="form"><form> 
     <div class="form_label">Name:</div> <div class="form_input"><input type="text" name="firstname" style="width:200px; display:inline-block"></div> 
     <div class="form_label">Surname:</div> <div class="form_input"><input type="text" name="lastname"style="width:200px; display:inline-block"></div> 
     <div class="form_label">Email: </div><div class="form_input"><input type="text" name="email"style="width:200px; display:inline-block"></div> 
     <div style="padding-left:40px; padding-top:10px"><input type="submit" value="text"></div> 
     </form></div></div> 

</div> 

Answer 1

Есть несколько библиотек, которые вы можете найти полезными. И это кошмарный код. Вам действительно нужно удалить эти css из HTML и импортировать их в файл css.

http://angrycreative.se/modern-css-frameworks-for-desktop-tablet-mobile/ 

http://kyleschaeffer.com/development/responsive-layouts-using-css-media-queries/