Question

所以我正在进行一项任务，并在桌面上全屏显示它看起来很好。但是在移动设备中，页面背景的顶部不向右延伸，中间部分不居中，底部部分不向右延伸。此外，当我在浏览器中缩小页面时，前三分之一的文本会被切断而不是缩放。我有点失落，希望得到某种指导。我是Web应用程序的新手。我已经包含了代码以及代码页面和我的存储库的链接 https://profile-josh-adams.herokuapp.com/ https://github.com/ender554/profile

HTML

  <head>
    <title>Josh Adams</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>

    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <a class="navbar-brand" href="#index-page">Josh Adams</a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item">
            <a class="nav-link" href="#index-page">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#resume-page">Resume<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#links-page">Links</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="nav-item">
            <a class="nav-link" href="mailto:joshadams554@gmail.com">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  <div class="index container-fluid" id="index-page">
    <div class="headline">About Me</div>
    <hr>

    <div class="media col-8 offset-2">
      <span class="media-left">
        <%= image_tag("profilephoto.jpg") %>
      </span>
      <div class="media-body">
        <h2 class="media-heading">Joshua Adams:</h2>
        <hr class="title-rule">
        <h3 class="about-body">
      I am a 37 year old student with an extreme eagerness to learn, and be 
<br /><br />a key contributor in any profession. I love the academic setting and 
<br /><br />the skills it has helped me build, but I understand that in this field it is
<br /><br /> most important to learn in a real world environment, and I hope to 
<br /><br />extend my abilities greatly.
        </h3>
      </div>
    </div>
  </div>
  <div class="resume col-6 offset-3" id="resume-page">
    <h1 class="resume">Resume:</h1>
    <div class="resume-itself">
      <%= image_tag("resume.jpg") %>
    </div>

  </div>
  <div class="links" id="links-page">
    <h1 class="links-title">Links:</h1>
    <div class="actual-links col-8 offset-2">
      <div class="row">
        <div class="col">
          <%= link_to image_tag("linkedin.png"), "https://www.linkedin.com/in/joshua-adams-061901b6/", :target => "_blank" %>

        </div>
        <div class="col">
          <%= image_tag("piazza.png") %>
        </div>
        <div class="col">
          <%= link_to image_tag("github.jpg"), "https://github.com/ender554", :target => "_blank" %>
        </div>
      </div>
      <ul>
        <li>

        </li>
      </ul>
    </div>
  </div>
  </body>
</html>

CSS

@import "bootstrap";

body {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-width: 100%;
  min-height: 100%;
  background-position: center;
}

#index-page {
  background: image_url('indexbackground.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-width: 100%;
  min-height: 100%;
}


h1 {
  color: white;
}

.media {
  margin-top: 50px;
}



.headline {
  font-size: 80pt;
  text-align: center;
  color: white;
  margin-top: 50px;
  font-family: 'chunkfiveroman'; 
}

hr {
  width: 75%; 
  color: black; 
  height: 2px; 
  background-color: white;
  margin-top: 0px;
  padding-top: 0px;
}

.title-rule {
  width: 95%; 
  color: black; 
  height: 2px; 
  background-color: white;
  margin-top: 0px;
  padding-top: 0px;
}

.media-heading {
  margin-left: 25px;
  color: white;

}
.index {
  padding-top: 50px;
  height: 1000px;
  width: 100%;
}

.about-body{
  margin-left: 20px;
  color: white;  
}

.resume {
  margin-top: 20px;
  text-align: center;
  color: Black;
  font-size: 50pt;
  padding-top: 20px;


}
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:1;
}

.media-left img{
  border-radius: 5%;
  border: solid white 2px;
}

.links {
  margin-top: 20px;
  text-align: center;
  background-color: Black;
  width: 100%;
  font-size: 50pt;
  height: 1000px;
  padding-top: 50px;
}

.links-title {
  margin-bottom: 80px;
  font-size: 80pt;
  padding-top: -10px;
}

Answer 1

您需要在头标记中添加这两行，这将修复您的响应问题

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

最后一行是为了响应目的

你还有一个css问题，你的图像太大了

在css下方申请，它会照顾它

.resume-itself img{
  max-width: 100%;
}

Answer 2

使用提供引导程序的适当类。你正在以错误的方式使用bootstrap类

使用此链接了解有关bootstrap的更多信息 bootstrap 3 tutorial

Answer 3

您可能需要在元素中添加以下行。

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

前 - 。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

网站未在移动设备中正确调整大小

3 个答案: