javascript - 在使页面响应时遇到问题

Question

我需要的是让页面完全响应，但由于某些原因它不是。

移动 View

这是 CSS 和 HTML。我们正在使用 React 生成页面。

/* CSS Document  */

/*
@font-face {
    font-family: futura;
    src: url("../fonts/Futura-Book.ttf");
}

@font-face {
    font-family: futura italic;
    src: url("../fonts/Futura_ICG_Book_Oblique.ttf");
    font-style: italic, oblique;
}
*/

/*--------------------------------ALL PAGES----------------------------------------*/

/*Body Style*/

* {
  font-family: futura, verdana;
  box-sizing: border-box;
}
h1 {
  font-family: futura, verdana;
  text-align: center;
}
body {
  margin: auto;
  min-width: 600px;
}
/*NAVIGATION STYLE*/

nav {
  list-style-type: none;
  padding: 0px;
  overflow: hidden;
  background-color: #4a486d;
  margin: 0 auto;
  min-width: 100px;
  max-width: 950px;
  text-align: center;
}
.navcontainer {
  width: 100%;
  background-color: #4a486d;
}
#search {
  width: 20px;
  height: 15px;
  padding-right: 6px;
}
nav a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
nav a:hover {
  background-color: #1c1c1c;
  text-decoration: none;
  color: white;
}
nav a:visited {
  background-color: #1c1c1c;
  text-decoration: none;
  color: white;
}
/*JUMBOTRON STYLE*/

.jumbotron {
  text-align: center;
  border-radius: 25px;
  background-color: white;
  padding: 0px;
  margin: 0 auto;
  margin-bottom: 20px;
  margin-top: 10px;
  clear: both;
}
/*CONTAINER STYLE*/

.container {
  text-align: center;
  background-color: #f5f4f9;
  padding: 2%;
  clear: both;
  width: 100%;
  margin: 0 auto;
}
/*BACKGROUND COLOR*/

#backcol {
  background-color: #f5f4f9;
  height: 100%;
}
/*LEFT LINKS STYLING*/

#sidenav {
  list-style-type: none;
  margin: 0;
  padding: 5px;
  padding-left: 10px;
  width: 16%;
  background-color: #f5f4f9;
  position: absolute;
  height: 55%;
  overflow: auto;
  clear: both;
  text-align: left;
  float: left;
  border-radius: 3px;
}
li a {
  display: block;
  color: #1c1c1c;
  padding: 8px 0 0px 25px;
  text-decoration: none;
  padding: 5px;
}
li a.active {
  text-decoration: none;
  font-weight: bold;
}
li a:hover:not(.active) {
  background-color: #1c1c1c;
  color: white;
  text-decoration: none;
}
#leftNavPadding {
  padding: 10px;
}
#searchbar {
  height: 15px;
  width: 15px;
  margin: 1px;
}
#quick {
  border-radius: 3px;
  margin: 0;
  padding: 0;
  position: absolute;
  clear: both;
  float: left;
}
/*PIC STYLING*/

#pic {
  width: 50%;
  stroke: #8e8db7;
  stroke-width: 4;
  margin: auto;
}
#pic2 {
  width: 30%;
  stroke: #8e8db7;
  stroke-width: 4;
  margin: auto;
  padding-top: 45px;
  padding-bottom: 57px;
}
/*BUTTON STYLE*/

button {
  background-color: #6e6e9a;
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 3px;
  margin: 4px;
}
button:hover {
  background-color: #1c1c1c;
}
.vpButton {
  padding-top: 0px;
}
.profilesButton {
  margin-top: 0px;
}
/*FORM STYLE*/

form {
  text-align: center;
  padding-top: 60px;
}
label.formLabel {
  display: inline-block;
  width: 300px;
  font-size: 18px;
  font-weight: bold;
}
#fieldset {
  margin-top: -30px;
  border: 2px solid #515078;
}
#legend {
  color: #515078;
  font-size: 24px;
}
#fieldsetBorder {
  border: 1px dotted #8685a7;
}
#fieldsetBorder2 {
  border: 1px dashed #8685a7;
}
#legendLeft {
  text-align: left;
}
.astrex {
  color: red;
}
.trcolor {
  background-color: #8a87a2;
}
/*FOOTER*/

