Question

我想为某些设备做一些响应性修复。

例如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;
 }

但这不起作用。

Answer 1

以下是针对不同分辨率的所有媒体查询。因此，您可以使用它来使您的网站响应。

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

Answer 2

媒体查询执行适用于手机，但您可能在head代码中遗漏了此内容：

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

此外，在@media标记内，您需要指定要为其指定样式的类：

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

Answer 3

如果您可以通过W3schools了解媒体查询，那将是一件好事

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

为不同的设备尺寸编写媒体查询

3 个答案: