jquery - 使我的网站的某些部分更具移动性和不同的屏幕分辨率尺寸友好

问题描述

我的问题如下，我参与了我正在开发的简历网站的一部分，大多数东西都可以很好地调整移动设备的大小。使用预期的引导程序。我知道我在这方面不是最擅长的，我正在寻找一种方法来优化以下代码部分，以使其更具移动性和对不同的屏幕尺寸友好。

除了最右侧的日期和最右侧的位置外，所有东西似乎都可以很好地调整移动设备的大小。根据屏幕大小，它似乎四处移动并跳转到不同的行。

任何提示或解决方案？我的代码的其他部分可能有更好的方法？

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>

标签： jqueryhtmlcssbootstrap-4responsive-design

您可以使用媒体查询并为不同屏幕尺寸的每个组件定义样式。见下面的例子：

列类的宽度为 25%

但是当屏幕宽度小于 600px 时

列类的宽度为 100%

/* 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%;
  }
}

jquery - 使我的网站的某些部分更具移动性和不同的屏幕分辨率尺寸友好

问题描述

解决方案

推荐阅读