需要为移动设备和小屏幕整齐地显示网站

时间：2018-05-18 18:38:00

标签： html css media-queries

我无法弄清楚如何在较小的屏幕尺寸上整齐地显示我的数字投资组合网站。我不知道怎么做。我将列出我的博客和项目页面以及样式表的代码。我不在乎它在小屏幕上看起来如何，只要它看起来整洁并且事物不重叠。

<body>
  <div class="container">
     <header>
        <div class="imageholder">
           <img src="images/headingphoto1.jpg" class="headerimg">
           <img src="images/headingphoto2.jpg" class="headerimg">
           <img src="images/headingphoto3.jpg" class="headerimg">
           <img src="images/headingphoto4.jpg" class="headerimg">
           <img src="images/headingphoto5.jpg" class="headerimg">
        </div>
     </header>
     <article>
        <div id="blogHeader">
           <h1>A Bear and His Thoughts</h1>
           <p>A Blog by Jared "Bear" VanOeffelen</p>
        </div>
        <div id="blogContent">
           <div class="post">
              <h2>Who is Bear?</h2>
              <h3 class="date">May 17, 2018</h3>
              <p>Bear is a nickname that I orignally received from my second grade teacher. Years later my sister and mother started calling me it as well. I originally hated it, but it has now kinda grown on me.</p>
              <p>Anyways, this is my blog and I hope to update it as often as possible with tons of content. I will be posting a lot of stuff relating to Web Development as well as updates on my projects that I will be working on. I might even add some stuff about my hobbies and other things that peak my interest</p>
              <p>Take a look around and I hope you enjoy your visit into the world of, "A Bear and His Thoughts!"</p>
           </div>
        </div>
     </article>
     <aside>
        <img src="images/profilephoto.jpg">
        <h3 class="title">Jared VanOeffelen</h3>
        <nav class="sitenavigation">
           <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="projects.html">Projects</a></li>
              <li><a href="resume.html">Resume</a></li>
           </ul>
        </nav>
     </aside>
     <footer>
        <p>Jared VanOeffelen &#8226; Web Developer</p>
        <p>Grand Rapids, Michigan</p>
        <p>jvanoeffelen18@gmail.com &#8226; (616)-633-2391</p>
     </footer>
  </div>


<body>
  <div class="container">
     <header>
        <div class="imageholder">
           <img src="images/headingphoto1.jpg" class="headerimg">
           <img src="images/headingphoto2.jpg" class="headerimg">
           <img src="images/headingphoto3.jpg" class="headerimg">
           <img src="images/headingphoto4.jpg" class="headerimg">
           <img src="images/headingphoto5.jpg" class="headerimg">
        </div>
     </header>
     <article>
        <div class="project">
           <section class="info">
              <h2>Project title &amp; link</h2>
              <p>Description of the project</p>
           </section>
           <section class="image">
              <!--for image of the project-->
           </section>
        </div>
        <div class="project">
           <section class="info">
              <h2>Project title &amp; link</h2>
              <p>Description of the project</p>
           </section>
           <section class="image">
              <!--for image of the project-->
           </section>
        </div>
        <div class="project">
           <section class="info">
              <h2>Project title &amp; link</h2>
              <p>Description of the project</p>
           </section>
           <section class="image">
              <!--for image of the project-->
           </section>
        </div>
     </article>
     <aside>
        <img src="images/profilephoto.jpg">
        <h3 class="title">Jared VanOeffelen</h3>
        <nav class="sitenavigation">
           <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="projects.html">Projects</a></li>
              <li><a href="resume.html">Resume</a></li>
           </ul>
        </nav>
     </aside>
     <footer>
        <p>Jared VanOeffelen &#8226; Web Developer</p>
        <p>Grand Rapids, Michigan</p>
        <p>jvanoeffelen18@gmail.com &#8226; (616)-633-2391</p>
     </footer>
  </div>


