利用@media实现不同分辨率的兼容

@media可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。下面web建站小编给大家展示一下代码：

/* <768px */
@media screen and (max-width:768px) { 
  h1{
  	width: 100%;
  }
}
/* >=1024 and  */
@media screen and (min-width:1024px){
  h1{
      width: 49%;
  }
}
/* >=1024px and <1440px */
@media screen and (min-width:1024px) and (max-width:1440px){
  h1{
      width: 48%;
  }
}
/* >=1600px */
@media screen and (min-width: 1600px) {
  h1{
      width: 33%;
  }
}

进入前端入门建站教程官网入口

css兼容不同分辨率自适应@media的运用技巧

标签： media, 分辨率, 前端兼容

上面是“利用@media实现不同分辨率的兼容”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2300.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！