Question

我正在使用CSS媒体查询处理响应式网站。

以下是设备的良好组织吗？电话，Ipad（风景和肖像），台式机和笔记本电脑，大屏幕

什么是常见的媒体查询断点值？

我打算使用以下断点：

320：智能手机肖像
481：智能手机景观
641或768 ???：IPad Portrait ???
961：iPad风景/小型笔记本电脑???
1025：台式机和笔记本电脑
1281：宽屏

你怎么看？我有几个疑问？分。

Answer 1

不是尝试在特定设备上定位@media规则，而是将它们建立在您的特定布局上更为实际。也就是说，逐渐缩小桌面浏览器窗口并观察内容的自然断点。每个网站都有所不同。只要设计在每个浏览器宽度上都能很好地流动，它就可以在任何屏幕尺寸上非常可靠地工作（并且那里有很多很多。）

Answer 2

我一直在使用：

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
}

@media only screen and (max-width: 767px) {
    /* phones */
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}

它使事情变得相对简单，并允许你在纵向模式下为手机做一些不同的事情（很多时候我发现自己必须为它们改变各种元素）。

Answer 3

我使用了4个断点但是ralph.m表示每个站点都是唯一的。你应该试验一下。由于有如此多的设备，屏幕和分辨率，没有神奇的断点。

这是我用作模板的内容。我在网站上检查不同移动设备上的每个断点，并更新每个元素（ul，div等）的CSS，但不能正确显示该断点。

到目前为止，我正在制作多个响应式网站。

/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {


}

/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {


}

/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {


}


/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {


}

<强>更新

截至2015年9月，我使用了更好的产品。我发现这些媒体查询断点符合更多设备和桌面屏幕分辨率。

在style.css上拥有桌面的所有CSS

在responsive.css上的所有媒体查询：响应式菜单+媒体断点的所有CSS

@media only screen and (min-width: 320px) and (max-width: 479px){ ... }

@media only screen and (min-width: 480px) and (max-width: 767px){ ... }

@media only screen and (min-width: 768px) and (max-width: 991px){ ... }

@media only screen and (min-width: 992px){ ... }

更新2019：根据下面的Hugo评论，我删除了max-width 1999px，因为新的非常宽的屏幕。

Answer 4

这是来自css-tricks link

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

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

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

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

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

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

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

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

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Answer 5

我可以告诉你我在768只使用了一个断点 - min-width: 768px用于平板电脑和台式机，max-width: 767px用于提供电话。

我从此没有回头。它使响应式开发变得轻松而不是繁琐，并且以最低的开发时间成本为所有设备提供合理的体验，而无需担心新的Android设备具有您尚未考虑的新分辨率。

Answer 6

考虑使用twitter bootstrap的断点。如此庞大的采用率你应该是安全的......

Answer 7

标准设备的媒体查询

一般用于移动设备，平板电脑，桌面和大屏幕

<强> 1。手机

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

    /* Styles */

    }

<强> 2。片剂

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {

         /* Styles */

    }

第3。台式机和笔记本电脑

@media only screen and (min-width : 1224px) { /* Styles */ }

<强> 4。更大的屏幕

@media only screen 
and (min-width : 1824px) {

    /* Styles */

}

详情包括风景和肖像

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

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

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

    /* Tablets, iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Styles */
    }

    /* Tablets, iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
    }

    /* Tablets, iPads (portrait) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
    /* Styles */
    }

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

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

    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }

参考

Answer 8


@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/}
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/}
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/}
@media only screen and (min-width : 690px) and (max-width : 800px) {/*--- Tablet portrait ---*/}
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/}
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */}

Answer 9

我首先使用桌面，移动优先没有最高优先级吗？ IE＆LT; 8将显示移动css ..

normal css here: 

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

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

有时会有一些自定义尺寸。我不喜欢bootstrap等。

Answer 10

如果您转到谷歌分析，您可以看到您的网站访问者使用的屏幕分辨率：

受众＆gt;技术＆gt;浏览器＆amp; OS＆gt;屏幕分辨率（在统计数据上方的菜单中）

我的网站每个月大约有5,000位访问者，免费版responsinator.com使用的尺寸非常准确地汇总了我的访问者＆＃39;屏幕分辨率。

这可以让你免于过于完美。

Answer 11

使用em或百分比代替使用像素，因为它更具适应性和流畅性，最好不是目标设备定位您的内容：

HTML5 rockrs read, mobile first

Answer 12

你的破发点看起来非常好。我在三星平板电脑上试过了768px而且它超出了这个范围，所以我非常喜欢961px。如果您使用响应式CSS技术（例如% width/max-width用于块和图像（文本），则不一定需要所有这些技术。

Answer 13

保持代码清洁，样式表按逻辑分隔每个屏幕＆＃39;媒体＆＃39;输入配置...

1）使用himansu的上述答案作为参考：Common CSS Media Queries Break Points
和
2）https://www.w3schools.com/css/css3_mediaqueries.asp

你的答案是：

<link rel="stylesheet" media="@media only screen and (min-width : 320px) and (max-width : 480px)" href="mobilePortrait.css">

<link rel="stylesheet" media="@media only screen and (min-width : 481px) and (max-width : 595px)" href="mobileLandscape.css">

常见的CSS媒体查询中断点

13 个答案: