CSS Media布局
时间: 2023-07-05 14:33:04 浏览: 61
CSS Media Queries是一种CSS3的新特性,它可以根据设备的不同特性来应用不同的CSS样式。通过使用CSS Media Queries,可以实现响应式布局和自适应设计。以下是一些常见的CSS Media Queries:
1. 根据屏幕宽度进行布局
```css
/* 当屏幕宽度小于等于768px时,应用以下样式 */
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
}
/* 当屏幕宽度大于768px时,应用以下样式 */
@media screen and (min-width: 769px) {
body {
font-size: 18px;
}
}
```
2. 根据设备方向进行布局
```css
/* 当设备为横屏时,应用以下样式 */
@media screen and (orientation: landscape) {
.container {
flex-direction: row;
}
}
/* 当设备为竖屏时,应用以下样式 */
@media screen and (orientation: portrait) {
.container {
flex-direction: column;
}
}
```
3. 根据设备像素密度进行布局
```css
/* 当设备像素密度大于等于2时,应用以下样式 */
@media screen and (min-resolution: 192dpi) {
.logo {
background-image: url('logo@2x.png');
}
}
/* 当设备像素密度小于2时,应用以下样式 */
@media screen and (max-resolution: 191dpi) {
.logo {
background-image: url('logo.png');
}
}
```
以上是一些常见的CSS Media Queries,你可以根据自己的需求和设备特性来选择合适的Media Queries。