Bootstrap 3 custom css class depending of devices

问题

I need to set a height on a div and i would like to set it relative to the device screen.

For ie :

/*Extra small devices Phones (<768px)*/
.myClass { height: 200px; }

/*Small devices Tablets (≥768px)*/  
.myClass { height: 400px; }

/*Medium devices Desktops (≥992px)*/    
.myClass { height: 600px; }

/*Large devices Desktops (≥1200px)*/
.myClass { height: 800px; }

回答1:

Edit: Improved example at CodePen.

I would add to it from a bit different angle. Often times you might need to perform different operations in JS depending on your breakpoint. For that purpose I often use:

<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>

These 4 divs allow you check for currently active breakpoint. For an easy JS detection, you can have a set of 4 functions like this one :

function isMobile() {
    return $('.device-xs').is(':visible');
}

Your question lacks enough detail for me to help you better, but in case what you need can't be achieved by simply defining different properties of an element in a different media query, you could assign certain class, at any point, by:

if( isMobile() ) {
    $('.someClass').css('property', 'value');
}

回答2:

@media screen and (max-width: 768px){
  .myClass{
    height:200px;
  }
}

回答3:

Look at media queries.

@media (max-width: 768px) {
  .myClass {
    display: none;
  }
}

@media (max-width: 992px) {
  .myClass{
    display: none;
  }
}

@media (max-width: 1200px) {
  .myClass{
    display: block;
  }
}

回答4:

Use the viewport width and height after declaring the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

you can set .myClass height as a percentage of the viewport height and get rid of the media queries, like this:

.myClass { height: 30vh; }

回答5:

Generally with responsive webpages you just let content resize itself and just make divs the same height as eachother when they are on the same row. I assume you are using bootstrap as they have the same breakpoints. However I don't know the exact problem you are trying to solve so:

This mobile first approach by not adding media query for the smallest breakpoint as it is the default anyway. This will deal with infinitely large screen by setting height to 800px.

.myClass { 
           height: 200px; /*default extra small*/
           @media (min-width: 768px)  /*small*/
                  {
                     height: 400px; 
                  }
           @media (min-width: 992px)  /*medium*/
                  {
                     height: 600px; 
                  }
           @media (min-width: 1200px) /*large*/
                  {
                     height: 800px; 
                  }

回答6:

You'll also need to define default class, for example screen size - greater than 1200px

 /*Extra small devices Phones (<768px)*/

@media only screen and (min-width:768px){
   .myClass { height: 200px; } 
}

/*Small devices Tablets (≥768px)*/  
@media only screen and (max-width:768px){
    .myClass { height: 400px; }
}
/*Medium devices Desktops (≥992px)*/    
@media only screen and (max-width:992px){
    .myClass { height: 600px; }
}
/*Large devices Desktops (≥1200px)*/
@media only screen and (max-width:1200px){
    .myClass { height: 800px; }
}

来源：https://stackoverflow.com/questions/22839792/bootstrap-3-custom-css-class-depending-of-devices

标签

css

responsive-design

twitter-bootstrap-3