landscape mode是指宽度比高度宽的模式，也就是俗称的宽屏模式；

portrait mode是指高度比宽度高的模式，也就是俗称的竖屏模式；

/*#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 */