作者:小鬼shenzhen | 来源:互联网 | 2023-08-19 18:59
一、CSS 媒体类型
媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。
二、@media 规则
@media 规则允许在相同样式表为不同媒体设置不同的样式。
在视口最大为450px时,div为100*100px,背景色为红色
@media screen and (max-width:400px){
div{width:100px;
height:100px;
background:#f00;}
}
在视口最小为450px时,div为200*200px,背景色为绿色
@media screen and (min-width:400px){
div{width:200px;
height:200px;
background:#0f0;}
}
在视口最小为750px时,div为300*300px,背景色为蓝色
@media screen and (min-width:750px){
div{width:300px;
height:300px;
background:#00f;}
}