更改元素响应网站的位置

时间:2014-03-20 17:29:20

标签: css html5 css3 responsive-design css-position

如何在较小的屏幕中将元素的位置从左侧更改为右侧?

这适用于更广泛的屏幕:

.nav {
    position:absolute;
    top: 0px;
    left: 5%;
}

我想把它正确定位:10px用于较小的屏幕。

感谢。

=============================================== ============

我制作了一个jsfiddle链接:http://jsfiddle.net/romullus/5u64M/

=============================================== ============

3 个答案:

答案 0 :(得分:0)

您需要为浏览器设置 size 的媒体查询,以便以不同的分辨率从左向右移动元素。

   @media (min-width: 780px) and (max-width: 980px) {
   // CSS definition for element(s) at this resolution 

}

当然,您可以将最小值和最大值更改为所需的大小,也可以设置最小宽度。

答案 1 :(得分:0)

您可以这样设置断点(假设600 px是小屏幕和大屏幕之间的断点)

@media screen and (min-width: 601px) {
   .nav {
    position:absolute;
    top: 0px;
    left: 5%;
 }
}



@media screen and (max-width: 600px) {
   .nav {
    position:absolute;
    right:10px;

 }
}

这是jsfiddle

更新1

参考问题中提供的更新小提琴,上述逻辑的新工作代码将

    @media screen and (max-width: 600px) {
        .social-nav {
            position:absolute;
            right: 10px;
        }
        .social-nav ul {
            margin: 0;
            padding:0;
        }
        .social-nav ul li {
            list-style: none;
            display:block;
            background: #393939;
            padding:10px 10px 5px 10px;
            margin: 1px;
            opacity: .5;
            transition: all 0.6s ease-in-out;
        }
        .social-nav ul li:hover {
            opacity: .8;
            background:#fff;
        }
    }
    @media screen and (min-width: 600px) {
        .social-nav {
            background:#000;
            width:100%;
            position:absolute;
            top: 0px;
            left: 5%;
        }
        .social-nav ul {
            margin: 0;
            padding:0;
        }
        .social-nav ul li {
            list-style: none;
            display:table-cell;
            float: left;
            background: #393939;
            padding:100px 10px 5px 10px;
            margin: 1px;
            opacity: .5;
            transition: all 0.6s ease-in-out;
        }
        .social-nav ul li:hover {
            opacity: .8;
            background:#fff;
        }
        .social-nav ul li a {
            color:#fff;
        }
    }
}

Updated Fiddle

答案 2 :(得分:0)

您的标头中是否有视口元标记?没有它,您的媒体查询将无法正常工作。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">