Question

我创建了一个html页面（联系页面），该页面运行良好但不响应。我检查并应用了媒体查询完整的CSS它的工作Responsive.after检查我的系统不工作桌面应用程序现在工作响应？如何设置我的代码桌面和移动设备响应？

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

使用css3媒体查询，您可以根据移动设备宽度

定义CSS

添加Dinesh的答案，您需要将这两个类保留在CSS文件中

@media only screen and (max-width: 500px)
    {
        .myform
        {
            width: 200px;
        }


    }
    .myform
    {
        margin: 0 auto;
        width: 566px;
        padding: 14px;
    }

然后您可以调整浏览器的大小以检查效果。调整大小不到500像素，将应用媒体查询。最大化将应用的浏览器.myform类不在媒体查询

中

Answer 2

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

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

尝试此操作并按百分比编辑内部div的宽度

更改我的联系页面以响应？

2 个答案: