CSS

.example {
    padding: 20px;
    color: white;
}
/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 600px) {
    .example {background: red;}
}

/* 小设备 (平板电脑和大型手机,600 像素及以上) */
@media only screen and (min-width: 600px) {
    .example {background: green;}
}

/* 中型设备(平板电脑,768 像素及以上)*/
@media only screen and (min-width: 768px) {
    .example {background: blue;}
} 

/* 大型设备(笔记本电脑/台式机,992 像素及以上)*/
@media only screen and (min-width: 992px) {
    .example {background: orange;}
} 

/* 超大型设备(大型笔记本电脑和台式机,1200 像素及以上)*/
@media only screen and (min-width: 1200px) {
    .example {background: pink;}
}

HTML

<p class="example"> 请手动改变窗口的宽度尺寸来查看变化效果。</p>

实例

https://static.hexingxing.cn/v2/example/css@media.query.width.adaptive.html

分类: 前端开发

0 条评论

发表评论

Avatar placeholder

您的电子邮箱地址不会被公开。