Responsive設計——不一樣設備的分辨率設置

下面咱們一塊兒來看看CSS3 Meida Queries在標準設備上的運用，你們能夠把這些樣式加到你的樣式文件中，或者單首創建一個名爲「responsive.css」文件，並在相應的條件中寫上你的樣式，讓他適合你的設計需求：

1.1024px顯屏

@media screen and (max-width : 1024px) {                    
/* 樣式寫在這裏 */          
}     

2.800px顯屏

@media screen and (max-width : 800px) {              
/* 樣式寫在這裏 */          
}     

3.640px顯屏

@media screen and (max-width : 640px) {              
/* 樣式寫在這*/            
}     

4.iPad橫板顯屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {              
/* 樣式寫在這 */            
}     

5.iPad豎板顯屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {         
/* 樣式寫在這 */            
}     

6.iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {              
/* 樣式寫在這 */            
}     

如今有關於這方面的運用也是至關的成熟，twitter的Bootstrap第二版本中就加上了這方面的運用。你們能夠對比一下：

@media (max-width: 480px) { ... }              

@media (max-width: 768px) { ... }              

@media (min-width: 768px) and (max-width: 980px) { ... }      

 @media (min-width: 1200px) { .. }