<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h1> Media CSS & Hacks </h1>
</div>
<div class="row">
<h3>Media Query CSS </h3>
<h3>All Browsers CSS hacks (IE9, IE10, IE11, MS Edge, Safari, Mozilla Firefox, Google Chrome ) </h3>
<h3>Mobile device css hacks (iphones)</h3>
</div>
<div class="row">
<p> Please find all css hack in CSS Tab </p>
</div>
</div>
/* ----------- Media Query ----------- */
/* ##Device = Desktops, ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {
}
/* ##Device = Laptops, Desktops, ##Screen = B/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
}
/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
}
/* ##Device = Tablets, Ipads (landscape), ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}
/* ##Device = Low Resolution Tablets, Mobiles (Landscape), ##Screen = B/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {
}
/* ##Device = Most of the Smartphones Mobiles (Portrait), ##Screen = B/w 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) {
}
/* ----------- Chromex and safari CSS ----------- */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome, if Chrome rule needed */
.your-class {your css property}
/* Safari only css */
::i-block-chrome, .your-class {your css property}
}
/* ----------- Safari Only CSS ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .your-class {your css property}
}
/* ----------- IE Only CSS ----------- */
@media screen and (min-width:0\0) {
/* IE 9, 10 & 11 CSS */
.your-class {your css property}
}
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
/* IE9 Only */
.your-class {your css property}
}
@media all and (-ms-high-contrast:none){
/* IE10 */
.your-class {your css property}
/* IE11 */
*::-ms-backdrop, .your-class {your css property}
}
/* ----------- MS Edge Only CSS ----------- */
@supports (-ms-ime-align:auto) {
.your-class {your css property}
}
/* ----------- Mozilla Only CSS ----------- */
@-moz-document url-prefix() {
.your-class {your css property}
}
/* ----------- 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) {
}
/* ----------- iPhone 8 ----------- */
@media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2) {
}
/* ----------- iPhone 8+ ----------- */
@media only screen
and (device-width : 414px)
and (device-height : 736px)
and (-webkit-device-pixel-ratio : 3) {
}
/* ----------- iPhone X ----------- */
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) {
}
