响应式 css 适合任何浏览器和分辨率答案

【问题标题】：Responsive css to fit in any browser and resolution响应式 css 适合任何浏览器和分辨率
【发布时间】：2014-05-06 08:16:13
【问题描述】：

大家好，能帮帮我吗？？我想做的是每次我放大浏览器时，我希望它仍然适合屏幕或浏览器，特别是在 IE 中！请..

问题是每次我放大工具按钮都会淡出，其他控件请帮忙谢谢！

这就是我所拥有的..

CSS

 * {
        margin: 0;
        padding: 0;
    }

    html, body {
        height: 100%;
        background:#ecf0f1;
    }

    body {
        font-family: helvetica, arial, sans-serif;
        width: 100%;
        overflow-y: scroll;
    }

    .main {
        width: 100%;
        height: 100%;
    }

    .panel {
        min-height: 100%;
    }

    .sidebar {
        width: 8%;
        background-color: #111;
        text-align: center;
        position: fixed;
    }

    .sidebar ul {
        padding: 24px 0;
    }

    .main-box {
        float: right;
        width: 75%;
        margin-right:15%;
        margin-top:2%;
        background:rgba(255,255,255,0.2);
        box-shadow:rgba(0,0,0,0.6) 0 1px 4px 0;
        border-bottom:10px solid #0dabc9;
      }

    h2
    {

        font-size: 10pt;
        font-weight: bold;
    }

    img
    {
        height:50px;
        width:50px;
    }


    .tabletextgroup
    {
    margin-top:20px;
    margin-bottom:20px; 
    }

    .textgroup
    {   
        position:relative;
        font-weight:bold;
        font-size:11px;
        color:#555;
        padding:4px;
    }

    .textgroup span
    {
        display:inline-block;
        width:10%;
        border:1px solid #2980b9;
        padding:5px;
        /*background:#bdc3c7;*/
        background:#2980b9;
        border-radius:2px;
    }

    .textgroup span img
    {
        vertical-align:bottom;
        width:16px;
        height:16px;
        padding:0px 1px;
    }

    .textgroup input[type=textbox]
    {
        border:1px solid #b0b0b0;
        padding:5px;
        margin-left:-1px;
        width:75%;
    }

    .checkgroup, .emptygroup
    {
    vertical-align:top;
    font-weight:bold;
    font-size:10px;
    color:#444;
    display:block;
    }

    .emptygroup
    {
    vertical-align: top;
    font-weight:bold;
    font-size:10px;
    color:#444;
    display: block;
    margin-top:-11px;
    }

    .checkgroup, .emptygroup
    {
    padding:5px;
    }


    .checkgroup input[type="checkbox"]
    {
    display:none;
    }

    .emptygroup input[type="checkbox"]
    {
    display:none;
    }

    .checkgroup span
    {
    display:inline-block;
    width:15%;
    border:1px solid #ccc;
    padding:4px;
    border-radius:2px 0 0 2px;
    text-align: left;
    background:#2980b9;
    color:#fff;
    font-size:7pt;
    }

    .emptygroup span
    {
    display:inline-block;
    width:15%;
    padding:4px;
    text-align:left;
    background:none;
    margin-left:2px;
    }


    .checkgroup span img, .emptygroup span img
    {
    vertical-align:bottom;
    width:16px;
    height:16px;
    padding:0px 5px;
    }

    .checkgroup label, .emptygroup label
    {
    vertical-align:top;
    margin-left:-1px;
    width:18%;
    text-align:left;
    text-indent:5px;
    display:inline-block;
    border:1px solid #ccc;
    padding:6px 5px;
    font-size:7pt;
    }

    .emptygroup label
    {
    vertical-align: top;
    margin-left:-1px;
    width:18%;
    text-align:left;
    text-indent:5px;
    display:inline-block;
    border:1px solid #ccc;
    border-top:0;
    padding:6px 5px;
    font-size:7pt;
    }

    .checkgroup input[type="checkbox"]:checked + label
    {
    background: #555;
    //box-shadow: inset 0 -10px 20px -10px rgba(0,0,0,.3);
    color: #fff;
    }

    .emptygroup input[type="checkbox"]:checked + label
    {
    background:#555;
    color:#fff;
    }

    .no_ne
    {
    height:11px;
    }

    .tool_button{
    float:right;
    position:fixed;
    width:90px;
    background:#0DABC9;
    margin-left:1100px;
    margin-top:-590px;
    border-top:30px solid  #555;
    border-radius:5px;
    }

HTML

<body>