footer {
  background-color: #b1b2d2;
  color: #1c1c1c;
  text-align: center;
  height: 70px;
  clear: both;
  margin-top: 10px;
}
footer p {
  margin-right: 140px;
}
#footlogo {
  float: left;
  margin-left: 0px;
  height: 70px;
  width: 190px;
}
/*SOCIAL MEDIA BUTTONS IN FOOTER*/

.socialMediaButtons {
  float: right;
  margin: 1%;
  padding-top: 9px;
}
.socialMediaButtons:hover {
  background-color: #1c1c1c;
}
/*CONTAINER STYLE*/

#containerWidth {
  width: 960px;
}
/*PROFILE PAGE STYLE*/

#title {
  color: white;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
}
#title2 {
  color: white;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}
#title3 {
  color: white;
  font-weight: bold;
  font-size: 20px;
  margin-top: 20%;
  text-align: left;
  padding-left: 20px;
}
#text {
  color: white;
  font-size: 15px;
  text-align: left;
  padding-left: 20px;
}
.topPad {
  padding-top: 40px;
}
.bottomMargin {
  margin-bottom: 800px;
}
.empty {
  height: 20px;
}
/*---------------------------------------------------------------------*/

/*--------------------------------INDEX PAGE----------------------------------------*/

#topDiv {
  float: left;
  margin: 0px;
  background-color: #555b8f;
}
#arrow1 {
  height: 55%;
  width: 55%;
}
#introheading {
  font-family: futura bold;
  color: white;
  font-size: 70px;
  top: 40%;
  right: 18%;
  float: right;
  position: absolute;
}
#introtext {
  width: 26%;
  position: absolute;
  top: 70%;
  right: 16%;
  float: right;
  font-family: Futura, sans-serif;
  font-size: 15px;
  color: white;
  text-align: justify;
  float: right;
  clear: left;
  line-height: 1.5em;
}
#bottomDiv {
  float: right;
  margin: 0px;
  background-color: #555b8f;
  padding-bottom: 20%;
}
#bottomArrow {
  float: right;
  padding: 0px;
  margin: 0px;
  right: 0px;
  height: 55%;
  width: 55%;
}
#heading2 {
  font-family: futura bold;
  color: white;
  left: 150px;
  top: 130px;
  position: relative;
}
#secondHeading {
  font-size: 70px;
}
#endtext {
  width: 30%;
  position: relative;
  left: 140px;
  top: 180px;
  font-family: futura;
  font-size: 15px;
  color: white;
  text-align: justify;
  line-height: 1.5em;
}
#heximg {
  left: 170px;
  top: 20px;
  position: relative;
}
#hexstyle {
  height: 40%;
  width: 40%;
  margin-bottom: 50px;
}
/*---------------------------------------------------------------------*/

/*--------------------------------LOGIN PAGE START----------------------------------------*/

#divContainer2 {
  height: 550px;
  width: 550px;
  margin: 0 auto;
  position: relative;
}
#introDiv {
  height: 550px;
  width: 550px;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  padding-top: 120px;
  background-image: url(../img/login.jpg);
  background-repeat: no-repeat;
  background-size: 550px 550px;
}
/*BUTTON STYLING*/

