常见的media断点

/*#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-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) {}

/* ----------- 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) {}

/* ----------- 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) {}

/*#endregion */

/*#region Tablets */

/* ----------- 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) {}

/* ----------- 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) {}

/* ----------- 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) {}

/* ----------- 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)
{}

/*#endregion */

/*#region 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) {}

/*#endregion */

/*#region Wearables */

/* ----------- Apple Watch ----------- */

@media (max-device-width: 42mm) and (min-device-width: 38mm) {}

/* ----------- Moto 360 Watch ----------- */

@media (max-device-width: 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-width:400px) {

@-ms-viewport { width: 320px; }

}

/*#endregion */

二、Bootstrap 采用的媒体查询

/*#region Bootstrap Media Query */

/* 超小屏幕（手机，小于 768px） */

/* 小屏幕（平板，大于等于 768px） */

@media (min-width: 768px) {}

/* 中等屏幕（桌面显示器，大于等于 992px） */

@media (min-width: 992px) {}

/* 大屏幕（大桌面显示器，大于等于 1200px） */

@media (min-width: 1200px) {}

/* screen-xs-max */

@media (max-width: 767px) {}

/* screen-sm-min & screen-sm-max */

@media (min-width: 768px) and (max-width: 991px) {}

/* screen-md-min & screen-md-max */

@media (min-width: 992px) and (max-width: 1199px) {}

/* screen-lg-min */

@media (min-width: 1200px) {}

/*#endregion */