Question

我有一个由表单组成的简单页面。输入框应该是一个字符串，然后是输入框。

我想要两种不同的行为。当手机访问页面时，我希望所有内容都堆叠在一起，但是当通过计算机访问页面时，我想要多行包含标题，然后是同一行的输入框。

我已经研究过媒体查询了，我仍然不太了解它。

<html>
    <head>
        <style>

        </style>
    </head>
    <body>
        <form>

            <center>
            <div class="left">
                First name:
            </div>
            <div class="right">
                <input type="text" name="firstname"/>
            </div>
            <div class="left">
                Last name:
            </div>
            <div class="right">
                <input type="text" name="lastname"/>
            </div>
            <div class="left">
                Email Address:
            </div>
            <div class="right">
                <input type="text" name="email"/>
            </div>
            <div class="left">
                Address:
            </div>
            <div class="right">
                <input type="text" name="address"/>
            </div>
            <div class="left">
                I've practiced yoga for at least one year:
            </div>
            <div class="right">
                <input type="checkbox" name="oneyear"/>
            </div>
            <div class="right">
                <input type="submit" name="submit" value="submit"/>
            </div>

            </center>
        </form>
    </body>
</html>

Answer 1

您有多种选择：使用Bootstrap在窗口调整大小时以不同方式轻松显示网格。您还可以使用媒体查询，与Flexbox或Grid等网格布局结合使用。甚至使用Jquery和windworesize功能。 Personnaly，当窗口达到智能手机或平板电脑的大小时，我会选择Flexbox和灵活方向的适当性。要编写媒体查询，您只需键入类似@media screen和（max-width：640px）的内容，并在大括号内编写规则。

Answer 2

以下是示例代码。

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,
        body {
            height: 100%;
            font-size: 16px;
            line-height: 22px;
            font-family: Arial, Helvetica, sans-serif;
            background-color: #f5f5f5;
        }

        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }

        .my-form {
            width: 100%;
            max-width: 920px;
            margin: 0 auto;
            padding: 20px;
        }

        .my-form .input {
            width: 100%;
            padding: 10px;
        }

        .my-form .input .left {
            display: block;
            width: 100%;
            line-height: 24px;
            padding: 3px 0;
            margin-bottom: 5px;
        }

        .my-form .input .right {
            width: 100%;
        }

        .my-form .input input[type='text'], .my-form .input input[type='email'], .my-form .input textarea {
            display: block;
            width: 100%;
            height: 30px;
            font-size: 16px;
            padding: 3px;
            line-height: 22px;
            border: 1px solid rgba(0,0,0,.3);
        }

        .my-form .input textarea {
            height: auto;
            min-height: 60px;
            resize: vertical;
        }

        .my-form .input input[type='submit'] {
            display: block;
            width: 100%;
            padding: 15px;
            background-color: navy;
            color: #ffffff;
            font-size: 16px;
            line-height: 22px;
        }

        @media screen and (max-width: 1024px) {
            .my-form .input:after {
                content: "";
                clear: both;
                display: table;
            }
            .my-form .input .left {
                float: left;
                width: 35%;
                padding-right: 10px;
                margin-bottom: 0;
            }
            .my-form .input .right {
                float: right;
                width: 65%;
            }
        }
    </style>
</head>

<body>
    <form class="my-form">
        <div class="input">
            <label class="left" for="firstname">
                First name:
            </label>
            <div class="right">
                <input type="text" id="firstname" name="firstname" />
            </div>
        </div>
        <div class="input">
            <label class="left" for="lastname">
                Last name:
            </label>
            <div class="right">
                <input type="text" id="lastname" name="lastname" />
            </div>
        </div>
        <div class="input">
            <label class="left" for="email">
                Email Address:
            </label>
            <div class="right">
                <input type="email" id="email" name="email" />
            </div>
        </div>
        <div class="input">
            <label class="left" for="address">
                Address:
            </label>
            <div class="right">
                <textarea cols="10" rows="5" id="address" name="address"></textarea>
            </div>
        </div>
        <div class="input">
            <div class="left"></div>
            <div class="right">
                <label for="oneyear"><input type="checkbox" id="oneyear" name="oneyear" /> I've practiced yoga for at least one year:</label>
            </div>
        </div>
        <div class="input">
            <input type="submit" name="submit" value="submit" />
        </div>
    </form>
</body>

</html>

Answer 3

您需要Media Query。媒体查询基本上是为不同宽度的设备编写不同的CSS。您可以从此处了解更多信息 - https://www.w3schools.com/css/css3_mediaqueries_ex.asp

另请查看此文章 - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

你也可以使用jQuery来使用matchmedia .. 以下是您的一个JSbin示例 - https://jsbin.com/kutacuzece/edit

(function($) {



    /*
        * We need to turn it into a function.
        * To apply the changes both on document ready and when we resize the browser.
        */

        function mediaSize() { 
            /* Set the matchMedia */
            if (window.matchMedia('(min-width: 768px)').matches) {
            /* Changes when we reach the min-width  */
                $('body').css('background', '#222');
                $('strong').css('color', 'tomato');

            } else {
            /* Reset for CSS changes – Still need a better way to do this! */
                $('body, strong').removeAttr('style');
            }
        };

        /* Call the function */
      mediaSize();
      /* Attach the function to the resize event listener */
        window.addEventListener('resize', mediaSize, false);  

    })(jQuery);

或者你可以使用像这样简单的东西 -

if ($(window).width() < 960) {
   $(selector).css({property:value, property:value, ...})
}
else if ($(window).width() < 768) {
    $(selector).css({property:value, property:value, ...})
}
else {
     $(selector).css({property:value, property:value, ...})
}

适用于不同设备尺寸的CSS

3 个答案: