针对不同设备大小编写媒体查询

Question

I want to do some responsiveness fixes for certain devices.

For eg for Samsung Galaxy s5 , I need to change some code.

In chromes inspect element , It shows something like 360px X 640px .

Now how do I write the specific code for this device?

For iphone5 It shows 320px X 568px .

I read somewhere that If I write like this

@media only screen and (max-width: 766px) {
}

It'll work for all the devices but this doesn't seem to be working.

So overall for all these devices how do I write media query.

Please suggest.

EDIT : So After first comment's url, This is what I am doing

/* Portrait */
@media only screen 
 and (min-device-width: 375px) 
 and (max-device-width: 667px) 
 and (-webkit-min-device-pixel-ratio: 2)
 and (orientation: portrait) { 
  margin-left: 30px;
 }

But this doesn't work.

Answer 1

Below are the all media queries for different resolution. So you can use it to make your website responsive.

    /* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}



/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}



/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}



/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}



/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}



/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}



/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}



/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}

/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}



/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}



/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

Answer 2

The media queries do work for phones, but you probably are missing this in your head tag:

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

Also, inside the @media tag, you need to specify the class that you want to give the styles to:

@media only screen and (max-width: 766px) {
    .my-div {
        /* Styles Here */
    }
}

Answer 3

It would be good if you can go through the W3schools to get the clear understand on media queries

Using media queries

and after this you check Media Queries for Standard Devices

here is the basic media query implementation

<div id="container">
  <div class="row">
    <div class="col one">
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. </p>
        </div>
        <div class="col two">
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. </p>
        </div>
  </div>
</div>


.col{
    color:#fff;
        float:left;
        margin:2%;
        width: 46%;
}
.one{
  background-color: #e95b33;
}

.two{
  background-color: #40b7d7;
}

    @media screen and (max-width: 600px) { 
        .col{
            float: none;
            margin:0;
            width: 100%;
        }
    }

CodePen