如何根据屏幕分辨率移动图标？

我不知道如何在将屏幕大小调整为页面底部之后，从侧边栏移动社交图标。我试图使用媒体查询，但没有运气。有任何想法吗？ 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

如何根据屏幕分辨率移动图标？

回答

相关问题