我的问题如下，我参加了一个正在工作的简历网站，大多数内容都适合移动设备。使用引导程序，这是可以预期的。我知道我不是最擅长此事，并且正在寻找一种方法来优化以下代码部分，以使其更具移动性并适合不同的屏幕尺寸。
除了最右边的日期和最右边的位置以外，所有内容似乎都适合移动设备调整大小。根据屏幕大小，它似乎四处移动并跳到不同的行。
对于这些或解决方案有什么建议吗？可能是我代码其他部分的更好方法？
JSFiddle：https://jsfiddle.net/j49725p3/
html{
background-color: White;
scroll-behavior: smooth;
}
ul {
list-style: none;
}
.lipad:before{ content:"• "; font-size:12pt; }
#name {
font-size: 42px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
color: #373737;
}
.posi {
font-size: 12px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
color: red;
display: block;
text-align: center;
}
.bold {
font-size: 42px;
font-family: 'Roboto', sans-serif;
font-weight: 600;
color: #373737;
}
.continf {
font-family: 'Roboto', sans-serif;
font-size: 12px;
text-decoration: none!important;
color: #373737;
font-weight: 400;
}
.qut {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-style: italic;
color: #373737;
}
.mains {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 24px;
color: red;
overflow: hidden;
}
.mains:after {
content:"";
display: inline-block;
height: 0.3em;
vertical-align: bottom;
width: 100%;
margin-right: -100%;
margin-left: 10px;
border-top: 1px solid black;
}
.blk {
color: #373737;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 24px;
}
.subhead {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
color: #373737;
margin-bottom: 0;
}
.subtext {
font-size: 12px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
color: #686868;
margin-bottom: 1px;
}
.loca {
padding-left: 78%;
font-style: italic;
font-size: 14px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
color: red;
padding-bottom: 0;
}
.date {
padding-left: 63.4%;
padding-top: 0;
color: #686868;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
padding-right: 20px;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<script src="jquery-2.1.4.js"></script>
<script src="jquery-3.4.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Source+Sans+Pro:200,300,400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/26f7ef2ebf.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(window).on('load',function(){
$('.preloader').addClass('complete')
})
</script>
<script>
var isVisible = false;
$(window).scroll(function(){
var shouldBeVisible = $(window).scrollTop()>200;
if (shouldBeVisible && !isVisible) {
isVisible = true;
$('.gotop').show();
} else if (isVisible && !shouldBeVisible) {
isVisible = false;
$('.gotop').hide();
}
});
</script>
<title>Joseph Kuzera | Resume</title>
</head>
<body>
<section class="my-5">
<!-- Section heading -->
<p class="text-center h1-responsive my-5 qut">“With hard work and dedication, anything is possible.”
</p>
<!-- Section description -->
<h2 class="lead grey-text w-50 mx-auto mains">Edu<span class="blk">cation</span></h2>
<div class="container b-0 p-0 w-50"><p class="subhead">College Of Dupage <span class="loca">Glen Ellyn, IL</span></p>
<p class="subtext">A.A.S. IN COMPUTER INFORMATION SYSTEMS <span class="date">August 2015-August 2018</span></p>
<ul class="entry-content extra">
<li class="lipad">Was always in good standing maintaining a GPA of 3.5 or above.</li>
</ul>
</div>
</section>
</body>
</html>
最佳答案
您可以使用媒体查询，并针对不同的屏幕尺寸为每个组件定义样式。请参阅以下示例：
列类的宽度为25％
但是当屏幕宽度小于600px时
列类的宽度为100％
从https://www.w3schools.com/css/css3_mediaqueries_ex.asp阅读更多
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}