Html 需要为移动设备和更小的屏幕整洁地显示网站
我不知道如何在较小的屏幕上整齐地显示我的数字公文包网站。我不知道怎么做。我将列出我的博客和项目页面的代码以及我的样式表。我不在乎它在更小的屏幕上看起来如何，只要它看起来整洁，并且不重叠Html 需要为移动设备和更小的屏幕整洁地显示网站,html,css,media-queries,Html,Css,Media Queries,我不知道如何在较小的屏幕上整齐地显示我的数字公文包网站。我不知道怎么做。我将列出我的博客和项目页面的代码以及我的样式表。我不在乎它在更小的屏幕上看起来如何，只要它看起来整洁，并且不重叠 <body> <div class="container"> <header> <div class="imageholder"> <img src="images/headingphoto1.jpg" cl
<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 • Web Developer</p>
<p>Grand Rapids, Michigan</p>
<p>jvanoeffelen18@gmail.com • (616)-633-2391</p>
</footer>
</div>
您可以为容器指定固定的宽度，并更改视口设置以缩小并在移动设备上显示整个站点
/*重置样式部分*/
html{
字体大小：16px；
}
身体{
背景色：黑色；
}
A.
文章
在一边
身体
分区，
嵌入
页脚，
标题，
h1，
h2，
h3，
锂，
导航，
对象
P
部分
保险商实验室{
边界：0；
填充：0；
保证金：0；
}
/*正文和页面容器*/
.集装箱{
宽度：1200px；
背景颜色：米色；
保证金：0自动；
显示：块；
}
/*标题*/
h1{
填充：0.40.6em；
字体大小：3.2米；
文本对齐：居中；
颜色：淡蓝色；
}
氢{
填充：0.4em 0.6em；
字号：2.5em；
文本对齐：居中；
}
h2：之后{
内容：''；
显示：块；
边框：2px实心#d0；
边界半径：4px；
-webkit边界半径：4px；
-moz边界半径：4px；
长方体阴影：插入0 1px 1px rgba（0,0,0,0.5）；
-webkit盒阴影：插入0 1px 1px rgba（0,0,0,0.5）；
-moz盒阴影：插入0 1px 1px rgba（0,0,0,0.5）；
}
h3{
填充：0.2em 0.4em；
字号：1.8em；
}
/*标题图像部分*/
.图像支架{
宽度：100%；
文本对齐：居中；
}
海德里姆先生{
显示：内联块；
宽度：19%；
左边距：自动；
右边距：自动；
}
/*主要内容*/
文章{
宽度：83%；
浮动：对；
填充：1em 0；
}
第p条{
填充：0 1em 1em；
字号：1.4em；
}
.简历{
宽度：95%；
左边距：自动；
右边距：自动；
}
/*博客部分*/
#博客头{
背景色：#中交；
高度：90px；
宽度：98%；
边缘底部：10px；
显示：块；
}
.邮政{
背景色：#ffffff；
填充物：5px；
边框：1px实心#中交；
边缘底部：5px；
宽度：97%；
显示：块；
}
.日期{
字号：1.6em；
填充：0 1em 1em；
字体大小：粗体；
}
/*工程及货柜组*/
.info{
浮动：左；
宽度：62%；
最小高度：300px；
填充物：5px；
边框：1px实心#中交；
边缘底部：5px；
背景色：#ffffff；
}
.形象{
浮动：对；
宽度：30%；
背景色：#ffffff；
最小高度：300px；
边框：1px实心#中交；
边缘底部：5px；
填充物：5px；
右边距：30px；
}
/*边栏*/
旁白{
填充：1em 0；
背景色：淡蓝色；
浮动：左；
宽度：16%；
文本对齐：居中；
}
旁白{
填充：0.4em0；
边缘：0.6em；
颜色：花白色；
}
.头衔{
填充：0.4em0；
边缘：0.6em；
颜色：花白色；
文本对齐：居中；
字号：2em；
}
旁img{
显示：块；
保证金：自动；
宽度：50%；
}
导航网站导航{
文本对齐：居中；
}
导航站点导航{
列表样式类型：无；
}
导航站点导航li{
保证金：0.3em 0.5em；
字号：1.4em；
线高：1.5em；
}
a{
颜色：花白色；
}
nav.sitenavigation a:链接{
文字装饰：无；
字体大小：粗体；
}
导航a：悬停，
导航a：焦点{
颜色：黑色；
}
/*页脚部分*/
页脚{
填充：0.6em；
颜色：花白色；
背景色：淡蓝色；
文本对齐：居中；
清楚:对,；
}
页脚p{
保证金：0.4em；
字号：1.5em；
}
贾里德·瓦诺弗伦•；网络开发者
密歇根州大急流城
jvanoeffelen18@gmail.com • （616）-633-2391
<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 & 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 & 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 & 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 • Web Developer</p>
<p>Grand Rapids, Michigan</p>
<p>jvanoeffelen18@gmail.com • (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;
}