代码之家  ›  专栏  ›  技术社区  ›  CDNthe2nd

HTML、CSS和媒体查询-在Chrome和firefox上调整大小是不同的

  •  0
  • CDNthe2nd  · 技术社区  · 7 年前

    所以我一直在找一个既适用于桌面又适用于电话的网站。然而,我对正在进行的工作感到困惑。

    基本上,我想做的是使它在桌面上看起来像这样:

    Desktop

    打电话的时候

    phone

    然而,当我在Google Chrome中尝试解决这个问题时,我得到了这样的结果:

    Chrome resizing

    在Firefox中执行时:

    Firefox resizing

    我们可以看到它在Firefox中看起来很不错,但不太。。。

    但是我不知道是什么原因。我所做的是使用HTML文件和CSS分离。我用了 @媒体功能:

    @media only screen and (max-width: 824px) {
        .sidenav{
            width: 100%;
            height: auto;
            position: absolute;
        }
        .main{
            width: 100%;
            padding:0 0 0 0;
            margin-top: 50%;
        }
        div.gallery{
            float: none;
            display: inline;
            width: 100%;
        }
    
        #pic2 {
            padding:0px;
        }
        h2{
            padding: 10% 0 0 20px;
        }
    }
    

    这就是我将其连接到HTML的方式:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    
    </head>
    <body>
    
    <div class="sidenav">
      <img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas" style="width:100px;height:100px;">
      <h1>Meny</h1>
      <a href="#länk1">Länk 1</a>
      <a href="#länk2">Länk 2</a>
      <a href="#länk3">Länk 3</a>
      <a href="#länk4">Länk 4</a>
    </div>
    

    我做错了什么?基本上,我希望的是使它像前两张图片,其中桌面版本看起来像第一个版本,每当我调整到移动版本,它应该像图片编号2。。。

    也请!如果提供的代码太少或缺少其他内容,请随时发表评论。我会快速反应!


    小提琴:

    Fiddle

    2 回复  |  直到 7 年前
        1
  •  1
  •   Giacomo Penuti    7 年前

    发生的情况取决于菜单栏和的绝对位置。主100%利润顶部。

    为什么边距顶部:100%(包含块的100%宽度)不足以让主类div位于sidenav类div之下?请检查此问题 Margin-top: 100% gets parent width value... strange

    这是我的小提琴。 请检查媒体查询中的主类。

    当然,这只是为了让你理解问题,让事情“按原样”运作。

    当然,这是一个真实的例子,我至少会让javascript计算以像素为单位的边距上限绝对值。这样,如果菜单以某种方式发生更改,您就不需要编辑css。

    https://jsfiddle.net/8up8yc4h/2/

    @media only screen and (max-width: 824px) {
        .sidenav{
            width: 100%;
            height: auto;
            position: fixed;
        }
        .main{
            width: 100%;
            padding:0 0 0 0;
            /*margin-top: 100%;*/
            margin-top: 528px;
        }
        div.gallery{
            float: none;
            display: inline;
            width: 100%;
        }
    
        #pic2 {
            padding:0px;
        }
        h2{
            padding: 10% 0 0 20px;
        }
    }
    
        2
  •  1
  •   Rainbow    7 年前

    尝试将此添加到头标签

    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    告诉浏览器使用设备宽度。

    编辑

    还可以尝试此媒体查询,以删除绝对/固定位置以及边距。

    body {
        font-family: "Lato", sans-serif;
    }
    
    h1 {
    	color: white;
    	text-align: center;
    }
    
    h2{
        color: black;
        font-size: 50px;
        text-align: left;
        padding-right: 20px;
    
    }
    
    .sidenav {
    	text-align: center;
    	height: 100%;
    	width: 15%;
    	/* position: fixed; */
    	top: 0;
    	left: 0;
    	background-color: black;
    	padding-top: 100px;
    }
    
    .sidenav a {
        text-decoration: none;
        font-size: 15px;
        text-align: center;
        color: #818181;
        display: block;
        border: 10px solid black;
        background-color: white;
        border-radius: 25px;
        padding: 12px;
    
    }
    
    .sidenav a:hover {
        color: #f1f1f1;
    }
    
    .main {
        padding-left: 15%;
    }
    
    
    div.gallery {
        margin: 5px;
        float: left;
        width: 28.3%;
        display: inline;
    }
    
    
    div.gallery img {
        width: 100%;
        height: auto;
        border-radius: 35px;
    }
    
    div.desc {
        font-size: 15px;
        font-family: "Times New Roman", Times, serif;
        padding: 15px;
        text-align: left;
    }
    
    #pic2{
        padding: 0px 70px 0 70px;
    }
    .text{
        float: left;
        font-size: 17px; 
        position: relative;
    }
    
    .clearfix {
        overflow: auto;
    }
    
    .img2 {
        float: right;
        width: 30%; 
        height: 30%;
        padding: 10px 20px 10px 20px;
        border-radius: 35px;
    }
    
    footer {
        text-align: center;
        font-style: italic;
        font-family: Impact, Charcoal, sans-serif;
    }
    
    @media only screen and (max-width: 824px) {
        .sidenav{
            width: 100%;
            height: auto;
            /* position: absolute; */
        }
        .main{
            width: 100%;
            padding:0 0 0 0;
            /*margin-top: 100%;*/
            /* margin-top: 528px; */
        }
        div.gallery{
            float: none;
            display: inline;
            width: 100%;
        }
    
        #pic2 {
            padding:0px;
        }
        h2{
            padding: 10% 0 0 20px;
        }
    }
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <title>Inl. 6 - Barry</title><!-- Titel av HTML, Kan även synas på TAB i Google chrome etc.-->
    
    </head>
    <body>
    
    <div class="sidenav">
      <img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas" style="width:100px;height:100px;">
      <h1>Meny</h1>
      <a href="#länk1">Länk 1</a>
      <a href="#länk2">Länk 2</a>
      <a href="#länk3">Länk 3</a>
      <a href="#länk4">Länk 4</a>
    </div>
    
    
    <div class="main">
      <h2>Innehåll</h2>
    
      <div class="gallery">
        <a><img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas">
      </a>
      <div class="desc">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    
      <div class="gallery" id="pic2">
        <a><img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas">
      </a>
      <div class="desc">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    
      <div class="gallery">
        <a><img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas">
      </a>
      <div class="desc">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    
    
     
    <div class="text">
      <hr>
      <div class="clearfix">
      <img class="img2" src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas">
      
      <p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>
      <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p>
      <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis.</p>
      <p>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
    <hr>
    <footer>
    <p>Skriven i HTML5</p>
    </footer>
    </div>
    
    
    </div>
    
         
    </body>
    </html>