问题
I know there are millions of similar questions on the related subject and i've read many of them, but somehow i still don't really get how to position div's or different things based on the media.
So here's the thing. I have a div, which has 4 different div's that are basically just 4 different social-bar pictures. I would like to make them responsive to all media, but most importantly to mobile.
If there's anyone kind enough who could teach me step by step, how to do it, ill be more than happy with it.
So my code looks like this @ the moment.
HTML
<div class="col-sm-5" id="social-bar">
<div class="pic1"></div>
<div class="pic2"></div>
<div class="pic3"></div>
<div class="pic4"></div>
</div>
CSS
#social-bar
{
float:left;
display: inline-flex;
margin-top: 60px;
}
.pic1
{
background: url('../image/facebook.png') no-repeat;
width:29px;
height:27px;
margin-left: 180px;
}
.pic2
{
background: url('../image/twitter.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}
.pic3
{
background: url('../image/instagram.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}
.pic4
{
background: url('../image/gmail.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}
This is what i've tried so far, but it doesn't seem to be working
@media screen and (max-width: 350px){
.pic1{
background: url('../image/facebook.png');
}
}
@media screen and (max-width: 350px){
.pic2{
background: url('../image/twitter.png');
}
}
@media screen and (max-width: 350px){
.pic3{
background: url('../image/instagram.png');
}
}
@media screen and (max-width: 350px){
.pic4{
background: url('../image/gmail.png');
}
}
This is how social bar is positioned at the moment
Any input will be appreciated, thank you guys!
回答1:
Here is a sample showing how you can do.
It have 2 media queries which kicks in when screen is less than 660px and 440px wide.
Pay attention to their order in the CSS as well. The 660px rules comes before the 440px rules, and is valid even when the 440px rules kicks in, which means that the rules made in the 660px query need to be altered again in 440px, if they should be different.
Use this fiddle and play with the different settings, resize the window and see what happens.
Side note:
If you aren't used to fiddle, you can resize the inner windows by dragging their borders, which make it easy to test how the page changes. Just push the "Run" and/or "Update" in upper left corner, to reload or save the last code changes.
html, body {
margin: 0
}
.header {
min-width: 380px;
padding: 10px;
border-bottom: 1px solid #999;
}
.container {
padding: 10px;
white-space: nowrap;
}
.header .col {
display: inline-block;
width: 33%;
}
.header .col:nth-child(2) {
text-align: center
}
.header .col:nth-child(3) {
text-align: right
}
.header .col:nth-child(1) img {
width: 100%;
height: 30px;
}
.container .row {
margin-bottom: 10px;
}
.container .row span {
margin-left: 10px;
vertical-align: top;
}
@media (max-width: 660px){
.header .col:nth-child(1) {
display: block;
width: auto;
}
.header .col:nth-child(2) {
text-align: left;
width: 50%;
}
.header .col:nth-child(3) {
width: 50%;
}
.header .col:nth-child(2) img {
width: 20%;
height: 30px;
}
}
@media (max-width: 440px){
.header .col:nth-child(1),
.header .col:nth-child(2),
.header .col:nth-child(3) {
display: block;
width: auto;
text-align: left
}
.header .col:nth-child(2) img {
width: 24%;
}
.container .row span {
display: block;
margin-left: 0;
margin-top: 10px;
}
}<div class="header">
<div class="col">
<img src="http://placehold.it/100x30/?text=logo" />
</div><div class="col">
<img src="http://placehold.it/30x30" />
<img src="http://placehold.it/30x30" />
<img src="http://placehold.it/30x30" />
<img src="http://placehold.it/30x30" />
</div><div class="col">
<img src="http://placehold.it/60x30/?text=cart butt" />
</div>
</div>
<div class="container">
<div class="row">
<img src="http://lorempixel.com/150/100/sports" />
<span> Some text ... being aligned at the top</span>
</div>
<div class="row">
<img src="http://lorempixel.com/150/100/city" />
<span> Some text ... being aligned at the top</span>
</div>
</div>回答2:
Read more about media queries and responsive web-design here and here
check fiddle
<div class="abc">
<div class="bcd">
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a><h3>Some Text</h3></a>
</div>
<div class="bcd">
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a><h3>Some Text</h3></a>
</div>
<div class="bcd">
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a><h3>Some Text</h3></a>
</div>
<div class="bcd">
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a><h3>Some Text</h3></a>
</div>
</div>
<style>
.abc{padding:0; margin:0; box-sizing:border-box; width:100%;}
.bcd{display:inline-block;width:24%;}
@media all and (max-width: 360px){
.bcd
{
display:inline-block;
width:49%;
}
}
</style>
回答3:
you can do that without using media queries by just simple CSS try this
html code
<div class="col-sm-5">
<div class="social-icons">
<a href="" target="new" title="facebook"><img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/48/social-facebook-box-blue-icon.png" alt="facebook" /></a>
<a href="" target="new" title="twitter"><img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/48/social-twitter-box-blue-icon.png" alt="twitter" /></a>
<a href="" target="new" title="instagram"><img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/48/Instagram-icon.png" alt="instagram" /></a>
<a href="" target="new" title="gmail" class="last"><img src="http://icons.iconarchive.com/icons/cornmanthe3rd/plex/48/Communication-gmail-icon.png" alt="gmail" /></a>
<div class="clr"></div>
</div>
</div>
css
.social-icons a {
float: left;
margin: 0 5px 0 0;
}
.social-icons a img {
width: 29px;
height: 27px;
}
.clr {
clear: both;
}
.last {
margin-right: 0px !important;
}
来源：https://stackoverflow.com/questions/34703868/how-to-make-divs-inside-div-responsive