使我的网站的某些部分更具移动性和不同的屏幕分辨率尺寸友好
Posted
技术标签:
【中文标题】使我的网站的某些部分更具移动性和不同的屏幕分辨率尺寸友好【英文标题】：Making parts of my website more mobile and different screen resolution size friendly 【发布时间】：2019-12-31 05:38:03 【问题描述】：我的问题如下，我参与了我正在开发的简历网站的一部分，大多数东西都可以很好地调整移动设备的大小。使用预期的引导程序。我知道我在这方面不是最好的，我正在寻找一种方法来优化以下代码部分，以使其更加移动和不同的屏幕尺寸友好。
除了最右侧的日期和最右侧的位置外，所有东西似乎都可以很好地调整移动设备的大小。它似乎会根据屏幕大小四处移动并跳转到不同的行。
对于这些或解决方案有什么提示吗？我的代码的其他部分可能有更好的方法？
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>
【问题讨论】：
【参考方案1】：您可以使用媒体查询并为不同屏幕尺寸的每个组件定义样式。见下面的例子：
列类的宽度为 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%;
【讨论】：
以上是关于使我的网站的某些部分更具移动性和不同的屏幕分辨率尺寸友好的主要内容，如果未能解决你的问题，请参考以下文章
如何使我的自定义 HTML 小部件针对不同的屏幕尺寸显示不同？