常用主流移动设备CSS3 Media Queries整理

常用主流移动设备CSS3 Media Queries整理

使用的时候根据实际的需要进行条件判断，其中

landscape 表示设备 横屏 情况 ，portrait 表示设备 竖屏 情况

max-device-width 表示设备最大分辨率宽度，min-device-width 表示设备最小分辨率宽度

关于 min-width 和 min-device-width 的区别是，前者是指的网页窗口的最小宽度，后者是指设备最小分辨率宽度，同理 max-width 和 max-device-width，前者是指网页窗口的最大宽度，后者是指设备最大分辨率宽度。

值得注意的是 我们在写设备页面适配的时候，不要忘记加上这句，要不然页面在PC端模拟测试是没有效果的。

<meta name="viewport" content="width=device-width,user-scalable=no" />

意思是：设置屏幕宽度为设备宽度，禁止用户手动调整缩放，关于viewpotr其他具体参数设置，可以百度查阅。

代码如下

@charset "utf-8";

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

}

/**
* iPhone 4/4s portrait
*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation:portrait)  {

}

/**
* iPhone 4/4s landscape
*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation:landscape) {

}

/**
*  iPhone 5/5s landscape & portrait
*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px) {

}

/**
*  iPhone 5/5s portrait
*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (orientation: portrait) {

}

/**
*  iPhone 5/5s landscape
*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (orientation: landscape) {

}

/**
*  iPhone 6 landscape & Portrait
*/
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px) {

}

/**
*  iPhone 6  Portrait
*/
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation : portrait) {

}

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

}

/**
*  iPhone 6+  Portrait
*/
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation : portrait) {

}

/**
*  iPhone 6+  landscape
*/
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation : landscape) {

}

/**
*  Galaxy S3 landscape & portrait
*/
@media screen
and (device-width: 320px)
and (device-height: 640px) {

}

/**
*  Galaxy S3 portrait
*/
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (orientation: portrait) {

}

/**
*  Galaxy S3 landscape
*/
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (orientation: landscape) {

}

/**
*  Galaxy S5 landscape & portrait
*/
@media screen
and (device-width: 360px)
and (device-height: 640px) {

}

/**
*  Galaxy S5 portrait
*/
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (orientation: portrait) {

}

/**
*  Galaxy S5 landscape
*/
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (orientation: landscape) {

}

/**
*  iPad  landscape & portrait
*/
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {

}

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

}

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

}

以上代码主要针对 主流的移动 苹果设备 和 安卓设备 进行整理的

整理的目的是方便自己需要时查阅，也同时分享给需要的小伙伴，代码片段参考网上资源，并再加以说明和修改。

如有问题，希望看后的小伙伴可以帮忙指出，共同进步