时间戳

首页 > 解决方案 > 响应式网页部分工作

html - 响应式网页部分工作

问题描述

一些设备，如 iMac，它看起来很完美，但有些我在其他 pc.in 平板电脑和移动屏幕上看到白框，它不适合设备，我必须缩小，这使得内容变小。

* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f7f7f7;
  color: #545454;
}


/* NAVIGATION */

.navbar {
  width: 100%;
  height: 150px;
  background: black;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 25px;
}

.navbar .inner_navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.navbar .hamburger {
  display: none;
}

.navbar .menu ul {
  display: flex;
}

.navbar .menu ul li a {
  display: block;
  width: 120px;
  margin-right: 10px;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  padding: 10px;
  border-radius: 25px;
  letter-spacing: 2px;
  transition: all 0.2s ease;
}

.navbar .menu ul li:last-child a {
  margin-right: 0;
}

.navbar .menu ul li a:hover,
.navbar .menu ul li a.active {
  background: #5db485;
}

.container {
  margin-top: 150px;
  width: 1906px;
  height: 397px;
}

.promo {
  width: 1906px;
}


/* Safari Tours*/

.safari-tours {
  background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
  ;
  width: 1906px;
}

.safari-title {
  text-align: center;
  padding-top: 30px;
  font-size: 50px;
}

.banner {
  display: flex;
  justify-content: center;
}

.safari {
  margin: 2%;
}

.safari img {
  width: 500px;
}


/*Tablet*/

@media (max-width: 992px) {
  .navbar {
    height: 218px;
    padding: 12px;
  }
  .navbar .inner_navbar {
    flex-direction: column;
  }
  .container {
    margin-top: 218px;
  }
}


/*Mobile*/

@media (max-width: 728px) {
  .navbar {
    height: 150px;
  }
  .navbar .inner_navbar {
    flex-direction: row;
  }
  .navbar .menu ul {
    position: absolute;
    top: 150px;
    left: 0;
    display: block;
    background: orangered;
    width: 100%;
  }
  .navbar .menu ul li {
    padding: 10px;
  }
  .navbar .menu ul li a {
    width: 100%;
    padding: 12px;
  }
  .navbar .hamburger {
    display: block;
    position: absolute;
    top: 15px;
    right: 25px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .navbar .menu {
    display: none;
  }
  .navbar .menu.activate {
    display: block;
  }
  .container {
    margin-top: 150px;
    width: 690px;
    height: 144px;
  }
  .promo {
    width: 690px;
  }
  .safari-tours {
    background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
    width: 690px;
  }
  .safari {
    margin: 1%;
  }
  .safari img {
    width: 300px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <div class="wrapper">
      <div class="navbar">
        <div class="inner_navbar">
          <div class="logo">
            <a href="#"><img src="/images/Final Logo.png" style="width: 150px;"></a>
          </div>
          <div class="menu">
            <ul>
              <li><a href="#" class="active">Home</a></li>
              <li><a href="#">Desert Safari</a></li>
              <li><a href="#">Tours</a></li>
              <li><a href="#">Activities</a></li>
              <li><a href="#">Contact-Us</a></li>
            </ul>
          </div>
        </div>
        <div class="hamburger">
          <img src="/images/menu-btn.png" style="width: 40px;">
        </div>
      </div>
      <div class="container">
        <img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="">
      </div>
    </div>

  </header>


  <section>
    <div class="safari-tours">
      <h1 class="safari-title">SAFARI TOURS</h1>
      <div class="banner">
        <div class="safari">
          <img src="https://i.imgur.com/9QH8NFE.jpeg" alt="Morning Safari" />
          </a>
        </div>
        <div class="safari">
          <a href="https://bigdunestours.com/desert-safari" target="_top">
            <img src="https://i.imgur.com/2E9ytwc.jpeg" alt="Evening Safari" />
          </a>
        </div>
      </div>
    </div>
  </section>
  <script>
    var hamburger = document.querySelector(".hamburger");
    var menu = document.querySelector(".menu");

    hamburger.addEventListener("click", function() {
      menu.classList.toggle("activate");
    })
  </script>
</body>

</html>
一些设备，如 iMac，它看起来很完美，但有些我在其他 pc.in 平板电脑和移动屏幕上看到白框，它不适合设备，我必须缩小，这使得内容变小。

编辑我确实尝试作为评论提及之一，但仍然没有运气，结果是这样的

*{
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #f7f7f7;
    color: #545454;
}
/* NAVIGATION */
.navbar{
    width: 100%;
    height: 150px;
    background: black;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 25px;
}

.navbar .inner_navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}
.navbar .hamburger{
    display: none;
}

.navbar .menu ul{
    display: flex;
}
.navbar .menu ul li a{
    display: block;
    width: 120px;
    margin-right: 10px;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    padding: 10px;
    border-radius: 25px;
    letter-spacing: 2px;
    transition: all 0.2s ease;
}
.navbar .menu ul li:last-child a{
    margin-right: 0;
}
.navbar .menu ul li a:hover,
.navbar .menu ul li a.active{
    background: #5db485;
}
.container{
    width: 100%;
    max-width: 1906;
}


    /*Tablet*/

@media (max-width: 992px){
    .navbar{
        height: 218px;
        padding: 12px;
    }
    .navbar .inner_navbar{
        flex-direction: column;
    }
    .container {
        max-width: 991.98px;
    }
    
}
    /*Mobile*/
@media (max-width: 728px){
    .navbar{
        height: 150px;
    }
    .navbar .inner_navbar{
        flex-direction: row;
    }
    .navbar .menu ul{
        position: absolute;
        top: 150px;
        left: 0;
        display: block;
        background: orangered;
        width: 100%;
    }
    .navbar .menu ul li{
        padding: 10px;
    }
    .navbar .menu ul li a{
        width: 100%;
        padding: 12px;
    }
    .navbar .hamburger{
        display: block;
        position: absolute;
        top: 15px;
        right: 25px;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .navbar .menu{
        display: none;
    }
    .navbar .menu.activate{
        display: block;
    }
    .container{
        max-width: 727.98px;
    }
    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="navbar">
            <div class="inner_navbar">
                <div class="logo">
                    <a href="#"><img src="/images/Final Logo.png" style="width: 150px;"></a>
                </div>
                <div class="menu">
                    <ul>
                        <li><a href="#" class="active">Home</a></li>
                        <li><a href="#">Desert Safari</a></li>
                        <li><a href="#">Tours</a></li>
                        <li><a href="#">Activities</a></li>
                        <li><a href="#">Contact-Us</a></li>
                    </ul>
                </div>
            </div>
            <div class="hamburger">
                <img src="/images/menu-btn.png" style="width: 40px;">
            </div>
            <div class="container">
                <img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="">
            </div>
        </div>         
    </div>
    
    <script>
        
        var hamburger = document.querySelector(".hamburger");
        var menu = document.querySelector(".menu");

        hamburger.addEventListener("click", function(){
            menu.classList.toggle("activate");
        })
    </script>
</body>
</html>

标签： htmlcssresponsive-designresponsive

解决方案

使用 100% 宽度并为每个 @media 设置一个最大宽度。

重要提示：在主布局中使用 %，而不是绝对像素。通过使用这个内容不会溢出 .container

.container {
  width: 100%;
  max-width: 1906px;
}
@media (max-width: 992px) {
  .container {
    /* width 100% is set aboven*/
    max-width: 991.98px;
  }
}
@media (max-width: 728px) {
  .container {
    /* width 100% is set aboven*/
    max-width: 727.98px;
  }
}

推荐阅读