更改元素的位置 - 响应式网站答案

【问题标题】：Change position of an element - responsive website更改元素的位置 - 响应式网站
【发布时间】：2014-03-26 14:08:42
【问题描述】：

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

这适用于更宽的屏幕：

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

我想把它放在正确的位置：10px 用于较小的屏幕。

谢谢。

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

我做了一个jsfiddle链接：http://jsfiddle.net/romullus/5u64M/

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

【问题讨论】：

标签： html css responsive-design css-position

【解决方案1】：

你可以这样设置断点（假设600px是小屏和大屏之间的断点）

@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

【讨论】：

感谢您的回答！我做了这个，但它仍然在左侧......我真的不知道是什么问题......
@romullus：您好，您只是在正确的位置错过了右花括号。我已经更新了我的答案并创建了一个新的小提琴。检查一下。

【解决方案2】：

您的标题中有视口元标记吗？没有它，您的媒体查询将无法正常工作。

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

【讨论】：

【解决方案3】：

您需要为 size 设置媒体查询，就像您希望浏览器一样，以不同的分辨率将元素从左向右移动。

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

}

当然，您可以将最小和最大更改为您想要的大小，或者您可以设置一个最小宽度。

【讨论】：

是的...我已经做到了。但是在我为小屏幕设置的这个媒体查询中，我的元素仍然在左边，尽管我把右边：10px；有什么想法吗？