使HTML响应

时间:2014-01-20 12:17:54

标签: html5

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

1 个答案:

答案 0 :(得分:1)

您可以找到一些有用的库。这是一个噩梦般的代码。您确实需要从HTML中删除这些css并将其导入css文件。

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

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