如何根據屏幕分辨率移動圖標？

我不知道如何在將屏幕大小調整爲頁面底部之後，從側邊欄移動社交圖標。我試圖使用媒體查詢，但沒有運氣。有任何想法嗎？ https://jsbin.com/qegayapoya/edit?html,css,output 如何根據屏幕分辨率移動圖標？

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <title>PR PORTFOLIO</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link href="https://fonts.googleapis.com/css?family=Merriweather|Raleway" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <link rel=icon href=favicon.ico> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <link rel="stylesheet" href="style.css"> 

</head> 

<body> 
    <!-- SIDEBAR --> 

    <div class="container"> 
     <div class="row"> 

      <div class="col-md-3 sidebar"> 
       <div class="foto"> 


        <img src="pic.png" class=" img-responsive img-circle center-block " alt="pic"></div> 
       <h3 class="hi">Hi! I am <strong>JON</strong>, a front-end developer.</h3> 
        <!-- MENU --> 
      <ul> 
       <li><a href="#about">ABOUT</a></li> 
       <li><a href="#projects">PROJECTS</a></li> 
       <li><a href="#skills">SKILLS</a></li> 
       <li><a href="#contact">CONTACT</a></li> 
      </ul> 
      <!-- footer ICONS --> 
<footer > 
    <!--Social icons--> 
     <div class="social-icons-sidebar"> 


       <a title="" href="mailto:[email protected]" class="icons-sidebar-unit"> 
              <i class="fa fa-envelope-o" aria-hidden="true"></i> 
            </a> 

       <a title="" href="https://github.com/dyat" class="icons-sidebar-unit"> 
             <i class="fa fa-github" aria-hidden="true"></i> 
            </a> 

       <a title="" href="https://www.linkedin.com/in/williamhgates/pl" class="icons-sidebar-unit"> 

       <i class="fa fa-linkedin " aria-hidden="true"></i> 
            </a> 
        </div> 





    <!-- 
<i class="fa fa-linkedin A " aria-hidden="true"></i> 


      <i class="fa fa-github" aria-hidden="true"></i> 

      <i class="fa fa-envelope-o" aria-hidden="true"></i> --> 
     </div> 
</footer> 
<!-- MAIN --> 

     <div class="col-md-9 col-md-offset-3 content"> 
      <h2 id="about">ABOUT ME</h2>Hello! Creating fuctional and well designed websites was always my goal. To do that, I am using diffrent methods and web technologies. Learning and continous progress is bigest advantage. I am currenty looking for my first job as a junior front-end developer. 
      <h2 id="projects">RECENT PROJECTS</h2> 
      <div class="container-fluid"> 

       <div class="row"> 
        <div class="col-md-9"> 


        <div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 "><img src="1.png" alt="" class="img-responsive img-thumbnail"></div> 
        <div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 "><img src="2.png" alt="" class="img-responsive img-thumbnail"></div> 
        <div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 "><img src="3.png" alt="" class="img-responsive img-thumbnail"></div> 
        <div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 "><img src="4.png" alt="" class="img-responsive img-thumbnail"></div> 
       </div> 
      </div></div> 
<br><h2 id="skills">SKILLS</h2 
     <br> 
     HTML 5 - HERO <br> 
     CSS 3 - PRO <br> 
     JS - NOOB <br> 
     JQUERY - NOOB<br> 
     SASS - MAD <br> 
     GRUNT - GOD 
      <hr> 
      <h2 id="contact">CONTACT</h2> 
      <form class="form-horizontal"> 
<fieldset> 

<!-- Form Name --> 


<!-- Text input--> 
<div class="form-group"> 
    <label class="col-md-12 control-label" for=""></label> 
    <div class="col-md-12"> 
    <input id="" name="" type="text" placeholder="name" class="form-control input-md"> 

    </div> 
</div> 

<!-- Text input--> 
<div class="form-group " data-wow-delay="0.5s"> 
    <label class="col-md-12 control-label" for=""></label> 
    <div class="col-md-12"> 
    <input id="" name="" type="text" placeholder="email" class="form-control input-md"> 

    </div> 
</div> 

<!-- Textarea --> 
<div class="form-group " data-wow-delay="0.5s"> 
    <label class="col-md-12 control-label" for=""></label> 
    <div class="col-md-12"> 
    <textarea class="form-control" id="" name="">message</textarea> 
    </div> 
