所需的媒体查询帮助和解释答案

【问题标题】：Required mediaquery help and explanation所需的媒体查询帮助和解释
【发布时间】：2021-05-14 21:53:54
【问题描述】：

我遇到了媒体查询的问题。我尝试使用 chrome 开发工具在不同设备上进行设计。但是找不到任何帮助来解决问题。

document.addEventListener( 'DOMContentLoaded', function () {
    new Splide( '#secondary-slider', {
        type        : 'loop',
        perPage     : 1,
        autoplay    : true,
        pauseOnHover: true,
        interval : 4000
    } ).mount();
} );

.header{
                position: relative;
                margin: 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .header-text{
                text-align: center;
                font-family: monospace;
                font-size: 22px;
            }
            .header .img{
                float: left;
                margin-left: 10px;
            }
            .header .contact-us{
                float: right;
            }
            .fa-2x{
                font-size: 24px;
                color: black;
            }
            .container{
                width: 100%;
                padding: 0px;
            }
            .splide__slide img {
                width : 100%;
                height: auto;
                object-fit: cover;
            }
            #secondary-slider{
                display: flex;
                width:100%;
                height:100%;
            }
            .header .submit{
                float: right;
            }
            .contact-us .email{
                margin-right: 20px;
            }
            @media only screen and (max-width: 600px){
                body {background: red;}
                .splide__slide img {
                    width : 100%;
                    height: 100%;
                }
                .header-text{
                    text-align: center;
                    font-family: monospace;
                    font-size: 22px;
                    margin-top: 10px;
                }
                i{
                    vertical-align: middle;
                }
                .contact-us .email{
                    margin-right: 2px;
                }
            }

<html>
    <head>
        <title>
            Akhil Dali
        </title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css"/>
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="header">
                <a class="img" href="https://instagram.com/show_house_full" target="_blank"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a>
                <h2 class="header-text">Show House Full</h2>
                <div class="contact-us">
                    <a class="email" href="mailto:ashishpise111@gmail.com"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i></a>
                    <a class="whatsapp" href="tel:7666149649"><i class="fa fa-whatsapp fa-2x" aria-hidden="true"></i></a>
                </div>
            </div>
        </nav>
        <div id="secondary-slider" class="splide">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">
                        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
                    </li>
                    <li class="splide__slide">
                        <img src="https://static.toiimg.com/thumb/msid-24183773,width-1070,height-580,resizemode-75,imgsize-24183773,pt-32,y_pad-40/24183773.jpg">
                    </li>
                    <li class="splide__slide">
                        <img src="https://i.pinimg.com/originals/ca/76/0b/ca760b70976b52578da88e06973af542.jpg">
                    </li>
                </ul>
            </div>
        </div>
    </body>
    <script>
        
        
    </script>
</html>

我只想要正确的媒体查询和有关媒体查询的解释，这将帮助我了解如果我遇到类似问题如何应对。

【问题讨论】：

标签： html css media-queries splidejs

【解决方案1】：

您使用这样的媒体查询：

CSS

@media screen and (max-width: 860px) {
#header {font-size: 20px;} /* random rules */
}

HTML 将其放在您的文档中。

<meta name="viewport" content="width=device-width" />

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

【讨论】：

我已经尝试过媒体查询。我对设备尺寸有疑问。它使滑块具有不同的高度
你能详细说明一下吗？
如果我尝试在 chrome 中 toggle device bar inspect element。那么它不会改变滑块的大小。
嗯...这很奇怪，它应该可以工作。它是哪个元素？你能告诉我你正在谈论的代码中元素的 id 吗？
我说的是滑块。它的高度产生问题。