html - 将我的联系页面更改为响应式？

Question

我创建了一个 html 页面(联系页面)，它运行良好但没有响应。我已经检查并应用了媒体查询完整的 CSS 其工作响应。之后检查我的系统不工作桌面应用程序现在工作响应？如何将我的代码设置为响应式桌面和移动设备？

我的CSS代码:

        body{
                font-family:Verdana, Arial, Helvetica, sans-serif;
                font-size:14px;
            }
            p, h1, form, button{border:0; margin:0; padding:0;}
            .spacer{clear:both; height:1px;}

            /* ----------- My Form ----------- */
            .myform{
                margin:0 auto;
                width:566px;
                padding:14px;
            }

            /* ----------- contact ----------- */
            #contact{
                background: none repeat scroll 0 0 #C6C6C6;
                border: 2px solid #8B8B8B;
                border-radius: 10px;
                -moz-border-radius: 10px;
                -op-border-radius: 10px;
                -webkit-border-radius: 10px;
            }
            #contact h1 {
                font-weight:bold;
                margin-bottom:8px;
            }
            #contact p{
                font-size:11px;
                color:#666666;
                margin-bottom:20px;
                border-bottom:solid 1px #7E7E7E;
                padding-bottom:10px;
            }
            #contact label{
                display:block;
                font-weight:bold;
                text-align:right;
                width:193px;
                float:left;
            }
            #contact .small{
                color:#666666;
                display:block;
                font-size:11px;
                font-weight:normal;
                text-align:right;
                width:193px;
            }
            #contact input,#contact textarea{
                float:left;
                border:solid 1px #aacfe4;
                width:284px;
                margin:2px 0 20px 10px;
                border-radius: 15px;
                -moz-border-radius: 15px;
                -op-border-radius: 15px;
                -webkit-border-radius: 15px;
                font-size: 14px;
            }

            #contact input{
                height: 25px;
                padding: 4px 10px;
            }
            #contact textarea{
                padding: 10px 10px;
                overflow: auto;
            }
            /* ----------- Form Button ----------- */
            #contact button {
               background: #2c3e4a;
               background: -webkit-gradient(linear, left top, left bottom, from(#919496), to(#2c3e4a));
               background: -webkit-linear-gradient(top, #919496, #2c3e4a);
               background: -moz-linear-gradient(top, #919496, #2c3e4a);
               background: -ms-linear-gradient(top, #919496, #2c3e4a);
               background: -o-linear-gradient(top, #919496, #2c3e4a);
               padding: 5px 10px;
               -webkit-border-radius: 15px;
               -moz-border-radius: 15px;
               border-radius: 15px;
               margin-left: 315px;
               color: white;
               font-size: 20px;
               text-decoration: none;
               vertical-align: middle;
            }
            #contact button:hover {
               background: #3d4b54;
               color: #ccc;
            }

联系html页面

  <div id="form-wrapper" class="myform">
             <div id="contact" class="myform">

            <form id="form" name="form" method="post" action="mail.php">

                <h1>Contact Us</h1>

                <label for="name">Name
                    <span class="small">Add your name</span>
                </label>
                <input type="text" name="name" placeholder="Enter your Name" id="name" />

                <label for="email">Email
                    <span class="small">Add a valid address</span>
                </label>
                <input type="text" name="email" placeholder="mail@example.com" id="email" />

                <label for="phone">Phone
                    <span class="small">Add valid 10 digit your mobile no.</span>
                </label>
                <input type="text" name="phone" placeholder="Enter Your Number" id="phone" />

                <label for="message">Message
                    <span class="small">Write something to us</span>
                </label>
                <textarea placeholder="Write something to us" name="message" id="message"  rows="5"></textarea>

                <button type="submit">Send</button>
                <div class="spacer"></div>

            </form>
        </div>

如何改变响应式设计？请问有什么想法吗？现在在桌面上工作得很好。但不是响应式移动设备？有什么想法吗？

Answer 1

@media only screen and (max-width: 565px){
.myform{

                width:100%;
                padding-right:15px;
                padding-left:15px;
            }
}

试试这个并按百分比编辑你的内部 div 的宽度