.buttonlayout {
  width: 150px;
  height: 60px;
  padding: 3.5px 3px;
  font-size: 20px;
  font-family: futura;
  margin: 10px auto;
}
#guestButton {
  margin-top: -1px;
  padding: -3.5px -3px;
}
.displayBlock {
  display: block;
  width: 150px;
  height: 60px;
  padding: 3.5px 3px;
  margin: 0 auto;
  margin-bottom: 20px;
  font-size: 20px;
  font-family: futura;
}
#logInDiv {
  height: 550px;
  width: 550px;
  margin: 0 auto;
  position: absolute;
  padding-top: 80px;
  background-image: url(../img/login.jpg);
  background-repeat: no-repeat;
  background-size: 550px 550px;
}
#logInForm {
  margin: 0 auto;
  width: 350px;
}
input.form {
  font-family: futura italic;
  padding: 3px;
  margin: 10px;
  border-radius: 3px;
  border: 1px solid #1c1c1c;
  height: 30px;
  font-size: 20px;
  width: 200px;
  text-align: center;
  color: #6e6e9a;
}
#registerDiv {
  height: 550px;
  width: 550px;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  background-image: url(../img/login.jpg);
  background-repeat: no-repeat;
  background-size: 550px 550px;
}
#registerForm {
  text-align: center;
  margin-top: 80px;
}
/*--------------------------------LOGIN PAGE FINISH----------------------------------------*/

/*--------------------------------MY PROFILE----------------------------------------*/

/* hide nav button */

#hide {
  float: left;
  margin: 5px;
}
.clear {
  clear: both;
}
/*HEXAGON PROFILE IMAGE STYLING*/

svg {
  width: 19%;
  stroke: #8e8db7;
  stroke-width: 4;
}
#profileInfo {
  width: 90%;
  height: 750px;
  background-color: #8a83d1;
  margin: 0 auto;
  z-index: 3;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  padding: 10px;
}
.profileback {
  text-align: center;
  background-color: #f5f4f9;
  padding: 2%;
  clear: both;
  width: 100%;
  margin: 0 auto;
  background-image: url(../img/back.jpg);
  background-repeat: no-repeat;
}
input[type="file"] {
  display: none;
}
.custom-file-upload {
  padding: 6px 12px;
  cursor: pointer;
  background-color: none;
  position: absolute;
  right: 70px;
  width: 54px;
}
/*---------------------------------------------------------------------*/

/*--------------------------------POD SEARCH PAGE START---------------------------------------*/

#basictxt {
  text-align: left;
  padding: 11px;
  padding-bottom: 24px;
  margin: 5px;
}
#quote {
  text-align: left;
  color: #4a486d;
  font-size: 20px;
  padding: 10px;
  padding-top: 65px;
}
.hireButton {
  padding-top: 5px;
  width: 70px;
  padding: 5px;
}
#hireSize {
  width: 70px;
  height: 70px;
}
/*--------------------------------POD SEARCH PAGE FINISH---------------------------------------*/

/*--------------------------------POD PROFILE PAGE START----------------------------------------*/

#enquire {
  width: 150px;
  height: 50px;
  margin: 0px;
  margin-top: -10px;
}
#divContainer {
  width: 700px;
  height: 700px;
  margin: 0 auto;
  background-color: #f5f4f9;
  margin-bottom: 5%;
}
#skills {
  width: 330px;
  height: 750px;
  background-color: #6e6e9a;
  margin: 0 auto;
  float: left;
  z-index: 2;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
}
#skilllist {
  color: white;
  font-weight: bold;
  font-size: 20px;
  margin-top: 20%;
  text-align: left;
  padding-left: 20px;
  list-style-type: none;
}
#bio {
  width: 330px;
  height: 750px;
  background-color: #8a83d1;
  margin: 0 auto;
  float: left;
  margin-left: -150px;
  z-index: 3;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  padding: 10px;
}
#workHistory {
  width: 330px;
  height: 750px;
  background-color: #6a6cae;
  margin: 0 auto;
  float: left;
  margin-left: -150px;
  z-index: 1;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  text-align: center;
}
/*--------------------------------POD PROFILE PAGE FINISH---------------------------------------*/

/*--------------------------------BOOK NOW PAGE START----------------------------------------*/

label {
  display: inline-block;
  width: 220px;
  font-size: 26px;
  font-weight: bold;
}
input.form1 {
  font-family: futura italic;
  padding: 3px;
  margin: 10px;
  border-radius: 3px;
  border: 1px solid #1c1c1c;
  height: 30px;
  font-size: 16px;
  width: 200px;
  text-align: center;
  color: #6e6e9a;
}
#booknowFieldset {
  border: 1px dashed;
}
/*--------------------------------BOOK NOW PAGE FINISH----------------------------------------*/

