有问题使页面响应

时间：2016-03-09 10:54:19

标签： javascript html css responsive-design

我需要的是页面完全响应，并且由于某种原因它不是。

Desktop View

移动视图 Mobile 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'));

我需要知道的是如何让页面响应而不会让它看起来很糟糕。任何建议或帮助将不胜感激。我们现在已经尝试了好几天，什么都没有。

感谢。

4 个答案:

答案 0 :(得分：2)

CSS文件中有很多非常具体的尺寸，宽度和高度，如果只有一个屏幕尺寸，那就太棒了。

通常建议您选择使用：

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

或者，你可以选择：

具有媒体查询的相对大小（即百分比或EM大小调整单位）。

以下是一些示例代码的链接：

css-tricks.com - Media Queries for Standard Devices

答案 1 :(得分：1)

您需要先更新CSS。对于响应式网站，您需要以百分比形式编写所有内容。正如我注意到你已经写了许多高度，宽度，填充等（以像素为单位）（px）。

使用％更新它们将有助于您使其响应。

发布您需要使用特定屏幕尺寸的媒体文件。我建议您使用％而不是px，并使用Google来处理媒体文件。

答案 2 :(得分：0)

问题在于绝对定位使元素超出内容并且不会自动修复。使元素动态化，然后在CSS3中使用@media screen and..来使布局负责。

答案 3 :(得分：0)

您正在手机中测试桌面视图。很明显，在某个地方你会发现破坏或覆盖的UI元素。 因此，您可以使用媒体查询和视口来自定义您的设计，以使设计适合您的分辨率。 例如，您可以减小字体大小和图像大小及其位置。

希望它有所帮助。

相关问题
最新问题