//大屏幕設備 @media (max-width:1200px) { .div1,.div2,.div3{width: 33%;} .div1,.div2,.div3{height: 600px; } //電腦屏幕設備 @media (max-width:992px) { .div1,.div2,.div3{width: 50%;} .div1,.div2,.div3{height: 400px; } //手機平板屏幕設備 @media (max-width:768px) { .div1,.div2,.div3{width: 50%;} .div1,.div2,.div3{height: 200px; } //小型舊版iphone4屏幕設備 @media (max-width:374px) { .div1,.div2,.div3{width: 100%;} .div1,.div2,.div3{height: 100px; } 第二種: @media (min-width:374px) { .div1,.div2,.div3{width: 100%;} .div1,.div2,.div3{height: 100px; } @media (min-width:768px) { .div1,.div2,.div3{width: 50%;} .div1,.div2,.div3{height: 200px; } @media (min-width:992px) { .div1,.div2,.div3{width: 50%;} .div1,.div2,.div3{height: 400px; } @media (min-width:1200px) { .div1,.div2,.div3{width: 33%;} .div1,.div2,.div3{height: 600px; } |
|