移动设备上3格的宽度从33.33％更改为100％

Question

I know how to do this with javascript I'm just wondering if there is some fancy css that can do this. I want it so that when I go mobile each div takes the entire screen. Here's what it currently looks like.

Here's some css for each div.

.center{


background-color:#ffffff;
  width:33.33%;
  height: 100%;
  display: inline-block;

}

.left{
  background-color:#ffffff;
  width:33.33%;
  height: 100%;
  float:left;
    overflow: hidden;

}

.right{
  background-color:#ffffff;
  width:33.33%;
  height: 100%;
  float:right;
   overflow: hidden; 
}

Answer 1

Decide at what resolution you want the divs to take up all the width, and apply different styling based on media queries . This is how bootstrap does it.

Basic Example at a 600px wide breakpoint.

@media (max-width: 600px) {
  .mybox {
    width:100%;
  }
}

Answer 2

Definitely there are 'fancy' ways in css too which you can use for the same. First you can use the bootstrap library to make you html responsive. you can refer the following link: http://getbootstrap.com/

Also, you can use the css media queries which can do the same task. here is the link for the same: https://www.w3.org/TR/css3-mediaqueries/

choose the resolution which you want and apply the you css.

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Answer 3

@media screen and (max-width: 600px) {
    .center,
    .left,
    .right {
        width: 100%;
    }
}

If screen width is smaller than 600px then divs became 100% width.

You can change value of max-width adapting to yours need

Answer 4

For conditional formatting with css, you can use media queries. Unfortunatly there is no media query for mobile. You can however set a max. width. For example:

@media only screen and (max-device-width: 600px){ 
    ... 
}

This way, any device with a screen width smaller then 600px will get the css that is on the ... .