按需调整断点
一、谷歌后摘抄的一部分媒体查询
/*#region SmartPhones */
/* SmartPhones */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
/* Landscape */
@media only screen and (min-width : 321px) {}
/* Portrait */
@media only screen and (max-width : 320px) {}
/*#endregion */
/*#region Phones and Handhelds */
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen and (min-device- 320px) and (max-device- 480px) and (-webkit-min-device-pixel-ratio: 2) {}
/* Portrait */
@media only screen and (min-device- 320px) and (max-device- 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
/* Landscape */
@media only screen and (min-device- 320px) and (max-device- 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen and (min-device- 320px) and (max-device- 568px) and (-webkit-min-device-pixel-ratio: 2) {}
/* Portrait */
@media only screen and (min-device- 320px) and (max-device- 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
/* Landscape */
@media only screen and (min-device- 320px) and (max-device- 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device- 375px) and (max-device- 667px) and (-webkit-min-device-pixel-ratio: 2) {}
/* Portrait */
@media only screen and (min-device- 375px) and (max-device- 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
/* Landscape */
@media only screen and (min-device- 375px) and (max-device- 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen and (min-device- 414px) and (max-device- 736px) and (-webkit-min-device-pixel-ratio: 3) {}
/* Portrait */
@media only screen and (min-device- 414px) and (max-device- 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {}
/* Landscape */
@media only screen and (min-device- 414px) and (max-device- 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {}
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
@media screen and (device- 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {}
/* Portrait */
@media screen and (device- 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {}
/* Landscape */
@media screen and (device- 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {}
/* ----------- HTC One ----------- */
/* Portrait and Landscape */
@media screen and (device- 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {}
/* Portrait */
@media screen and (device- 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}
/* Landscape */
@media screen and (device- 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {}
/*#endregion */
/*#region Tablets */
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
@media only screen and (min-device- 768px) and (max-device- 1024px) and (-webkit-min-device-pixel-ratio: 1) {}
/* Portrait */
@media only screen and (min-device- 768px) and (max-device- 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* Landscape */
@media only screen and (min-device- 768px) and (max-device- 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device- 768px) and (max-device- 1024px) and (-webkit-min-device-pixel-ratio: 1) {}
/* Portrait */
@media only screen and (min-device- 768px) and (max-device- 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* Landscape */
@media only screen and (min-device- 768px) and (max-device- 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device- 768px) and (max-device- 1024px) and (-webkit-min-device-pixel-ratio: 2) {}
/* Portrait */
@media only screen and (min-device- 768px) and (max-device- 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {}
/* Landscape */
@media only screen and (min-device- 768px) and (max-device- 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {}
/* ----------- Galaxy Tab 10.1 ----------- */
/* Portrait and Landscape */
@media (min-device- 800px) and (max-device- 1280px) {}
/* Portrait */
@media (max-device- 800px) and (orientation: portrait) {}
/* Landscape */
@media (max-device- 1280px) and (orientation: landscape) {}
/* ----------- Asus Nexus 7 ----------- */
/* Portrait and Landscape */
@media screen and (device- 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- 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- 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: landscape) {}
/* ----------- Kindle Fire HD 7" ----------- */
/* Portrait and Landscape */
@media only screen and (min-device- 800px) and (max-device- 1280px) and (-webkit-min-device-pixel-ratio: 1.5) {}
/* Portrait */
@media only screen and (min-device- 800px) and (max-device- 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {}
/* Landscape */
@media only screen and (min-device- 800px) and (max-device- 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- 1200px) and (max-device- 1600px) and (-webkit-min-device-pixel-ratio: 1.5) {}
/* Portrait */
@media only screen and (min-device- 1200px) and (max-device- 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait) {}
/* Landscape */
@media only screen and (min-device- 1200px) and (max-device- 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape) {}
/*#endregion */
/*#region Laptops */
/* ----------- Non-Retina Screens ----------- */
@media screen and (min-device- 1200px) and (max-device- 1600px) and (-webkit-min-device-pixel-ratio: 1) {}
/* ----------- Retina Screens ----------- */
@media screen and (min-device- 1200px) and (max-device- 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {}
/*#endregion */
/*#region Wearables */
/* ----------- Apple Watch ----------- */
@media (max-device- 42mm) and (min-device- 38mm) {}
/* ----------- Moto 360 Watch ----------- */
@media (max-device- 218px) and (max-device-height: 281px) {}
/*#endregion */
/*#region Desktops & Laptops */
@media only screen and (min-width : 1224px) {}
/* Large Screens */
@media only screen and (min-width : 1824px) {}
/* Windows 8 SnapMode */
@media screen and (max-400px) {
@-ms-viewport { 320px; }
}
/*#endregion */
二、Bootstrap 采用的媒体查询
/*#region Bootstrap Media Query */
/* 超小屏幕（手机，小于 768px） */
/* 小屏幕（平板，大于等于 768px） */
@media (min- 768px) {}
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min- 992px) {}
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min- 1200px) {}
/* screen-xs-max */
@media (max- 767px) {}
/* screen-sm-min & screen-sm-max */
@media (min- 768px) and (max- 991px) {}
/* screen-md-min & screen-md-max */
@media (min- 992px) and (max- 1199px) {}
/* screen-lg-min */
@media (min- 1200px) {}
/*#endregion */