web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. AIGC工具
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站
    手机应用

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

904 ℃

@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的运用技巧

利用css3实现禁止文章内容复制

js获取客户端屏幕分辨率

前端html兼容性问题

前端css兼容性问题

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

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

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

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

当前位置: 网站首页 > 前端知识
本文共计377个字,预计阅读时长3分钟
生活小工具,收录了80多款小工具
上一篇: 阿里巴巴普惠体3.0字体已经更新(最强中文字体)
下一篇: 跨平台划词翻译、截图翻译工具——Pot划词翻译
x 打工人ai神器