不同设备尺寸的 CSS答案

【问题标题】：CSS for different device sizes不同设备尺寸的 CSS
【发布时间】：2018-06-11 03:48:09
【问题描述】：

我有一个包含表单的简单页面。输入框应该是什么字符串，然后是输入框。

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

我对媒体查询进行了研究，但仍然不够了解。

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

【问题讨论】：

您在哪里尝试完成这项工作？
我想开始的唯一地方是使用@media 屏幕和 (max-width: 699px){ } 但我不知道我会在那里放什么。我知道如果屏幕满足此要求，将应用此 CSS，但我不知道如何使某些 div 突然从内联变为非内联。
当您首先针对移动设备进行开发时，Web 开发总是最简单的，然后使用min-width 逐步提高。与max-width 反过来是一件很麻烦的事。

标签： html css media-queries

【解决方案1】：

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

也可以看看这篇文章-https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

你也可以通过 matchmedia 来使用 jQuery。这是一个给你的 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, ...})
}

【讨论】：

OP 说已经研究过媒体查询，所以你的答案不是很有用。或许你可以举个例子说明如何解决这个问题。
@putvande 能否请您删除反对票，因为我为 OP 的查询提供了多种解决方案...谢谢

【解决方案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>

【讨论】：

【解决方案3】：

您有多种选择：使用 Bootstrap 在调整窗口大小时以不同方式轻松显示您的网格。您还可以使用媒体查询，与 Flexbox 或 Grid 等网格布局结合使用。甚至可以使用 Jquery 和 windworesize 函数。就个人而言，当窗口达到智能手机或平板电脑的大小时，我会选择 Flexbox 和 flex-direction 属性。要编写媒体查询，您只需输入类似@media screen 和 (max-width: 640px) 之类的内容，然后在大括号内写下您的规则。

【讨论】：