我正在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
答案 0 :(得分：0)
尝试在移动视图中使导航栏可折叠（和可切换）。
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>