`
天梯梦
  • 浏览: 13732451 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）

 
阅读更多

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

}

 

参考：

  1. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  2. CSS3: 移动端开发中 max-device-width 与 max-width 的区别

 

本文转自：CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices

 

 

 

 

 

 

 

 

 

 

 

分享到：
| CSS3: 移动端开发中 max-device-width 与 m ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css3苹果手表apple watch开机动画特效

    本教程将探讨如何利用CSS3创建一款模拟苹果手表Apple Watch的开机动画特效。苹果手表作为智能穿戴设备的代表，其精致的用户界面和交互设计一直备受赞誉，而开机动画作为用户体验的一部分，对产品的第一印象至关重要...

    CSS3 Media Query CSS3媒介查询

    CSS3 Media Queries是Web开发中的一个重要工具，它允许开发者根据设备的物理特性，如视口宽度、设备像素比等，来应用不同的样式规则。这一功能使得响应式网页设计成为可能，使得网站能在各种屏幕尺寸和设备上提供...

    彻底弄明白CSS3的Media Queries(跨平台设计)

    在 CSS2 时代，如果你曾经为你的网站设计过打印版 CSS，就会明白 CSS3 Media Queries 的作用，不过，CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用，事实上，CSS2 的 Media Type 并不曾被多少设备所支持过。...

    CSS3媒体查询Media Queries基础学习教程

    CSS3媒体查询（Media Queries）是现代网页设计中用于响应式设计的关键技术之一。它们允许开发者根据不同的设备特性以及设备状态应用特定的CSS样式规则。媒体查询通过检测设备的屏幕尺寸、分辨率、方向、颜色深度等...

    纯CSS3实现苹果设备 iPhone iPad iMac iWatch

    在这些文件中，开发者通过CSS3的`@media`查询实现了不同设备的响应式设计，以适应各种屏幕尺寸。例如，使用媒体查询可以更改布局、字体大小和图片尺寸，确保在不同设备上都能提供良好的用户体验。 在`css`目录下，...

    CSS3实现苹果Apple设备模型代码.zip

    在本项目中，"CSS3实现苹果Apple设备模型代码.zip" 是一个包含了使用CSS3技术来模拟苹果设备（如iPhone、iPad等）外观的资源包。这个项目主要针对前端开发者，特别是那些希望在网页设计中添加逼真的苹果设备展示效果...

    纯CSS3打造逼真的苹果（Apple）电脑键盘

    4. **响应式设计**：CSS3的媒体查询（Media Queries）可能被用于确保键盘在不同尺寸的设备上都能正常显示，适应移动设备和桌面环境。 5. **Flexbox或Grid布局**：为了排列键盘的按键，开发者可能使用了Flexbox或CSS...

    CSS media queries

    CSS媒体查询（Media Queries）是CSS中用于定义不同设备或屏幕环境下样式规则的关键技术。它允许开发者根据设备特性，如屏幕尺寸、分辨率、颜色深度等，动态调整网页的布局和样式，实现响应式设计。 在CSS2中，媒体...

    CSS3 @media 媒体查询 实例源代码,调整浏览器窗口大小。当宽度小于300时，背景色变成淡蓝，否则淡绿色.zip

    在网页设计领域，CSS3（层叠样式表第三版）引入了媒体查询（@media queries）这一强大特性，使得我们能够根据设备的特定条件，如视口宽度、屏幕分辨率等，来应用不同的样式规则。这极大地提升了网页的响应式设计能力...

    纯CSS打造各种超逼真的苹果（Apple）设备模型

    总结来说，CSSDevices是一个利用CSS3库创建逼真苹果设备模型的工具，它允许开发者轻松地在这些模型中展示内容，并实现轮播图效果。通过理解CSS3的关键特性，如变换、阴影和动画，我们可以自行创建类似的项目，提升...

    CSS3媒体查询(Media Queries)介绍

    媒体类型 all 所有设备 screen 电脑显示器 handheld 便携设备 tv 电视类型设备 print 打印用纸打印预览视图 关键字 and not(排除某种设备) only(限定某种设备) 媒体特性 媒体特性共13种，可以说是一个类似CSS属性...

    HTML实现AppleWatch界面

    这个项目可能涉及到了对Apple Watch表盘的精确复刻，包括表针的动态效果，以达到与真实设备相似的用户体验。 首先，我们需要理解HTML的基本结构。HTML由一系列的元素（elements）组成，这些元素通过标签（tags）...

    css资源css3-mediaqueries

    CSS3中的媒体查询（Media Queries）是Web设计领域的一个重要技术，它允许内容根据设备的特定特性，如视口宽度、设备像素比等进行适配。这种能力使得开发者能够创建响应式网页设计，确保网站在不同设备上都能提供良好...

    HTML5+CSS3移动商城-分类

    7. 媒体查询（Media Queries）：CSS3的媒体查询支持响应式设计，可以根据设备屏幕尺寸调整页面布局，确保移动商城在不同设备上的良好展示。 综上所述，HTML5和CSS3结合使用，可以创建出功能强大、视觉吸引力强且...

    CSS3+媒体查询 实现背景切换 320 and up

    在网页设计领域，CSS3（层叠样式表第三版）引入了媒体查询（Media Queries）这一强大特性，使得我们可以根据设备的物理特性，如屏幕宽度、分辨率等，为不同的设备提供适应性的布局和样式。"CSS3+媒体查询 实现背景...

    CSS3 Media QueryIE9前解决方法

    标题“CSS3 Media Query在IE9及更早版本的解决方法”所涉及的关键知识点是CSS3的媒体查询（Media Queries）以及如何在不支持媒体查询的旧版Internet Explorer（特别是IE9及以下版本）中实现兼容性。CSS3媒体查询是...

    CSS3实现苹果Apple设备模型特效代码

    6. **响应式设计**：考虑到不同的屏幕尺寸，开发者可能会使用媒体查询（media queries）来确保模型在不同设备上都有良好的显示效果，这在移动优先的设计策略中尤为重要。 7. **背景图片与背景裁剪**：通过CSS3的...

    纯js和CSS3媒体查询制作简单的响应式导航菜单特效源码.zip

    首先，我们来理解CSS3媒体查询（Media Queries）。媒体查询是CSS3的一个关键特性，它允许内容根据设备的物理特性，如视口宽度、屏幕分辨率等进行适配。通过设置特定的断点，我们可以定义在不同屏幕尺寸下应用的样式...

    css3安卓Android（苹果iphone）桌面底部导航菜

    可以使用媒体查询(`media queries`)来针对不同设备尺寸应用不同的CSS规则。例如，当屏幕宽度小于某个值时，可以通过`display: none`隐藏部分按钮，然后在用户点击箭头时使用JavaScript或jQuery显示。 4. **动画效果...

    CSS样式访苹果菜单栏

    使用媒体查询（`media queries`）可以根据屏幕宽度改变布局或样式，确保在移动设备上也能良好显示。 7. 组合使用：将以上技术结合，可以创建出具有苹果风格的菜单栏，同时保持良好的用户体验和交互性。 在提供的...

Magicbox
Global site tag (gtag.js) - Google Analytics