針對不同設備大小的書寫媒體查詢

例如對於Samsung Galaxy s5，我需要更改一些代碼。

在chromes inspect element，它顯示類似360px X 640px。

現在我該如何編寫此設備的特定代碼？

對於iphone5它顯示320px X 568px。

我讀的地方，如果我寫這樣

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

它會工作的所有設備，但是這似乎並不奏效。

所有這些設備的整體如何寫媒體查詢。

請建議。

編輯：所以第一條評論的網址後，這是我在做什麼

/* 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; 
}

但是，這是行不通的。

來源

2016-06-17 Suraj

也許[這]（https：//開頭css-tricks.com/snippets/css/media-queries-for-standard-devices/）可以幫助 –

在此，什麼是將「風景」和「肖像」結合在一起，然後再將它們分開的原因？ – Suraj

這是一個很好的觀察。不幸的是我沒有答案。我只能猜測這是一個全面的方法來覆蓋所有可能的設備和方向，但一個更受教育的答案肯定是需要的 –

以下是針對不同分辨率的所有媒體查詢。所以你可以用它來使你的網站反應靈敏。

/* 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 &amp; 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 */ 
}

來源

2016-06-17 06:22:07

請看看更新的問題薩加爾 – Suraj

我試過iPhone 6，但沒有奏效。 – Suraj

如果風格不適用，那麼給！重要的是該CSS。如果仍然無法工作，那麼您必須在小提琴或SO片段中提供鏈接或完整代碼。 –

媒體查詢做工作電話，但你可能在你的head標籤缺少這樣的：

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

此外，@media標籤裏面，你需要指定類，您想給款式：

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

來源

2016-06-17 06:25:55 Zentryn

找到問題不，我不會錯過它們。我有他們 – Suraj

看着你的帖子的編輯，我看到你是在錯誤的方式給樣式。我更新了我的答案，告訴你應該怎麼做。 – Zentryn

哎呀，是的，我是。讓我正確地嘗試 – Suraj

這將是一件好事，如果你可以通過W3schools得到清晰和erstand媒體查詢

Using media queries

，並在此之後，你檢查Media Queries for Standard Devices

這裏是基本的媒體查詢實現

<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

來源

2016-06-17 06:33:38

針對不同設備大小的書寫媒體查詢

回答

相關問題