/* reset styles section */
html {
   font-size: 16px;
}
body {
   background-color: black;
}
a, article, aside, body, div, embed, footer, header, h1, h2, h3, li, nav, 
object, p, section, ul {
   border: 0;
   padding: 0;
   margin: 0;   
}
/* body and page container */
.container {
   max-width: 85%;
   background-color: beige;
   margin: 0 auto;
   display: block;
}
/* headings */
h1 {
   padding: 0.4 0.6em;
   font-size: 3.2em;
   text-align: center;
   color: DodgerBlue;
}
h2 {
   padding: 0.4em 0.6em;
   font-size: 2.5em;
   text-align: center;
}
h2:after {
   content: ' ';
   display: block;
   border: 2px solid #d0d0d0;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}
h3 {
   padding: 0.2em 0.4em;
   font-size: 1.8em;
}
/* header images section */
.imageholder {
   width: 100%;
   text-align: center;
}
.headerimg {
   display: inline-block;
   width: 19%;
   margin-left: auto;
   margin-right: auto;
}
/* main content */
article {
   width: 83%;
   float: right;
   padding: 1em 0;
}
article p {
   padding: 0 1em 1em;
   font-size: 1.4em;
}
.resume {
   width: 95%;
   margin-left: auto;
   margin-right: auto;
}
/* blog section */
#blogHeader {
   background-color: #cccccc;
   height: 90px;
   width: 98%;
   margin-bottom: 10px;
   display: block;
}
.post {
   background-color: #ffffff;
   padding: 5px;
   border: 1px solid #cccccc;
   margin-bottom: 5px;
   width: 97%;
   display: block;
}
.date {
   font-size: 1.6em;
   padding: 0 1em 1em;
   font-weight: bold;
}
/* projects container section */
.info {
   float: left;
   width: 62%;
   min-height: 300px;
   padding: 5px;
   border: 1px solid #cccccc;
   margin-bottom: 5px;   
   background-color: #ffffff;
}
.image {
   float: right;
   width: 30%;
   background-color: #ffffff;
   min-height: 300px;
   border: 1px solid #cccccc;
   margin-bottom: 5px;
   padding: 5px;
   margin-right: 30px;
}
/* sidebar */
aside {
   padding: 1em 0;
   background-color: DodgerBlue;
   float: left;
   width: 16%;
   text-align: center;
}
aside p {
   padding: 0.4em 0;
   margin: 0 0 0.6em;
   color: FloralWhite;
}
.title {
   padding: 0.4em 0;
   margin: 0 0 0.6em;
   color: FloralWhite;
   text-align: center;
   font-size: 2em;
}
aside img {
   display: block;
   margin: auto;
   width: 50%;
}
nav.sitenavigation {
   text-align: center;
}
nav.sitenavigation ul {
   list-style-type: none;
}
nav.sitenavigation li {
   margin: 0.3em 0.5em;
   font-size: 1.4em;
   line-height: 1.5em;
}
a {
   color: FloralWhite;
}
nav.sitenavigation a:link {
   text-decoration: none;
   font-weight: bold;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus {
   color: black;
}
/* footer section */
footer {
   padding: 0.6em;
   color: FloralWhite;
   background-color: DodgerBlue;
   text-align: center;
   clear: right;
}
footer p {
   margin: 0.4em;
   font-size: 1.5em;
}

1 个答案:

答案 0 :(得分：0)

您可以为容器指定固定宽度，并更改视口设置以缩小并在移动设备上显示整个网站。

/* reset styles section */

html {
  font-size: 16px;
}

body {
  background-color: black;
}

a,
article,
aside,
body,
div,
embed,
footer,
header,
h1,
h2,
h3,
li,
nav,
object,
p,
section,
ul {
  border: 0;
  padding: 0;
  margin: 0;
}


/* body and page container */

.container {
  width: 1200px;
  background-color: beige;
  margin: 0 auto;
  display: block;
}


/* headings */

h1 {
  padding: 0.4 0.6em;
  font-size: 3.2em;
  text-align: center;
  color: DodgerBlue;
}

h2 {
  padding: 0.4em 0.6em;
  font-size: 2.5em;
  text-align: center;
}

h2:after {
  content: ' ';
  display: block;
  border: 2px solid #d0d0d0;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}

h3 {
  padding: 0.2em 0.4em;
  font-size: 1.8em;
}


/* header images section */

.imageholder {
  width: 100%;
  text-align: center;
}

.headerimg {
  display: inline-block;
  width: 19%;
  margin-left: auto;
  margin-right: auto;
}


/* main content */

article {
  width: 83%;
  float: right;
  padding: 1em 0;
}

article p {
  padding: 0 1em 1em;
  font-size: 1.4em;
}

.resume {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}


/* blog section */

#blogHeader {
  background-color: #cccccc;
  height: 90px;
  width: 98%;
  margin-bottom: 10px;
  display: block;
}

.post {
  background-color: #ffffff;
  padding: 5px;
  border: 1px solid #cccccc;
  margin-bottom: 5px;
  width: 97%;
  display: block;
}

.date {
  font-size: 1.6em;
  padding: 0 1em 1em;
  font-weight: bold;
}


/* projects container section */

.info {
  float: left;
  width: 62%;
  min-height: 300px;
  padding: 5px;
  border: 1px solid #cccccc;
  margin-bottom: 5px;
  background-color: #ffffff;
}

.image {
  float: right;
  width: 30%;
  background-color: #ffffff;
  min-height: 300px;
  border: 1px solid #cccccc;
  margin-bottom: 5px;
  padding: 5px;
  margin-right: 30px;
}


/* sidebar */

aside {
  padding: 1em 0;
  background-color: DodgerBlue;
  float: left;
  width: 16%;
  text-align: center;
}

aside p {
  padding: 0.4em 0;
  margin: 0 0 0.6em;
  color: FloralWhite;
}

.title {
  padding: 0.4em 0;
  margin: 0 0 0.6em;
  color: FloralWhite;
  text-align: center;
  font-size: 2em;
}

aside img {
  display: block;
  margin: auto;
  width: 50%;
}

nav.sitenavigation {
  text-align: center;
}

nav.sitenavigation ul {
  list-style-type: none;
}

nav.sitenavigation li {
  margin: 0.3em 0.5em;
  font-size: 1.4em;
  line-height: 1.5em;
}

a {
  color: FloralWhite;
}

nav.sitenavigation a:link {
  text-decoration: none;
  font-weight: bold;
}

nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
  color: black;
}


