Question

我正在FreeCodeCamp上做网络开发人员课程，而且我一直在完成我需要创建自己的投资组合网页的任务。它必须是具有3个或更多部分的单页滚动样式网页，可以从导航栏或滚动访问。到目前为止，我已经创建了一个基本布局，并且已经（几乎）完成了所有工作。然而，有人说网页没有适当缩放以获得更高分辨率的屏幕。

现在，为了解决这个问题，我将CSS文件中所有图像的宽度和高度设置为100％。我使用过1920x1080的图像，所以我认为这可能是个问题。如果我错了，请纠正我，但我认为使用.svg图像应该有帮助。但是，这仅与图像和桌面有关。在移动设备上，网页看起来非常糟糕，导航栏会覆盖部分文字。

那么，我该如何解决这个问题呢？我是初学者，所以如果这是一个非常基本的问题，请原谅。

我的代码：

$(document).ready(function(){
      $('.nav li a').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {
          var $target = $(this.hash);
          $target = $target.length && $target
          || $('[name=' + this.hash.slice(1) +']');
          if ($target.length) {
            var targetOffset = $target.offset().top;
            $('html,body')
            .animate({scrollTop: targetOffset}, 750);
           return false;
          }
        }
      });
    });

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

@import url('https://fonts.googleapis.com/css?family=Oswald');

body {
  padding-top: 70px;
}
.hello {
  padding-top: 70px;
  background-image: url("https://images3.alphacoders.com/853/85305.jpg");
  background-repeat: no-repeat;
  min-height:100%;
  min-width:100%;
  background-attachment: fixed;
  padding-bottom: 100%;
}
.hello h1 {
  font-family: Oswald;
  text-align: center;
  color: white;
  font-size: 125px;
}
.hello h3 {
  font-family: Oswald;
  text-align: center;
  color: white;
}
.hello h5 {
  font-family: Oswald;
  text-align: center;
  color: white;
}
.jumbotron {
  background-color: grey;
}
#projects {
  background-image: url("http://www.caoping8.com/wp-content/uploads/2014/06/popular-landscaping-heavenly-landscape-photography-magazine-pdf-landscape-wildlife-photography-magazine-landscape-photography-magazine-uk-the-landscape-photography-magazine-essential-guide-to-lan.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height:100%;
  min-width:100%;
  padding-top:100px;
  padding-bottom:100%;
}
#projects h2 {
  color: #f2f2f2;
  font-family: monospace;
  text-align: center;
  font-size: 15px;
}
.placeholder1 {
  padding-left: 150px;
  align: left;
}
.placeholder2 {
  padding-right: 150px;
  align: center;
}
.placeholder3 {
  padding-right: 150px;
  align: right;
}
#about {
  background-image: url("https://i.ytimg.com/vi/n-9ZLWnFbOI/maxresdefault.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height:1000px;
  width: 100%;
  padding-top: 30px;
}
.infoLeft {
  color: white;
  font-family: Oswald;
  padding-left: 17px;
  text-align: left;
}
.infoRight {
  color: #000;
  font-family: Oswald;
  padding-right: 17px;
  text-align: right;
}
.infoCenter {
  color: #000;
  font-family: monospace;
  text-align: center;
  padding-top: 25px;
  font-size: 15px;
}
#contact {
  background-image: url('http://res.cloudinary.com/aninternetuser/image/upload/v1463674617/full_hd_nature_wallpapers_1080p_desktop_river_and_autumn_forest_d1dest.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100%;
  width: 100%;
  padding-bottom: 100%;
}

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Krunal Rindani</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#home">Home</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
  <!-- /.navbar-collapse -->
  </div>
<!-- /.container-fluid -->
</nav>

<div class="hello" id="home">
  <h1></h1>
  <h1></h1>
  <h1>Hello.</h1>

  <div class="jumbotron">
    <h3>This is my portfolio website. You can find my contact details and past work here. You can also learn more about me here!</h3>
    <h5>You can navigate through the webpage using the four hyperlinks, or you can scroll.</h5>
  </div> <!-- end Jumbotron -->
</div> <!-- end Home -->

<div id="projects">
  <h2>This area will be updated with a list of all my projects. This is my first one.</h2>
  <div class="row">
    <div class="col-xs-6 col-md-3 placeholder1">
      <a href="#" class="thumbnail jumbotron">
        <img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
      </a>
    </div> <!-- end placeholder1 -->
    <div class ="col-xs-6 col-md-3 placeholder2">
      <a href="#" class="thumbnail jumbotron">
        <img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
      </a>
    </div> <!-- end placeholder2 -->
    <div class ="col-xs-6 col-md-3 placeholder3">
      <a href="#" class="thumbnail jumbotron">
        <img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
      </a>
    </div> <!-- end placeholder3 -->
  </div>
</div> <!-- end Projects -->

<div id="about">
  <div class="infoLeft">
    <h1>About Me:</h1>
  </div> <!-- end infoLeft -->
  <div class="infoRight">
    <h4>I am a teen who loves everything with an engine and is fascinated by technology.</h4>
    <h4>I just got done with A Levels and am enjoying the freedom!</h4>
  </div> <!-- end infoRight -->
  <div class="infoCenter">
    <h3>Scroll down or click on Contact on the navigation bar to see the contact options.</h3>
  </div> <!-- end infoCenter -->
</div> <!-- end About -->

<div id="contact">
  <i class="fa fa-facebook-square" aria-hidden="true"></i>
</div> <!-- end Contact -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

此项目的CodePen链接：http://codepen.io/AnInternetUser/pen/zqVZBL?editors=0010

Answer 1

尝试在移动视图中使导航栏可折叠（和可切换）。

添加bootstrap.min.js
按<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
将<ul class="nav" ...换入<div id="navbar" class="navbar-collapse collapse">

这是我的导航栏代码：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Krunal Rindani</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#home">Home</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
  <!-- /.navbar-collapse -->
  </div>
<!-- /.container-fluid -->
</nav>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

http://codepen.io/glebkema/pen/GZbaWE

有关使我的网页更具响应性的问题

1 个答案: