如何在较小的屏幕中将元素的位置从左侧更改为右侧?
这适用于更广泛的屏幕:
.nav {
position:absolute;
top: 0px;
left: 5%;
}
我想把它正确定位:10px用于较小的屏幕。
感谢。
=============================================== ============
我制作了一个jsfiddle链接:http://jsfiddle.net/romullus/5u64M/
=============================================== ============
答案 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;
}
}
}
答案 2 :(得分:0)
您的标头中是否有视口元标记?没有它,您的媒体查询将无法正常工作。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">