Twitter Bootstrap Question posted in

Twitter Bootstrap 3 Media queries

If suppose my device width is 800px, which media query will apply (execute)?

@media only screen and (min-width : 320px){

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px){

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px){

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px){

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px){

}

If i write the css for the device having screen size is between 768px to 991px and i declare it’s css in the media query

 @media only screen and (min-width : 768px){

}

then first two media queries will also gets applied how to avoid this.

Tags:

2

Answers


  1. 0

    You can use this three media query for 800px of width
    based on your option

    @media only screen and (min-width : 320px){

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px){

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px){

}
    Login or Signup to reply.
  2. 0 
    @screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;
@screen-md-max: 1199px;

//xs only
@media(max-width: @screen-xs-max) {}

//small and up

@media(min-width: @screen-sm-min) {}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search