/* footer section */

footer {
  padding: 0.6em;
  color: FloralWhite;
  background-color: DodgerBlue;
  text-align: center;
  clear: right;
}

footer p {
  margin: 0.4em;
  font-size: 1.5em;
}
<body>
  <div class="container">
    <header>
      <div class="imageholder">
        <img src="images/headingphoto1.jpg" class="headerimg">
        <img src="images/headingphoto2.jpg" class="headerimg">
        <img src="images/headingphoto3.jpg" class="headerimg">
        <img src="images/headingphoto4.jpg" class="headerimg">
        <img src="images/headingphoto5.jpg" class="headerimg">
      </div>
    </header>
    <article>
      <div id="blogHeader">
        <h1>A Bear and His Thoughts</h1>
        <p>A Blog by Jared "Bear" VanOeffelen</p>
      </div>
      <div id="blogContent">
        <div class="post">
          <h2>Who is Bear?</h2>
          <h3 class="date">May 17, 2018</h3>
          <p>Bear is a nickname that I orignally received from my second grade teacher. Years later my sister and mother started calling me it as well. I originally hated it, but it has now kinda grown on me.</p>
          <p>Anyways, this is my blog and I hope to update it as often as possible with tons of content. I will be posting a lot of stuff relating to Web Development as well as updates on my projects that I will be working on. I might even add some stuff
            about my hobbies and other things that peak my interest</p>
          <p>Take a look around and I hope you enjoy your visit into the world of, "A Bear and His Thoughts!"</p>
        </div>
      </div>
    </article>
    <aside>
      <img src="images/profilephoto.jpg">
      <h3 class="title">Jared VanOeffelen</h3>
      <nav class="sitenavigation">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="blog.html">Blog</a></li>
          <li><a href="projects.html">Projects</a></li>
          <li><a href="resume.html">Resume</a></li>
        </ul>
      </nav>
    </aside>
    <footer>
      <p>Jared VanOeffelen &#8226; Web Developer</p>
      <p>Grand Rapids, Michigan</p>
      <p>jvanoeffelen18@gmail.com &#8226; (616)-633-2391</p>
    </footer>
  </div>

相关问题
最新问题