常见设备查询方式

最新推荐文章于 2022-11-14 19:11:42 发布

原创最新推荐文章于 2022-11-14 19:11:42 发布 · 900 阅读

2 ·

CC 4.0 BY-SA版权

本文为艾夏SEO博主原创文章，未经博主允许不得转载。

文章标签：

#程序媛 #响应式 #HTML5 #响应式设计

HTML+CSS 专栏收录该内容

4 篇文章

订阅专栏

常见设备查询方式

媒体查询是响应式设计的核心，它们分为显示器媒体查询、智能手机媒体查询和平板媒体查询

显示器媒体查询

显示器媒体查询是以屏幕大小为基础划分的

640px

@media screen and (max-width: 640px)

{

}

800px

@media screen and (max-width: 800px)

{

}

1024px

@media screen and (max-width: 1024px)

{

}

智能手机媒体查询

适用于大部分主流智能手机

iPhone(2G-4S)

/*Landscape Mode*/

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

}/* Portrait Mode */

@media screen and (max-device-width: 320px) {

}

iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),

only screen and (min-device-pixel-ratio : 1.5)

{

}

iPhone5

@media only screen and (min-device-width : 320px) and(max-device-width : 568px) {

/* 样式写在这里 */

}

iPhone6

@media only screen and (min-device-width: 375px) and(max-device-width: 667px) and (orientation : portrait) {

/*iPhone 6Portrait*/

}

@media only screen and (min-device-width: 375px) and(max-device-width: 667px) and (orientation : landscape) {

/*iPhone 6landscape*/

}

@media only screen and (min-device-width: 414px) and(max-device-width: 736px) and (orientation : portrait) {

/*iPhone 6+Portrait*/

}

@media only screen and (min-device-width: 414px) and(max-device-width: 736px) and (orientation : landscape) {

/*iPhone 6+landscape*/

}

@media only screen and (max-device-width: 640px), onlyscreen and (max-device-width: 667px), only screen and (max-width: 480px){

/*iPhone 6and iPhone 6+ portrait and landscape*/

}

@media only screen and (max-device-width: 640px), onlyscreen and (max-device-width: 667px), only screen and (max-width: 480px) and(orientation : portrait){

/*iPhone 6and iPhone 6+ portrait*/

}

@media only screen and (max-device-width: 640px), onlyscreen and (max-device-width: 667px), only screen and (max-width: 480px) and(orientation : landscape){

/*iPhone 6and iPhone 6+ landscape*/

}

HTC Evo，BlackBerry Torch，HTC Thunderbolt，HD2

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

{

}

平板媒体查询

这个列表会有点长

iPad

/* Landscape Mode */@media (max-device-width: 1024px)and (orientation: landscape) {

}

/* Portrait Mode */@media (max-device-width: 768px)and (orientation: portrait) {

}

iPad 2

/* Landscape Mode */@media (max-device-width: 1024px)and (orientation: landscape) {

}

/* Portrait Mode */@media (max-device-width: 768px)and (orientation: portrait) {

}

iPad 3

/* Landscape Mode */@media (max-device-width: 1024px)and (orientation: landscape) {

}

/* Portrait Mode */@media (max-device-width: 768px)and (orientation: portrait) {

}

iPad mini

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

/* 样式写在这里 */

}

Samsung Galaxy Tab 10.1

/* Landscape Mode */@media (max-device-width: 1280px)and (orientation: landscape) {

}

/* Portrait Mode */@media (max-device-width: 800px)and (orientation: portrait) {

}

Motorola Xoom

/* Landscape Mode */@media (max-device-width: 1280px)and (orientation: landscape) {

}

/* Portrait Mode */@media (max-device-width: 800px)and (orientation: portrait) {

}

HTC Flyer

/* Landscape Mode */@media (max-device-width: 1024px)and (orientation: landscape) {

}

/* Portrait Mode */@media (max-device-width: 600px)and (orientation: portrait) {

}

BlackBerry PlayBook

/* Landscape Mode */@media (max-device-width: 1024px)and (orientation: landscape) {

}

/* Portrait Mode */@media (max-device-width: 600px)and (orientation: portrait) {

}

HP TouchPad

/* Landscape Mode */@media (max-device-width: 1024px)and (orientation: landscape) {

}

/* Portrait Mode */@media (max-device-width: 768px)and (orientation: portrait) {

}

Lenovo Thinkpad Tablet

/* Landscape Mode */@media (max-device-width: 1280px)and (orientation: landscape) {

}

/* Portrait Mode */@media (max-device-width: 800px)and (orientation: portrait) {

}

Sony Tablet S

/* Landscape Mode */@media (max-device-width: 1280px)and (orientation: landscape) {

}

/* Portrait Mode */@media (max-device-width: 800px)and (orientation: portrait) {

}

T-Mobile G-Slate

/* Landscape Mode */@media (max-device-width: 1280px)and (orientation: landscape) {

}

/* Portrait Mode */@media (max-device-width: 768px)and (orientation: portrait) {

}

ViewSonic ViewPad 10

/* Landscape Mode */@media (max-device-width: 1024px)and (orientation: landscape) {

}

/* Portrait Mode */@media (max-device-width: 600px)and (orientation: portrait) {

}

Dell Streak 7

/* Landscape Mode */@media (max-device-width: 800px)and (orientation: landscape) {

}

/* Portrait Mode */@media (max-device-width: 480px)and (orientation: portrait) {

}

ASUS Eee Pad Transformer

/* Landscape Mode */@media (max-device-width: 1080px)and (orientation: landscape) {

}

/* Portrait Mode */@media (max-device-width: 800px)and (orientation: portrait) {

}