常见的 CSS 媒体查询断点

Common CSS Media Queries Break Points

提问by Miguel Moura

I am working on a Responsive Web Site with CSS Media Queries.

我正在开发一个带有 CSS 媒体查询的响应式网站。

Is the following a good organization for devices? Phone, Ipad (Landscape & Portrait), Desktop and Laptop, Large Screen

以下是设备的良好组织吗？手机、Ipad（横向和纵向）、台式机和笔记本电脑、大屏幕

What are the common media queries break-point values?

常见的媒体查询断点值有哪些？

I am planning to use the following breakpoints:

我计划使用以下断点：

• 320: Smartphone Portrait
• 481: Smartphone Landscape
• 641 or 768 ???: IPad Portrait ???
• 961: IPad Landscape / Small Laptop ???
• 1025: Desktop and Laptop
• 1281: Wide Screen

• 320：智能手机人像
• 481：智能手机景观
• 641 或 768 ???：iPad 纵向 ???
• 961：iPad 横向/小型笔记本电脑？？？
• 1025：台式机和笔记本电脑
• 1281：宽屏

What do you think? I have a few doubts as ??? points.

你怎么认为？我有几个疑问？？？点。

回答by ralph.m

Rather than try to target @media rules at specific devices, it is arguably more practical to base them on your particular layout instead. That is, gradually narrow your desktop browser window and observe the natural breakpoints for your content. It's different for every site. As long as the design flows well at each browser width, it should work pretty reliably on any screen size (and there are lots and lots of them out there.)

与其尝试将 @media 规则定位在特定设备上，不如将它们基于您的特定布局可能更实用。也就是说，逐渐缩小桌面浏览器窗口并观察内容的自然断点。每个站点都不一样。只要设计在每个浏览器宽度上都能很好地流动，它应该可以在任何屏幕尺寸上非常可靠地工作（并且有很多这样的屏幕。）

回答by boz

I've been using:

我一直在使用：

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

It keeps things relatively simple and allows you to do something a bit different for phones in portrait mode (a lot of the time I find myself having to change various elements for them).

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

回答by Adrian P.

I'm using 4 break points but as ralph.m said each site is unique. You should experiment. There are no magic breakpoints due to so many devices, screens, and resolutions.

我使用了 4 个断点，但正如 ralph.m 所说，每个站点都是独一无二的。你应该试验一下。由于设备、屏幕和分辨率如此之多，因此没有神奇的断点。

Here is what I use as a template. I'm checking the website for each breakpoint on different mobile devices and updating CSS for each element (ul, div, etc.) not displaying correctly for that breakpoint.

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

So far that was working on multiple responsive websites I've made.

到目前为止，这是在我制作的多个响应式网站上工作的。

/* 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) {


}    

UPDATE

更新

As per September 2015, I'm using a better one. I find out that these media queries breakpoints match many more devices and desktop screen resolutions.

截至 2015 年 9 月，我正在使用一个更好的。我发现这些媒体查询断点匹配更多设备和桌面屏幕分辨率。

Having all CSS for desktop on style.css

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

All media queries on responsive.css: all CSS for responsive menu + media break points

响应式.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){ ... }

Update 2019:As per Hugo comment below, I removed max-width 1999px because of the new very wide screens.

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

回答by Nur Rony

This is from css-tricks link

这是来自 css-tricks链接

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

回答by DannyB

I can tell you I am using just a single breakpoint at 768 - that is min-width: 768pxto serve tablets and desktops, and max-width: 767pxto serve phones.

我可以告诉你，我只在 768 处使用了一个断点——即min-width: 768px服务于平板电脑和台式机，以及max-width: 767px服务于手机。

I haven't looked back since. It makes the responsive development easy and not a chore, and provides a reasonable experience on all devices at minimal cost to development time without the need to fear a new Android device with a new resolution you haven't factored in.

从那以后我就没有回头。它使响应式开发变得简单而不是一件苦差事，并以最小的开发时间成本在所有设备上提供合理的体验，而无需担心具有您未考虑的新分辨率的新 Android 设备。

回答by Suman K.C

Media Queries for Standard Devices

标准设备的媒体查询

In General for Mobile, Tablets, Desktop and Large Screens

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

1. Mobiles

1. 手机

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

    /* Styles */

    }

2. Tablets

2. 平板电脑

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

         /* Styles */

    }

3. Desktops & laptops

3. 台式机和笔记本电脑

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

    /* Styles */

}

4. Larger Screens

4. 更大的屏幕

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

    /* Styles */

}

In Detail including landscape and portrait

详细包括风景和肖像

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

Reference

参考

回答by elewinso

Consider using twitter bootstrap's break points. with such a massive adoption rate you should be safe...

考虑使用twitter bootstrap的断点。拥有如此高的采用率，您应该是安全的......

回答by himansu

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

回答by Marc

I always use Desktop first, mobile first doesn't have highest priority does it? IE< 8 will show mobile css..

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

normal css here: 

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

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

sometimes some custom sizes. I don't like bootstrap etc.

有时一些自定义尺寸。我不喜欢引导程序等。

回答by user2933101

If you go to your google analytics you can see which screen resolutions your visitors to the website use:

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

Audience > Technology > Browser & OS > Screen Resolution ( in the menu above the stats)

受众 > 技术 > 浏览器和操作系统 > 屏幕分辨率（在统计信息上方的菜单中）

My site gets about 5,000 visitors a month and the dimensions used for the free version of responsinator.comare pretty accurate summary of my visitors' screen resolutions.

我的网站每月有大约 5,000 名访问者，responsinator.com免费版所使用的尺寸非常准确地概括了访问者的屏幕分辨率。

This could save you from needing to be too perfectionistic.

这可以使您免于过于完美主义。