个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 03:41:11 26 4
gpt4 key购买 nike

我不知道如何在调整屏幕大小后将社交图标从侧边栏移动到页面底部。我尝试使用媒体查询但没有成功。有任何想法吗？ 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:pqsdny@gmail.com" 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:


*/

最佳答案

将此添加到您的 css 样式的末尾。 

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

关于css - 如何根据屏幕分辨率移动图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44208252/

26 4 0
文章推荐： css - 我怎样才能让一个 flex 盒子的 child 继承高度
文章推荐： javascript - 使用 async/ajax 时保持不变的粘性页脚？
文章推荐： c++ - Visual Studio C++ 如何在我的“关于”框中显示动态消息(即字符串)？
文章推荐： CSS Overflow-x 隐藏和 Overflow-y
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com