<div class="main">
    <div class="sidebar panel">
        <ul>
            <li><img src="images/add.png" id="add"><p class="txt-add"></p></li>
            <li><img src="images/view.png" id="view"><p class="txt-view"></p></li>
            <li><img src="images/setting.png" id="setting"><p class="txt-setting"></p></li>
            <li><img src="images/logout.png" id="logout"><p class="txt-logout"></p></li>
        </ul>
    </div>
     <div class="main-box ">
        <table class = "tabletextgroup">
            <tr>
            <td class = "textgroup"><span><img src = "images/platform2.png"></span><input type = "textbox" placeholder = "Platform"></td>
            <td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Version / Length"></td>
            <td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Telecast date"></td>
            </tr>
            <tr>
            <td class = "textgroup"><span><img src = "images/platform2.png"></span><input type = "textbox" placeholder = "Agency"></td>
            <td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Cost"></td>
            <td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Account Executive"></td>
            </tr>
            <tr>
            <td class = "textgroup"><span><img src = "images/platform2.png"></span><input type = "textbox" placeholder = "Advertiser"></td>
            <td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Reference Number"></td>
            </tr>
            <tr>
            <td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Product"></td>
            <td class = "textgroup"><span><img src = "images/cos.png"></span><input type = "textbox" placeholder = "Program"></td>
            </tr>
        </table>
        </div>



        <div class="main-box ">
            <p class="checkgroup"><span><img src = "images/program.png">PROGRAM :</span><input type="checkbox" id="program-replaced"/><label for='program-replaced'>SAMPLE </label><input type="checkbox" id="program-blocktimer"/><label for='program-blocktimer'>SAMPLE </label><input type="checkbox" id="not-in-bms"/><label for='not-in-bms'>SAMPLE</label></p>


            <p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="1"/><label for='1'>SAMPLE</label><input type="checkbox" id="2"/><label for='2' class = "no_ne"></label><input type="checkbox" id="3"/><label for='3' class = "no_ne"></label></p>

             <p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="4"/><label for='4'>TO & BG DO NOT TALLY</label><input type="checkbox" id="5"/><label for='5'>SAMPLE</label><input type="checkbox" id="6" /><label for='6' class = ""></label></p>



             <p class="checkgroup"><span><img src = "images/program.png">SAMPLE</span><input type="checkbox" id="6"/><label for='6'>SAMPLE</label><input type="checkbox" id="7"/><label for='7' class = "no_ne"></label><input type="checkbox" id="not-in-bms"/><label for='not-in-bms' class = "no_ne"></label></p>

              <p class="checkgroup"><span><img src = "images/program.png">SAMPLE</span><input type="checkbox" id="8"/><label for='8'>SAMPLE</label><input type="checkbox" id="9"/><label for='9' class = "no_ne"></label><input type="checkbox" id="10"/><label for='11' class = "no_ne"></label></p>

              <p class="checkgroup"><span><img src = "images/program.png">SAMPLE</span><input type="checkbox" id="12"/><label for='12'>SAMPLE</label><input type="checkbox" id="13"/><label for='13'>SAMPLE</label><input type="checkbox" id="14"/><label for='14'>SAMPLE</label></p>

              <p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="15"/><label for='15'>SAMPLE</label><input type="checkbox" id="16"/><label for='16'>SAMPLE</label><input type="checkbox" id="17"/><label for='17'>SAMPLE</label></p>




              <p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="18"/><label for='18'>SAMPLE</label><input type="checkbox" id="19"/><label for='19'>SAMPLE</label><input type="checkbox" id="20"/><label for='20'>SAMPLE</label></p>

              <p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="21"/><label for='21'>SAMPLE</label><input type="checkbox" id="22"/><label for='22'>SAMPLE</label><input type="checkbox" id="23"/><label for='23'>WITH CP / INV</label></p>

              <p class="checkgroup"><span><img src = "images/program.png">SAMPLE :</span><input type="checkbox" id="24"/><label for='24'>SAMPLE</label><input type="checkbox" id="25"/><label for='25'>SAMPLE</label><input type="checkbox" id="26"/><label for='26'>SAMPLE</label></p>
        </div>



    <div style="clear: both;"></div>
    <div class = "tool_button">
        <input type = "submit"  id = "formsubmit" text = "SUBMIT">
        <input type = "submit" id = "formclear" text = "CLEAR">
        </div>

</div>
</body>
</html>

【问题讨论】：

试试用 bootstrap 吧？
哦@Newbie 我不知道如何使用引导程序我认为这对我来说不是一个好主意，因为我什至不知道如何使用引导程序，但是你为伟大的帮助..

标签： javascript css html internet-explorer-8

【解决方案1】：

tool_button 上的位置是固定的。使其相对，它将留在窗口内

【讨论】：

是的，它现在工作正常.. 缩放部分怎么样？我有很多时间来解决这个问题。特别是在 IE8 中。
放大是什么意思？调整窗口大小或按 control+ 来实际缩放浏览器？
是的，通过按 control + 来缩放浏览器，实际上每次我按 control + 来放大浏览器时，控件都放错了位置，输入字段也变形了！请帮助我我想要发生的是当我放大设计时高度和宽度仍然相同。
你能把我的答案标记为正确吗？至于缩放把你的代码放在小提琴里，我会检查出来
我肯定会，但你是什么意思？我将把我的示例代码放在小提琴中？？你是这个意思吗？