1. Phones and Handhelds
a) iPhones
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
b) Galaxy Phones
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Galaxy S4 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Galaxy S5 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
c) HTC Phones
/* ----------- HTC One ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
2. Tablets
a) iPads
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
b) Galaxy Tablets
/* ----------- Galaxy Tab 10.1 ----------- */
/* Portrait and Landscape */
@media
(min-device-width: 800px)
and (max-device-width: 1280px) {
}
/* Portrait */
@media
(max-device-width: 800px)
and (orientation: portrait) {
}
/* Landscape */
@media
(max-device-width: 1280px)
and (orientation: landscape) {
}
c) Nexus Tablets
/* ----------- Asus Nexus 7 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
}
/* Portrait */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
}
d) Kindle Fire
/* ----------- Kindle Fire HD 7" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
/* ----------- Kindle Fire HD 8.9" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
3. Laptops
/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
4. Wearables
a) Apple Watch
/* ----------- Apple Watch ----------- */
@media
(max-device-width: 42mm)
and (min-device-width: 38mm) {
}
b) Apple Watch
/* ----------- Moto 360 Watch ----------- */
@media
(max-device-width: 218px)
and (max-device-height: 281px) {
}
参考：
- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
- CSS3: 移动端开发中 max-device-width 与 max-width 的区别
本文转自：CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices
相关推荐
本教程将探讨如何利用CSS3创建一款模拟苹果手表Apple Watch的开机动画特效。苹果手表作为智能穿戴设备的代表，其精致的用户界面和交互设计一直备受赞誉，而开机动画作为用户体验的一部分，对产品的第一印象至关重要...
CSS3 Media Queries是Web开发中的一个重要工具，它允许开发者根据设备的物理特性，如视口宽度、设备像素比等，来应用不同的样式规则。这一功能使得响应式网页设计成为可能，使得网站能在各种屏幕尺寸和设备上提供...
在 CSS2 时代，如果你曾经为你的网站设计过打印版 CSS，就会明白 CSS3 Media Queries 的作用，不过，CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用，事实上，CSS2 的 Media Type 并不曾被多少设备所支持过。...
CSS3媒体查询（Media Queries）是现代网页设计中用于响应式设计的关键技术之一。它们允许开发者根据不同的设备特性以及设备状态应用特定的CSS样式规则。媒体查询通过检测设备的屏幕尺寸、分辨率、方向、颜色深度等...
### 使用CSS3 Media Queries创建手机版网站 随着手持设备如智能手机和平板电脑的快速发展，网站适应各种屏幕尺寸变得尤为重要。CSS3 Media Queries作为一种强大的工具，帮助设计师和开发者针对不同类型的设备定制化...
在这些文件中，开发者通过CSS3的`@media`查询实现了不同设备的响应式设计，以适应各种屏幕尺寸。例如，使用媒体查询可以更改布局、字体大小和图片尺寸，确保在不同设备上都能提供良好的用户体验。 在`css`目录下，...
在本项目中，"CSS3实现苹果Apple设备模型代码.zip" 是一个包含了使用CSS3技术来模拟苹果设备（如iPhone、iPad等）外观的资源包。这个项目主要针对前端开发者，特别是那些希望在网页设计中添加逼真的苹果设备展示效果...
CSS媒体查询（Media Queries）是CSS中用于定义不同设备或屏幕环境下样式规则的关键技术。它允许开发者根据设备特性，如屏幕尺寸、分辨率、颜色深度等，动态调整网页的布局和样式，实现响应式设计。 在CSS2中，媒体...
在网页设计领域，CSS3（层叠样式表第三版）引入了媒体查询（@media queries）这一强大特性，使得我们能够根据设备的特定条件，如视口宽度、屏幕分辨率等，来应用不同的样式规则。这极大地提升了网页的响应式设计能力...
总结来说，CSSDevices是一个利用CSS3库创建逼真苹果设备模型的工具，它允许开发者轻松地在这些模型中展示内容，并实现轮播图效果。通过理解CSS3的关键特性，如变换、阴影和动画，我们可以自行创建类似的项目，提升...
在Web开发领域，HTML5（H5）的媒体查询（Media Queries）是一项至关重要的技术，它使得我们能够根据设备的不同特性，如屏幕尺寸、分辨率、方向等，为用户提供更为合适的布局和样式。通过媒体查询，我们可以创建响应...
媒体类型 all 所有设备 screen 电脑显示器 handheld 便携设备 tv 电视类型设备 print 打印用纸打印预览视图 关键字 and not(排除某种设备) only(限定某种设备) 媒体特性 媒体特性共13种，可以说是一个类似CSS属性...
CSS3中的媒体查询（Media Queries）是Web设计领域的一个重要技术，它允许内容根据设备的特定特性，如视口宽度、设备像素比等进行适配。这种能力使得开发者能够创建响应式网页设计，确保网站在不同设备上都能提供良好...
7. 媒体查询（Media Queries）：CSS3的媒体查询支持响应式设计，可以根据设备屏幕尺寸调整页面布局，确保移动商城在不同设备上的良好展示。 综上所述，HTML5和CSS3结合使用，可以创建出功能强大、视觉吸引力强且...
在网页设计领域，CSS3（层叠样式表第三版）引入了媒体查询（Media Queries）这一强大特性，使得我们可以根据设备的物理特性，如屏幕宽度、分辨率等，为不同的设备提供适应性的布局和样式。"CSS3+媒体查询 实现背景...
标题“CSS3 Media Query在IE9及更早版本的解决方法”所涉及的关键知识点是CSS3的媒体查询（Media Queries）以及如何在不支持媒体查询的旧版Internet Explorer（特别是IE9及以下版本）中实现兼容性。CSS3媒体查询是...
6. **响应式设计**：考虑到不同的屏幕尺寸，开发者可能会使用媒体查询（media queries）来确保模型在不同设备上都有良好的显示效果，这在移动优先的设计策略中尤为重要。 7. **背景图片与背景裁剪**：通过CSS3的...
首先，我们来理解CSS3媒体查询（Media Queries）。媒体查询是CSS3的一个关键特性，它允许内容根据设备的物理特性，如视口宽度、屏幕分辨率等进行适配。通过设置特定的断点，我们可以定义在不同屏幕尺寸下应用的样式...
可以使用媒体查询(`media queries`)来针对不同设备尺寸应用不同的CSS规则。例如，当屏幕宽度小于某个值时，可以通过`display: none`隐藏部分按钮，然后在用户点击箭头时使用JavaScript或jQuery显示。 4. **动画效果...