常见的 CSS 媒体查询断点

小开

我可以告诉你，我只使用一个断点在768-这是 min-width: 768px的服务平板电脑和台式机，和 max-width: 767px的服务电话。

从那以后我再也没有回头。它使响应式开发变得容易而不是繁琐，并且以最小的开发时间成本在所有设备上提供合理的体验，而不需要担心新的 Android 设备带有你没有考虑到的新分辨率。

小开

我一直在用:

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

它使事情相对简单，并允许你做一些有点不同的手机在肖像模式(很多时候，我发现自己不得不改变他们的各种元素)。

小开

与其试图将@media 规则作为特定设备的目标，不如将它们基于您的特定布局。也就是说，逐渐缩小桌面浏览器窗口并观察内容的自然断点。每个网站都不一样。只要设计在每个浏览器的宽度上都流畅，它在任何屏幕尺寸上都应该可靠地工作(而且有很多很多的屏幕尺寸)

小开

你的突破点看起来很不错。我已经在三星的平板电脑上尝试了 768px，它超出了这个范围，所以我真的很喜欢 961px。如果您使用响应式 CSS 技术，例如 % width/max-width用于块和图像(也包括文本) ，则不一定需要所有这些工具。

小开

这是从 css 的技巧链接

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

小开

考虑使用 Bootstrap的断点。有这么高的收养率，你应该是安全的。

小开

与其使用像素，不如使用 em 或百分比，因为它更具适应性和流动性，最好不要针对你的内容:

HTML5 Rocrs read，mobile first

小开

如果你去你的谷歌分析，你可以看到你的网站访问者使用的屏幕分辨率:

观众 > 科技 > 浏览器及操作系统 > 屏幕分辨率(在统计资料上方的菜单内)

我的网站每月有大约5000名访问者，免费版 Responsinator.com的尺寸是访问者屏幕分辨率的精确概括。

这可以让你避免过于完美主义。

小开

标准设备的媒体查询

一般适用于手机、平板电脑、台式机和大屏幕

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

参考文献

小开

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

小开

我使用了4个断点，但正如 Ralph 所说，每个站点都是独一无二的。您应该尝试一下。由于有这么多的设备、屏幕和分辨率，所以不存在神奇的断点。

下面是我用作模板的内容。我正在检查不同移动设备上的每个断点的网站，并为每个元素(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

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 的评论，我移除了最大宽度1999px，因为新的屏幕非常宽。

小开

我总是使用桌面优先，移动优先没有最高的优先级，不是吗? IE < 8将显示移动 css。

normal css here: @media screen and (max-width: 768px) {} @media screen and (max-width: 480px) {}

有时一些自定义的尺寸。我不喜欢自举等。

小开

保持代码整洁，按照屏幕“媒体”类型配置逻辑分隔样式表..。

1)参考上面给出的希曼苏的答案: 常见的 CSS 媒体查询断点
还有
2) < a href = “ https://www.w3school. com/css/css3 _ mediaqueries.asp”rel = “ nofollow norefrer”> 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">