首页 > 其他分享 >css随着浏览器窗口width度变化展示数据

css随着浏览器窗口width度变化展示数据

时间:2023-05-06 11:45:49浏览次数:34  
标签:浏览器 min media screen width max css

这是需求

这是通过css写法实现的

 @media screen and (min-width: 1900px){//>=1900的设备
      .boxWidth{
        width:25%;
      }
  }
  @media screen and (min-width: 1440px) and (max-width: 1899px){
    .boxWidth{
      width:33%;
    }
  }
  @media screen and (max-width: 1439px){//<=1439的设备
    .boxWidth{
      width:50%;
    }
  }

 

标签:浏览器,min,media,screen,width,max,css
From: https://www.cnblogs.com/huichaoboke/p/17376754.html

相关文章

  • uniapp使用scss定义全局css
    1.新建scss文件,定义各种全局css样式$orange:#ee5313!default;//主题色:橙色$darkOrange:#d43a11;//深橙色$color:#333;$gray:#999;//灰色$lightGray:#bbb;//浅灰$grayBg:#f3f3f3!important;//body灰色背景$white:#fff;//白色$blue:#1a......
  • web网页在手机端打开后左右可以滑动的css bug怎么解决
    web网页在手机端打开后左右可以滑动的cssbug怎么解决这个问题通常是由于在移动设备上使用了固定宽度的元素或容器而导致的。解决这个问题的一种方法是使用CSS媒体查询来检测移动设备,并将容器的宽度设置为100%。具体操作如下:@mediaonlyscreenand(max-width:768px){.cont......
  • CSS实现单行、多行文本溢出显示省略号
    代码单行文字溢出打点div{width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}多行文字溢出打点div{width:100px;overflow:hidden;text-overflow:ellipsis;......
  • 监听浏览器各个标签间的切换
    document.addEventListener('visibilitychange',function(e){console.log(document.visibilityState);letstate=document.visibilityStateif(state=='hidden'){console.log(document......
  • 谷歌浏览器chrome安装postman插件
    1获取postman插件压缩包链接:https://pan.baidu.com/s/1pCNJxrM4gCvODa9tIbteDg?pwd=waje提取码:waje  2安装2.1下载压缩包,并且解压,然后打开浏览器2.2点击浏览器右上角三个点,更多工具,扩展程序2.3打开开发者模式2.4点击加载扩展程序,选择解压后的文件po......
  • 指纹浏览器简介
      保护隐私的新型工具随着互联网的普及,网络安全和隐私保护成为了越来越重要的议题。在这个背景下,指纹浏览器应运而生,成为一种独特且实用的工具,以保护用户的在线隐私。那么,指纹浏览器究竟是什么?它如何保护我们的隐私?本文将为您揭示这一神秘的浏览器工具。一、什么是指纹浏览器......
  • css中filter的部分特别用法
    1. drop-shadow函数如果给png的图片设置阴影通过box-shadow就会变成这样但可以通过fliter来重新实现 会变成这样.header{//box-shadow:10px10px10px#000;filter:drop-shadow(10px10px10pxrgba(0,0,0,.5));}  2.hue-roate函数.header{filter:......
  • 页面引入css样式时,使用link和@import有什么区别
    css文件引入的方式有两种:1.HTML中使用link标签<linkrel="stylesheet"href="style.css/>2.css中使用@import@import"style.css"/*使用字符创*/@importurl("style.css")/*使用url地址*/link和@import区别link属于HTML标签,除了加载css外,还可以做很多其的他事,比......
  • DevTools failed to load source map: Could not load content for https://xxxxx/boo
    DevToolsfailedtoloadsourcemap:Couldnotloadcontentforhttps://xxxxx/bootstrap-theme.css.map:HTTPerror:statuscode404,net::ERR_HTTP_RESPONSE_CODE_FAILURE这个错误意味着浏览器无法加载指定的CSSsourcemap文件。CSSsourcemap文件通常用于调试前端......
  • 关闭 Chrome 浏览器 更新错误 弹窗
    1Chrome使用一段时间后,右上角总会弹出弹窗,并且影响鼠标聚焦,如下图: 2解决方式:右键点击桌面Chrome图表,然后点击属性,按照下图操作:在快捷方式——目标后输入:  --disable-background-networking  3最后重新启动,就OK了 ......