媒体查询的最佳宽度范围是多少
Posted
技术标签:
【中文标题】媒体查询的最佳宽度范围是多少【英文标题】：What Are The Best Width Ranges for Media Queries 【发布时间】：2012-11-18 04:40:48 【问题描述】：在响应式设计中检测？
我想在 4 个媒体查询中涵盖所有台式机/笔记本电脑显示器（一个方向），但我不知道是否有可能，例如：小型显示器、中型显示器、大型和超大型显示器。
例如在这段代码中
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px)
/* Large screens ----------- */
@media only screen and (min-width : 1824px)
我认为我们仍然需要将台式机和笔记本电脑媒体设备分为三个子媒体：小型（如 13 英寸至 14 台笔记本电脑）、中型（如 15 至 17 号）和大型（超过 22#）。我知道浏览器分辨率与屏幕分辨率不同，但假设我们有所有格式的全屏模式浏览器。
【问题讨论】：
【参考方案1】：用 Retina 显示器试试这个
/* 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 */
更新
/* 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 */
/* iPad 3 (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2)
/* Styles */
/* iPad 3 (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)
/* Styles */
/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px)
/* Styles */
/* Large screens ----------- */
@media only screen and (min-width: 1824px)
/* Styles */
/* iPhone 4 (landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2)
/* Styles */
/* iPhone 4 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)
/* Styles */
/* iPhone 5 (landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)
/* Styles */
/* iPhone 5 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)
/* Styles */
/* iPhone 6 (landscape) ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)
/* Styles */
/* iPhone 6 (portrait) ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)
/* Styles */
/* iPhone 6+ (landscape) ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)
/* Styles */
/* iPhone 6+ (portrait) ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)
/* Styles */
/* Samsung Galaxy S3 (landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)
/* Styles */
/* Samsung Galaxy S3 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)
/* Styles */
/* Samsung Galaxy S4 (landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)
/* Styles */
/* Samsung Galaxy S4 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)
/* Styles */
/* Samsung Galaxy S5 (landscape) ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)
/* Styles */
/* Samsung Galaxy S5 (portrait) ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)
/* Styles */
【讨论】：
【参考方案2】：您可以查看here 以获得更长的屏幕尺寸列表和相应的媒体查询。
或者去Bootstrap media queries (archived):
/* Large desktop */
@media (min-width: 1200px) ...
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) ...
/* Landscape phone to portrait tablet */
@media (max-width: 767px) ...
/* Landscape phones and down */
@media (max-width: 480px) ...
更新：
Bootstrap 5 breakpoints
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
此外，您可能还想看看 Foundation's media queries 的默认设置：
// Media Queries
$screenSmall: 768px !default;
$screenMedium: 1279px !default;
$screenXlarge: 1441px !default;
更新：
Foundation 6 breakpoints
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
【讨论】：
【参考方案3】：最好的选择是定位功能而不是设备，除非你必须这样做，引导程序做得很好，你可以在它们的断点上扩展，例如定位像素密度和 1920 以上的更大屏幕
【讨论】：
以上是关于媒体查询的最佳宽度范围是多少的主要内容，如果未能解决你的问题，请参考以下文章