首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS 竟然能获取视口尺寸?

在这篇文章中,我们将探讨如何使用 CSS 获取视口尺寸,并展示一个简单的实现示例。 1 效果 调整浏览器窗口大小,你会发现视口的宽度和高度会实时更新(旧浏览器可能不支持)。...重要的是,这个效果是纯 CSS 实现的,不需要 JavaScript,真的震惊了! 2 实现原理 定义 CSS 自定义属性(@property) --vw 和 --vh,分别表示视口的宽度和高度。...使用 tan() 和 atan2() 函数计算视口的宽度和高度。 使用 counter 和 counter-reset 属性将计算结果显示在页面上。...2.1 计算视口尺寸 我们可以使用 vw 和 vh 获取浏览器视口尺寸,但是这是相对单位,所以需要转换为 px 才行。...2.2 三角函数 在三角函数中,tan(θ) 表示一个角度 θ 的正切值,它等于对边(opposite)与邻边(adjacent)的比值。

18410
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    浅谈移动端中的视口(viewport)

    布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height 获取。 ? 可以看到,默认的布局视口宽度为 980px。...视觉视口(visual viewport) 视觉视口是用户当前看到的区域,用户可以通过缩放操作视觉视口,同时不会影响布局视口。 ?...视觉视口和缩放比例的关系为: 当前缩放值 = 理想视口宽度 / 视觉视口宽度 所以,当用户放大时,视觉视口将会变小,CSS 像素将跨越更多的物理像素。...理想视口(ideal viewport) 布局视口的默认宽度并不是一个理想的宽度,于是 Apple 和其他浏览器厂商引入了理想视口的概念,它对设备而言是最理想的布局视口尺寸。...其与理想视口宽度的比值为1.5(2880/1920),这个比值叫做设备像素比: 逻辑像素宽度 * 设备像素比 = 物理像素宽度 设备像素比可以通过 window.devicePixelRatio 来获取

    2.3K20

    理想的viewport(视口)并不存在

    在Set Studio,我们进行了一个小型的非正式实验,以回答“视口尺寸有多碎片化?”这个问题。我们收集了超过120,000个数据点,涉及超过2,300个不同的视口尺寸。...如果我们从收集到的数据点中筛选出前20个独特的视口尺寸,主要都是较小的尺寸。你可能会推测这些都是移动设备——特别是前10个——但也值得考虑的是,视口尺寸也会因环境条件而有所不同。..."移动端" 与 "桌面端" 在这次实验中,我们仅捕获了每个数据点的宽度和高度,这些尺寸是通过 window.innerWidth 和 window.innerHeight 获取的。...我们决定将任何宽度大于800px的视口视为“桌面端”,或者我们更喜欢称之为大视口。 你可能会觉得“800px对于桌面端来说太小了”,如果我们是在测量屏幕尺寸,你是对的。但我们这里测量的是视口尺寸。...来看看所有的视口尺寸 受到2015年Open Signal关于Android屏幕碎片化报告的启发,我们用砖石布局展示了前150个最常见的视口尺寸。你也可以看到所有2,300个不同的视口尺寸。

    21730

    python笔记20-获取当前运行函数名

    前言 写完代码之后,一般为了方便查看日志,可以在日志输出中加入当前运行的函数名称或类和方法名称,以便于代码报错的时候能快速找到报错的是哪个函数或方法。 那么如何获取当前运行函数(或方法)的名称呢?...获取函数名称 1.在函数外部获取函数名称,用.name获取 ? 2.函数内部获取当前函数名称,用sys._getframe().f_code.co_name方法获取 ?...类和方法名称获取 1.获取类名称self.class.name ? 2.获取类里面方法名称,跟获取函数名称一样sys._getframe().f_code.co_name) ?...inspect模块 1.使用inspect模块动态获取当前运行的函数名(或方法名称) # coding:utf-8 import inspect def get__function_name():...:yoyo 获取当前类名称.方法名:Yoyo.yoyoketang

    2.5K10

    css视口单位vw,vh的妙用(embed篇)

    spm_id_from=888.80997.embed_other.whitelist 视频demo 如上视频[av9214469],使用的是embed标签,大家都知道embed的播放器很难自适应,不是过分拉伸改变视频比例...,就是写死播放器长宽,导致不能随网页大小的变化自由变换尺寸。...因为刚刚【假设父级div就是真个屏幕】这样假设了下,实际用起来肯定是多种情况的,比如我的博客电脑端是有侧边栏的,文章的div也是有边距的,而手机端只有边距没有侧边栏。其实只需要做个数学题就好。...这里我得电脑端测栏加边距的宽度大约是330px,手机端的边距太小就忽略不算了 对应的css就是这样 @media only screen and (min-width:768px){ embed{height...本来,文章写道这里就应该结束了,但是突然想到了香菇社长那个超宽的屏幕,仅仅是上述代码肯定会导致一个问题,视频高度可能会超出屏幕的高度。 怎么办呢?想了一下,觉得这样比较简单!

    1.1K30

    JS和JQuery获取当前元素的兄弟及父级等元素的方法

    jQuery获取: jQuery.parent(expr),找父亲节点,可以传入 expr 进行过滤,比如 $("span").parent() 或者 $("span").parent(".class"...jQuery.prevAll(),返回所有之前的兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQuery.nextAll(),返回所有之后的兄弟节点 jQuery.siblings...,而 jQuery.find(),的返回结果,不会有初始集合中的内容,比如 $("p").find("span") ,是从 元素开始找 ,等同于 $("p span") JS获取:...;   //获得s的最后一个子节点 JS获取节点父级,子级元素:JS的方法会比JQUERY麻烦很多,主要则是因为FF、谷歌浏览器会把你的换行也当作DOM元素:空的text元素,目前IE也是这样       原生的JS获取ID为test的元素下的子元素。

    12.7K10

    python获取当前系统的日期_python怎么获取当前系统时间

    python获取当前系统时间,包括年月日,时分秒,主要通过Python中的datetime模块来实现。 下面我们就通过具体的代码示例,给大家详细介绍Python获取当前时间日期的实现方法。...代码示例如下:import datetime now = datetime.datetime.now() print (“当前系统日期和时间是: “) print (now.strftime(“%Y-%...m-%d %H:%M:%S”)) 获取当前系统时间,结果如下所示: Python datetime: datetime模块提供了以简单和复杂的方式操作日期和时间的类。...now(tz=None)返回当前的本地日期和时间。如果可选参数tz没有指定,与today()一样。 strftime(format)返回一个表示日期的字符串,由显式格式字符串控制。...引用小时、分钟或秒的格式代码将看到0值。 本篇文章就是关于Python获取当前系统时间及日期的方法介绍,也很简单易懂,希望对需要的朋友有所帮助!

    6.3K90
    领券