/*--------------------------------CURRENT BOKINGS PAGE START---------------------------------------*/

#currentBookingTable,
.bookingtr,
.bookingtd {
  text-align: center;
  margin: 10px;
}
.bookingtd {
  max-width: 400px;
  min-width: 50px;
}
/*--------------------------------CURRENT BOKINGS PAGE FINISH---------------------------------------*/

/*--------------------------------HISTORIC BOOKING----------------------------------------*/

#Table,
th,
td {
  margin: 10px;
  padding: 10px;
}
/*TABLE STYLING*/

table,
th,
td {
  text-align: center;
  margin: 10px;
  margin-left: 20%;
}
td {
  max-width: 300px;
  min-width: 100px;
  min-height: 300%;
  margin: 10px;
  background-color: white;
}
th {
  padding: 10px;
}
/*---------------------------------------------------------------------*/

/*--------------------------------CONTACT US----------------------------------------*/

input.inputstyle {
  font-family: futura italic;
  padding: 3px;
  margin: 10px;
  border-radius: 3px;
  border: 1px solid #1c1c1c;
  height: 30px;
  font-size: 16px;
  width: 200px;
  text-align: center;
  color: #6e6e9a;
}
#color {
  background-color: white;
}
/*---------------------------------------------------------------------*/

var Content = React.createClass({ render: function() { return (

<div>
  <div id="topDiv">
    <img src="img/arrow1.png" alt="logo" id="arrow1" />
    <h1 id="introheading">Hello, Welcome to Pod</h1>
    <div id="introtext">
      <p>SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
        into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through the
        sale of this services.
        <br/>
      </p>
      <p>SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
        into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through the
        sale of this services.
        <br/>
      </p>
    </div>
  </div>
  <div id="bottomDiv">
    <img src="img/arrow2.png" alt="logo" id="bottomArrow" />
    <div id="heading2">
      <h2 id="secondHeading">Like what <br/> you see?</h2>
    </div>
    <div id="endtext">
      <p>SharpFutures is a social enterprise that supports young people into employment in the creative digital sector. By offering a range of interventions including Apprenticeships, Work Experience and Volunteering, SharpFutures nurture the transition
        into work, whilst responding to the fluctuating needs of creative digital businesses. We seed ideas through services for education, nurture the best talent by offering employment opportunities and real work experience, and we grow through the
        sale of this services.
        <br/>
      </p>
      <p>POD is a pool creatives able to provide important, flexible support to fledgling and fast-growing businesses in the creative digital sector. With members recruited and retained based on a desire to develop sector-relevant skills, SharpFutures POD
        offer clients the opportunity to bring on board temporary, support staff while also playing a valuable part in young people’s career development. Committing to a new full-time team member may be a stretch for small businesses, whereas having
        had the opportunity to ‘try before you buy’ can give employers confidence to commit.
      </p>
      <br/>
      <br/>
      <div id="heximg">
        <img id="hexstyle" src="img/hex2.png" alt="logo" />
        <br/>
        <img id="hexstyle" src="img/hex2.png" alt="logo" />
        <br/>
        <img id="hexstyle" src="img/hex2.png" alt="logo" />
      </div>
    </div>
  </div>
</div>

)} }); ReactDOM.render(


<Content />, document.getElementById('content'));

我需要知道的是如何使页面响应迅速而又不至于看起​​来很糟糕。对此有任何建议或帮助，我们将不胜感激。我们已经尝试了好几天，但一无所获。

谢谢。

Answer 1

您的 CSS 文件中有很多非常具体的尺寸以及宽度和高度，如果只有一种屏幕尺寸，这很好。

通常建议您选择使用:

断点和媒体查询，您可以在其中指定屏幕尺寸并使用媒体查询来更改某些屏幕元素的尺寸/位置。

或者，您可以:

媒体查询的相对大小(即百分比或 EM 大小单位)。

这里是一些示例代码的链接:

css-tricks.com - Media Queries for Standard Devices