如何使用CSS3来获取屏幕宽度并且用来计算DIV高度

2023-05-16

    稍微出示一下我之前的代码


    var global_width = ($(window).width());
    var info_height = global_width/750*230;
     之前需要用js实现的计算相对高度,现在要交给CSS来实现。

     通过查阅网上的资料,对CSS3又有了新的认识,css对于数值的计算是使用的calc()然而这个方法有的浏览器不支持,需要稍微做一下适配。(Kiang一下资料:https://www.w3cplus.com/css3/how-to-use-css3-calc-function.html)


 .elm {
	/*Firefox*/
	-moz-calc(expression);
	/*chrome safari*/
	-webkit-calc(expression);
	/*Standard */
	calc();
 }
    然后问题来了,如何获取屏幕宽度?

    再一次Kiang一下资料:https://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html


.slide {
    width: 100vw;
}
    使用vh和vw单位即可

    然后我的问题就得到了解决:

.info_img{
    height:calc(100vw / 750 * 230);
}
   



     好使!

     感谢百度,感谢上面的两位程序员!


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用CSS3来获取屏幕宽度并且用来计算DIV高度 的相关文章

  • 外贸盒子x96max+ 搭建Armbian系统 (附国内可用的img镜像下载地址)

    记录一下在x96max 43 外贸盒子上面搭建Armbian的历程 Armbian是什么操作过程 救砖历程 xff1a 国内外相关电视盒子论坛 Armbian是什么 Armbian是轻量级的Debian系统 xff0c 为ARM开发板专门发
  • 手机上输入http://192.168.1.102:8888/FiddlerRoot.cer为什么下载不了证书

    因为之前你的手机可能已经安装了该证书 xff0c 所以再次下载会说找不到证书 解决办法 如果你遇到上面的问题 就可能是证书的问题 我的本地证书是用系统生成证书的一个软件生成的个人证书 所以出现了问题 操作步骤如下 1 将之前的证书删除打开系
  • 区块链上编程:DApp 开发实战——来写个竞猜游戏吧!

    本文旨在引导对 DApp 开发感兴趣的开发者 xff0c 构建一个基于以太坊去中心化应用 xff0c 通过开发一款功能完备的竞猜游戏 xff0c 迈出 DApp 开发的第一步 xff0c 通过实例讲解 Solidity 语言的常用语法 xf
  • pip更改下载源设置

    任何一个信息都可以把人分为两类 xff0c 知道的和不知道的 有些我们已知的信息 xff0c 自己觉得很平常 xff0c 却可能对另一些不知道的人来说很有用处 比如今天要说的这个小技巧 xff0c 我自己原以为不值一提 xff0c 网上也很
  • 让div在屏幕中居中(水平居中+垂直居中)的几种方法

    水平居中方法 1 inline xff0c inline block元素的水平居中 xff0c 在父级块级元素中设置text align center 2 确定宽度的块级元素水平居中方法 margin xff1a 0 auto xff1b
  • 从ELK到EFK

    背景 作为中国最大的在线教育站点 xff0c 目前沪江日志服务的用户包含沪江网校 xff0c 交易 xff0c 金融 xff0c CCtalk xff08 直播平台 xff09 等多个部门的多个产品的日志搜索分析业务 xff0c 每日产生的
  • 证明:实对称矩阵中,属于不同特征值的特征向量相互正交

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 证明 xff1a 实对称矩阵中 xff0c 属于不同特征值的特征向量相互正交 设AP 61 1P xff0c AP 61 2P xff0c 其中A为实对称矩阵 xff0c
  • 宝塔面板一键docker部署

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 推荐 xff1a 宝塔面板一键docker部署 0 购买服务器 1 安装docker root 64 VM 0 2 centos curl fsSL https get d
  • 异步I/O Asynchronous I/O

    原帖地址 xff1a http www ibm com developerworks cn linux l async AIO 简介 Linux 异步 I O 是 Linux 内核中提供的一个相当新的增强 它是 2 6 版本内核的一个标准特
  • Trapping Rain Water II

    Given n x m non negative integers representing an elevation map 2d where the area of each cell is 1 x 1 compute how much
  • QT- label实现滚动字幕 (跑马灯)效果 -像素级

    QT label滚动字幕 原理代码完整源码 43 部件提升 想通过QSS实现更多效果的请搜索QT自带帮助文档 Qt Style Sheets Examples xff0c 使用样式表来定制程序界面 原理 让label字母滚动起来的原理很简单
  • matlab练习程序(TV模型图像修复)

    曾经想要实现过Bertalmio图像修复算法 xff0c 无奈自身实力不够 xff0c 耗费两天时间也没能实现 昨天博客上有人问到TV模型 xff0c 这个模型我过去是没听说过的 xff0c 于是就找来相关论文研究了一下 xff0c 发现T
  • M4——GPIO配置

    1 GPIO 简述 通用输入输出 General Purpose Input Output 的简称 xff0c 就是芯片引脚可以通过他们输出高电平或者低电平 xff0c 也可以通过他们读取引脚的电平状态 以STM32F407ZGT6芯片为例
  • linux 查看服务器序列号(S/N)

    root 64 node1 dmidecode t 查看支持的参数 dmidecode option requires an argument 39 t 39 Type number or keyword expected Valid ty
  • Apache 中文显示乱码的问题

    用Apache 2 2发布一个html网页 xff0c 访问时发现网页中的中文全部显示乱码 之前在IIS上发布显示很正常 xff0c 网页本身编码应该是没问题的 查看源代码确定html文档编码为GB2312 在 etc httpd conf
  • 对centos进行一些个性化设置(如alias等)

    为什么80 的码农都做不了架构师 xff1f gt gt gt 一 xff1a linux xff08 centos5 10 xff09 中alias的设置 amp 常用 查询 xff1a 查看当前系统的所有alias shell gt a
  • Linux编程之有限状态机FSM的理解与实现

    有限状态机 xff08 finite state machine xff09 简称FSM xff0c 表示有限个状态及在这些状态之间的转移和动作等行为的数学模型 xff0c 在计算机领域有着广泛的应用 FSM是一种逻辑单元内部的一种高效编程
  • 用Nohup命令让Linux下的程序真正在后台执行(转载)

    Unix Linux 下一般想让某个程序在后台运行 xff0c 很多都是使用 amp 在程序结尾来让程序自动运行 比如我们要运行 mysql 在后台 xff1a usr local mysql bin mysqld safe user 61
  • iOS开发-关于自定义控件很值得一看的文章( 四)

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 我么知道 Objective xff0d C 是采用 消息机制 xff08 messaging xff09 调用方法的 xff0c 例如我们调用 UIView 的 init
  • POSIX 消息队列相关问题

    一 查看和删除消息队列 要想看到创建的posix消息队列 xff0c 需要在root用户下执行以下操作 xff1a mkdir dev mqueue mount t mqueue none dev mqueue 删除队列使用 rm 命令即可

随机推荐