</div> 

<!-- Button --> 
<div class="form-group"> 
    <label class="col-md-12 control-label" for="singlebutton"></label> 
    <div class="col-md-12"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-default">send message</button> 
    </div> 
</div> 

</fieldset> 
</form> 
<img src="qrcode1.png" class="img-responsive center-block" alt="">  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp eu fuglorem Lorem ipsuat nulla pariatur. Exceeu fugiat it in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui r sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. 
</div> 
    </div> 
</div> 
     </div> 

     </div> 
    </div> 
</body> 

</html> 

      html, body, .container-fluid, .row { 
       height: 100%; 
      } 

      body { 
       background-color: #F2F0F1; 
      } 

      .sidebar { 
       background-color: tomato; 
      } 

      @media (min-width: 992px) { 
       .sidebar { 
        font-family:'Raleway', sans-serif; 
        position: fixed; 
        top: 0; 
        left: 0; 
        bottom: 0; 
        z-index: 1000; 
        display: block; 
        background-color: tomato; 
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.5); 

       } 
      } 




      ul li { 
       margin: 0 auto; 
       line-height: 60px; 
       list-style: none; 
       text-align: center; 
margin-right: 40px; 
/*czemu to srodkuje calosc???margin*/ 
       font-size: 24px; 
       padding: 4px; 
      } 
      li a{ 
       color: rgba(255, 255, 255, 0.4); 
      transition: color 0.3s ease-in-out; 
      text-align: center; 
      } 


      a:hover { 
      text-decoration: none; 
      color: rgba(0, 0, 0, 0.3); 
       padding: 0px; 

      } 

      .hi { 
       margin-right: 20px; 
       text-align: center; 
       color: rgba(0, 0, 0, 0.4); 
      } 

      .content { 
       padding: 2% 4% 2% 4%; 
       color: rgba(0, 0, 0, 0.4); 
       background-color: #F2F0F1; 
      } 

      #fixedbutton { 
       position: fixed; 
       top: 0px; 
       right: 0px; 
      } 

      .sidebar-bottom-wrap { 
       position: absolute; 
       bottom: 60px; 
       right: 40px; 
       max-width: 200px; 
      } 


       .foto { 
        margin-top: 10px; 
       } 
       .social-icons-sidebar { 
        position: absolute; 
        bottom: 20px; 
        left:0; 
        right: 0; 
        text-align: center; 


        font-size: 30px; 
       } 
.fa { 
color: rgba(255, 255, 255, 0.4); 
} 
.fa:hover { 
text-decoration: none; 
color: rgba(0, 0, 0, 0.3); 

transition: color 0.3s ease-in-out; 
} 

#about{ 
    font-family:'Raleway', sans-serif; 
    letter-spacing: 8px; 
    font-weight: 600; 
    margin-top: 10px; 
    margin-bottom: 15px; 
} 
#projects{ 
    font-family:'Raleway', sans-serif; 
    letter-spacing: 8px; 
    font-weight: 600; 
    margin-top: 20px; 
    margin-bottom: 15px; 
} 
#skills{ 
    font-family:'Raleway', sans-serif; 
    letter-spacing: 8px; 
    font-weight: 600; 
    margin-top: 20px; 
    margin-bottom: 15px; 
} 
#contact{ 
    font-family:'Raleway', sans-serif; 
    letter-spacing: 8px; 
    font-weight: 600; 

    margin-top: 20px; 
    margin-bottom: 15px; 
} 

/* 

'Merriweather', serif; 

font-family: 


*/

來源

2017-05-26 dylemat1

將此添加到您的css樣式的末尾。

@media (max-width: 992px) { 
    .social-icons-sidebar{ 
    position:static; 
    } 
}

來源

2017-05-26 18:53:03 Vilvan

非常感謝，還有一個問題。我注意到當我在991 px主菜單下面縮小屏幕時，沒有填充頁面的所有寬度。如何解決它？ – dylemat1

只需將此添加到您的CSS樣式。。容器寬度：100％; } – Vilvan

真棒，非常感謝，有美好的一天：D – dylemat1

如何根據屏幕分辨率移動圖標？

回答

相關問題