Question

您好，我终于完成了投资组合http://ruben123.com/，并通过使用chrome移动视图并添加了所有移动设备所需的所有媒体查询来确保网站对移动设备友好。

当我在手机上查看网站时，该问题看起来有所不同。请看下面的截图。我不知道是什么原因造成的，或者如何解决？

我正在为此项目使用Scss。请参见下面的代码和屏幕截图。

    <!-- CSS -->
    <link rel="stylesheet" href="css/main.css" />
    <!-- MOBILE CSS -->

  <link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css">

    <!-- Header -->
    <!-- <div id="header-home"> -->
    <div id="header-home">
      <!-- <div id="particles-js"></div> -->
      <div class="container">
        
        <!-- NAVBAR START -->
        <nav id="main-nav">
          <img src="img/logo-white-1.svg" alt="My Portfolio Logo" id="logo" />
          <!-- <i class="material-icons" id="mobile-menu">menu</i> -->

          <!-- DROP DOWN MENU - START -->

          <div class="menu-dropdown">
            <div class="col">
              <div class="con">
                <div class="bar top"></div>
                <div class="bar middle"></div>
                <div class="bar bottom"></div>
              </div>
            </div>
            <div class="menu-content hidden">
              <ul>
                <li><a href="#home" class="current">Home</a></li>
                <li><a href="#about-me">About Me</a></li>
                <li><a href="#capabilities">Capabilities</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#portfolio-section">Portfolio</a></li>
                <li><a href="#bottom-footer">Contact Me</a></li>
              </ul>
            </div>
          </div>


          <!-- DROP DOWN MENU - END -->


          <ul class="nav-links">
            <li><a href="#home" class="current">Home</a></li>
            <li><a href="#about-me">About Me</a></li>
            <li><a href="#capabilities">Capabilities</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#portfolio-section">Portfolio</a></li>
            <li><a href="#bottom-footer">Contact Me</a></li>
          </ul>
        </nav>
        <!-- NAVBAR END -->
    
        <div class="header-content">
          <h1>DESIGNER</h1>
          <h1>+</h1>
          <h1>DEVELOPER</h1>
          <p class="lead">
            Welcome to my website. I am a Graphic / Web Designer & Web Developer
          </p>
          


        </div>
      </div>
      <div id="particles-js"></div>
      <img
        src="img/bottom-curve.svg"
        class="bottom-curve"
        alt="bottom-header-curve"
      />
    </div>
    <!-- </div>  -->
    <!-- ABOUT ME -->
    <div id="about-me">
      <div class="container">
        <div class="content-info">
          <h1 class="section-title">About Me</h1>
          <p class="lead">
            Hello my name is Ruben Esquivel and my dad was a graphic designer so
            I grew up playing with photoshop since I was a kid. For 10 years I
            worked as a remote graphic designer / web master running entire
            graphics department by myself providing mockups for getting sales
            and turning the mockups into print ready graphics to be printed. I
            am an expert in taking directions through phone or email and multi
            tasking multiple projects at once to meet the deadline. I can handle
            being under pressure and I am a master of hot keys so I can work
            fast when needed. After working in the industry for 10 years I felt
            like I knew everything when it came to graphic design so I decided
            to learn web development because I love learning new things. I love
            coding and I love taking my web designs and creating beautiful eye
            catchy websites. To be honest I love both graphic design and coding,
            being able to take an idea and turn into a design or website is like
            creating magic for me.
          </p>

          <div class="social-icons">
            <a href="mailto:rubenjr005@gmail.com" class="far fa-envelope"></a>
            <a href="https://www.linkedin.com/in/ruben-esquivel/" class="fab fa-linkedin-in"></a>
            <a href="https://www.instagram.com/rubenportfolio/" class="fab fa-instagram"></a>
            <a href="https://twitter.com/rubenjr005" class="fab fa-twitter"></a>
            <a href="https://github.com/Jr005" class="fab fa-github"></a>

          </div> 

        </div>
        <div class="profile-pic">
          <img
            class="p-2"
            src="img/ruben-profile-pic_01.png"
            alt="Ruben Profile Photo"
            class="ruben-profile-photo"
          />
        </div>
      </div>
    </div>

SCSS

  // #header

  #header-home {
    height: 100vh;
    margin: 0;
    background: $dark-blue;
    z-index: 1;
    // position: relative;
    // background-image: image("/dist/img/Ellipse 1.svg");

    .bottom-curve {
      position: absolute;
      bottom: -40px;
      width: 100%;
    }

    #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      // background: $dark-blue;
      top: 0;
      z-index: 0;
    }

    .container {
      // z-index: 2;

      .header-content {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        height: 100%;
        // padding: 0 2rem;
        position: absolute;
        color: white;
        text-align: center;
        // padding-top: 20%;
        left: 0;
        right: 0;
        bottom: 0;

        h1 {
          font-size: 125px;
          line-height: 0.9;
          font-family: "Abril Fatface", cursive;

          // text-shadow:  0 0 10px #fff ;

          text-shadow: 0 0 40px rgba(255, 255, 255, 0.75);
          // text-shadow: 0 0 5px #fff, 0 0 15px;
          // #fff, 0 0 20px #fff, 0 0 25px #fff, 0 0 30px #fff, 0 0 35px #fff;
          margin-bottom: 0.75rem;
        }
      }
    }
  }

  // About Me

  #about-me {
    margin-top: -3rem;
    position: relative;
    margin-bottom: 5rem;

    .container {
      display: flex;
      overflow: visible;

      .content-info {
        flex: 2;

        // social icons

        .social-icons {
          font-size: 3rem;

          a {
            padding-right: 1rem;
            transition: color 0.5s;
          }

          a:hover {
            color: $yellow-color;
            // transition-delay: 0.25s;
          }
        }

        h1 {
          color: $light-blue;
        }
      }

      .profile-pic {
        flex: 1;
        margin-top: -5rem;
      }
    }
  }

移动媒体查询代码

      #header-home {
    margin-bottom: 7rem;
    .container {
      .header-content {
        h1 {
          font-size: 110px;
        }

        .lead {
          width: 80%;
        }
      }
    }
  }

  #about-me {
    //   margin-bottom: 0rem;
  }

  #capabilities {
    margin-bottom: 2rem;
  }

  #skills .skills-container .skills-section .skills-list .dot:after {
    width: 150px;
  }

  // PORTFOLIO IMAGES

  #portfolio-section {
    .lightbox img {
      width: 80%;
      max-width: 800px;
      height: auto;
      margin-top: 20%;
    }
  }

  /* Smartphones */
  @media (max-width: 500px) {
    // MOBILE START

    #header-home {
      .container .header-content h1 {
        font-size: 50px;
      }

      .bottom-curve {
        bottom: -10px;
      }
    }

    //   ABOUT ME

    #about-me .container .profile-pic img {
      width: 80%;
    }

    //   CAPABILITIES

    #capabilities {
      margin-bottom: 1rem;
    }

我的手机iphone 8 Plus屏幕截图。

网站在Chrome Mobile调试版本上看起来不错，但在我的手机上看起来有所不同

0 个答案: