如何更改响应式设计中按钮的位置?
问题描述:
我想改变按钮的位置,这将缩小到手机相对于图像股利。我试过位置/绝对;但它没有生效。这些按钮也不会保留在图像div内。我不确定媒体查询是否可以完成这项工作。任何解决方案如何更改响应式设计中按钮的位置?
<div id="hero-wrapper" class="main_wrapper hero">
<img src="images/home-hero-image.jpg" alt="fruute">
<div class="herobuttons"><div id="hero-shop-cookies" class="hero-btn"><a href="gourmet-cookies/index.html" onClick="_gaq.push(['_trackEvent', 'Homepage', 'Body', 'Cookies']);">shop cookies</a></div>
<div id="hero-shop-gifts" class="hero-btn"><a href="gift-baskets/index.html" onClick="_gaq.push(['_trackEvent', 'Homepage', 'Body', 'Gifts']);">shop gifts</a></div></div>
</div>
CSS
#hero-shop-cookies {
top: 398px;
left: 550px;
}
#hero-shop-gifts {
top: 398px;
left: 715px;
}
.main_wrapper hero{
width: 100%;
}
#hero-wrapper{
position: relative;
}
.hero-wrapper > .hero-btn a{
position: absolute;
left: 0;
right: 15px;
bottom: 20px;
top: 0;
background-color: red;
}
@media screen and (min-width: 768px) {
#nav-menu{
display: none;
}
#navigation li, #navigation a{
float:left;
}
.main_wrapper hero, .hero-btn{
width: 100%;
}
.herobuttons{
position: relative;
left: 0;
top: 0;
}
#slideshow-area{
width: 300px;
}
}
答
变化最小宽度:768px;到最大宽度:768px;
移动从smaler媒体查询开始,如: '@media(min-width:100px)and(max-width:500px){/ * Mobile only * /' – Foxsk8 2014-09-30 18:10:14