常见的CSS媒体查询断点
我正在与CSS媒体查询响应式网站。
以下是一个很好的设备组织吗？ 手机，Ipad（风景和人像），桌面和笔记本电脑，大屏幕
什么是常见的媒体查询断点值？
我打算使用以下断点：
- 320：智能手机的肖像
- 481：智能手机景观
- 641或768 ???：iPad的肖像???
- 961：iPad的风景/小笔记本电脑？
- 1025：桌面和笔记本电脑
- 1281：宽屏幕
你怎么看？ 我有几个疑问？ 点。
而不是尝试针对特定设备上的@media规则，而是将其置于您的特定布局上，而不是将其作为基础。 也就是说，逐渐缩小桌面浏览器窗口，观察内容的自然断点。 每个网站都不一样 只要devise在每个浏览器宽度上都能stream畅地运行，它就可以在任何屏幕尺寸下都可靠地工作（而且它们中有很多很多）。
我一直在使用：
@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 */ } 它使事情相对简单，并允许你在肖像模式下为手机做一些不同的事情（很多时候我发现自己不得不改变他们的各种元素）。
我使用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) { }
UPDATE
根据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) and (max-width: 1999px){ ... }
这是从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 */ }
我可以告诉你，我在768处只使用了一个断点 – 这就是min-width: 768px来服务平板电脑和桌面，而max-width: 767px来服务电话。
我从没有回头。 它使得响应式开发变得简单而不是繁琐，并且以最小的开发时间在所有设备上提供了合理的体验，而不需要担心新的Android设备带有你没有考虑到的新分辨率。
考虑使用twitter bootstrap的断点。 有这么大的采用率你应该是安全的…
标准设备的媒体查询
一般为移动，平板电脑，桌面和大屏幕
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 --- */}
我总是先用桌面，手机先没有最高优先级呢？ IE <8将显示手机的CSS ..
normal css here: @media screen and (max-width: 768px) {} @media screen and (max-width: 480px) {}
有时会有一些自定义尺寸 我不喜欢bootstrap等
如果你去你的谷歌分析，你可以看到哪些屏幕分辨率访问者的网站使用：
受众>技术>浏览器和操作系统>屏幕分辨率（在统计信息上方的菜单中）
我的网站每月大约有5000个访问者，用于免费版本的responsinator.com的维度对访问者的屏幕分辨率进行了相当准确的总结。
这可以使你免于需要太完美。
而不是使用像素应该使用em或百分比，因为它更适应性和stream动性，最好不要目标设备的目标是您的内容：
HTML5摇杆阅读，移动第一
你的突破点看起来非常好。 我已经在三星平板电脑上尝试过961px ，它超越了这一点，所以我非常喜欢961px 。 如果您使用响应式CSS技术（如块和图像的% width/max-width （文本）），则不一定需要全部。
保持您的代码清洁和样式表在逻辑上按照屏幕“媒体”typesconfiguration分开…
1）使用himansu的回答作为参考： 常见的CSS媒体查询断点
和
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">
