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

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

,就是写死播放器长宽,导致不能随网页大小的变化自由变换尺寸。...前天,在往博客上折腾B站视频时,无意间灵机一动,想到了个好主意,就是使用vw单位,配合使用calc。...因为刚刚【假设父级div就是真个屏幕】这样假设了下,实际用起来肯定是多种情况的,比如我的博客电脑端是有侧边栏的,文章的div也是有边距的,而手机端只有边距没有侧边栏。其实只需要做个数学题就好。...这里我得电脑端测栏加边距的宽度大约是330px,手机端的边距太小就忽略不算了 对应的css就是这样 @media only screen and (min-width:768px){ embed{height...本来,文章写道这里就应该结束了,但是突然想到了香菇社长那个超宽的屏幕,仅仅是上述代码肯定会导致一个问题,视频高度可能会超出屏幕的高度。 怎么办呢?想了一下,觉得这样比较简单!

1.1K30

相对于视口的CSS自适应单位vw和vh

作者:Tom_Lo 视口单位(Viewport units) 什么是视口?...视口单位中的“视口”,PC端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。  ...根据CSS3规范,视口单位主要包括以下4个:       1.vw:1vw等于视口宽度的1%。       2.vh:1vh等于视口高度的1%。      ...vh and vw:相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。...vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。 vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

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

    试试动态视口单位之 dvh、svh、lvh

    大部分同学都知道,在 CSS 世界中,有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。...别看看上去很多,其实很好记忆,vw/vw/vmax/vmin 的前缀是 v,而: 大视口单位的前缀是 lv,意为 large viewport 小视口单位的前缀是 sv,意为 small viewport...这与 vi 水平书写方向相反,这将对应于视口高度,而在垂直文档中,这将表示视口的宽度。 因此,vi 和 vb 属于两个逻辑单位。...总结一下 简单再总结一下,本文通过 vh 在移动存在的问题入手,引出了规范新增的三大类新的和视口相关的单位。...分别是: 大视口(Large Viewport) 小视口(Small Viewport) 动态视口(dynamic viewport) 它们的出现,极大的弥补了之前 vh/vw 等视口单位存在的问题。

    2K20

    解决CSS垂直居中的几种方法(基于绝对定位,基于视口单位,Flexbox方法)

    这段代码在本质上做了这样几件事情:先把这个元素的左上角放置在视口(或最近的、具有定位属性的祖先元素)的正中心,然后再利用负外边距把它向左、向上移动(移动距离相当于它自身宽高的一半),从而把元素的正中心放置在视口的正中心...三、基于视口单位的解决方法     假设我们不想使用绝对定位,仍然可以采用translate()技巧来把这个元素以其自身宽高的一半为距离进行移动;但是在缺少left和top的情况下,如何把这个元素的左上角放置的容器的正中心呢...不过幸运的是,如果只是想把元素相对于视口进行居中,仍然是有希望的。CSS值与单位(第三版)定义了一套新的单位,称为视口相关的长度单位。       1) vw 是与视口宽度相关的。...与常人的直觉不符的是,1vw 实际上表示视口宽度的 1%,而不是 100%。        2)  与 vw 类似,1vh 表示视口高度的 1%。        ...3)  当视口宽度小于高度时,1vmin 等于 1vw,否则等于 1vh。        4)  当视口宽度大于高度时,1vmax 等于 1vw,否则等于 1vh。

    1.8K70

    PCBA静电测量的主要参数有哪些? 其单位是什么?

    1.电荷量PCBA 静电的实质是存在剩余电荷。电荷是所有的有关静电现象本质方面的物理量。电位、电场、电流等有关的量都是由于电荷的存在或电荷的移动而产生的物理量。...表示静电电荷量的多少用电量Q表示,其单位是库仑C,由于库仑的单位太大通常用微库或纳库 1库仑=1000000微库 1微库=1000纳库(nC) 16327021564548414.jpg...现有一种准确迅速测量物体电荷量的专用仪器-EST111数字电荷仪/EST112数字电量表。使用极为方便,受到广大科研单位和厂硫企业如全国各防静电服生产的好评。...其使用单位有:西北纺织工学院、劳动部劳保科学研究所、北京科技大学、中国矿业大学等。...2.静电电压PCBA 由于在很多场合测量静电电位较容易,另一个常用的静电参数是静电电位,其单位为伏,但由于静电电压通常很高,因此常用一个较大的单位-千伏(kV) 1kV=1000V

    1.1K31

    CSS3 的视口单位vw、vh实现自适应(带有px,em,rem的简单介绍)

    一、px,em,rem,vw的简单介绍 ? 1、px px其实就是像素的意思,全称pixel,也就是图像的基本采样单位。对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机。...3、rem rem和em一样也是相对长度单位,但是不一样的是rem始终都是相对html根元素。...兼容性也是不错的,IE8以上版本和其他浏览器都已经支持,是个做响应式页面的好选择 4、重点:vw和vh vw和vh是视口(viewport units)单位,何谓视口,就是根据你浏览器窗口的大小的单位...vw是可视窗口的宽度单位,和百分比有点一样,1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px,那么1vw = 18px。...总结: 个人认为视口单位是个用来做响应式布局很不错的单位,当然如果要使用vw,vh,我的建议是rem结合vw来开发,因为视口单位有个缺点就是它没有最小或者最大限制,这就达不到我们都时候所希望的一个限制

    2.1K10

    css中的单位

    前端开发中, 做适配是少不了的, 即页面在各种尺寸的机型中显示效果一样, 这就用到了css中的各种长度单位, 做一下总结 在css中, 长度单位分为以下几种 绝对单位: px、in、cm、mm、pt、pc...百分比单位: vw、vh、vmin、vmax、% 相对单位: em、rem、ex、ch 各单位的介绍 px 不用过多介绍, 精确像素 in 寸 cm 厘米 mm 毫米 pt 大约1/72寸 pc 大约...1/6寸 vw 以窗口宽度为参照, 1vw为窗口宽度的1% vh 窗口高度为参照, 1vh为窗口高度的1% vmin 窗口的宽度和高度中较小的一个为参照,百分比 vmax 窗口的宽度和高度中较大的一个为参照..., 百分比 % 以父节点为基准的百分比 em 以父节点字体大小为基准值, 父节点字体大小为20px, 则1.5em为30px rem 以根节点字体大小为基准值, 及HTML标签的字体大小 ex 当前字体...x的高度为基准, 无法确定时为0.5em ch 以当前字体0字符为基准值, 无法确定时为0.5em

    1.5K20

    微软4000亿收购动视暴雪,背后逻辑是什么?

    近日,IT巨头微软宣布花费678亿美元(约4000多亿元人民币)收购以开发游戏开娱乐互动为主的动视暴雪公司,收购金额之巨,为游戏界之最,让全球为之震惊。...同时萨提亚·纳德拉在给员工的一份报告中说:“自公司成立之初,游戏就一直是微软的关键。今天,它是最大、增长最快的娱乐形式,随着数字世界和物理世界的融合,它将在元宇宙平台的发展中发挥关键作用。”...其中,算力扮演着生产力的角色,游戏引擎提供各种各样的解决方案,内容创意好比是施工图纸。 在虚拟和现实深度融合的过程中,游戏引擎所带来的真实感与沉浸感是数字场景构建中不可或缺的部分。...如今我们看到,VR/AR设备沉浸式的体验开始从游戏走向教育与培训。 更常见的场景是,曾经游戏中的3D技术,早已成为在商业大片中影视3D建模的基础工具。...本书是一部游戏领域的传记,不同的读者能从中得到不同的体验:游戏制作的背景内幕、光环之中的趣闻轶事、年少创业的梦想豪情、奋斗途中的汗水艰辛,亦或是那成名之后的势易情迁、独辟蹊径的商业模式、天下为公的黑客精神

    46930

    Android的尺寸单位

    前言 当前Android 的设备多种多样,它们有着不同的屏幕尺寸和像素密度。各应用为了保证可以在各机型上展示较好的交互界面,就需要在实现阶段根据对应的尺寸单位进行兼容性开发。...像素密度:屏幕上像素的物理密度,即屏幕单位面积内的像素数,称为 dpi(dots per inch,每英寸的点数)。它与分辨率不同,后者是屏幕上的总像素数。...横向和纵向的这个值都是相同的,原因是大部分手机屏幕使用正方形的像素点。 下图为屏幕尺寸相同但像素密度不同的两个设备上图像的直观展示效果。 ? 下面将具体介绍各个尺寸度量单位。...3. dp 介绍 这个是最常用的尺寸单位,它与“像素密度”密切相关。...如果你拿这两部手机放在一起对比,会发现这个图片的物理尺寸“差不多”,实现了“密度独立性”,使用dp作为单位的效果可见下图。 ?

    1.6K10

    EasyCVR接入宇视设备后通道显示的是目录,是什么原因?

    平台可将接入的流媒体进行处理及分发,分发的视频格式包括RTSP、RTMP、FLV、HLS、WebRTC等,可实现全终端、全平台覆盖,满足多场景下的视频能力需求。...近期我们正在对EasyCVR拓展新功能,让平台的功能越来越来完善,目前最新版EasyCVR可支持层级目录,也支持级联组织目录的上传。...有用户反馈,将宇视的设备通过国标GB28181协议接入EasyCVR视频融合平台,通道显示的是目录,并不是设备,于是请求我们协助排查。根据用户的反馈,我们立即对此展开排查与分析。...智慧农业等领域的应用。...感兴趣的用户可以前往演示平台进行体验或部署测试。

    30320

    CSS 中的各种单位

    之前遇到 css 中需要使用单位的情况,都草草用 px 或者百分比糊弄过去,导致当需要做一个响应式的页面的时候,要重新补一下 css 单位的技术债。...px px 是 css 中最常用的字体大小单位。...px 就是表示 pixel,像素,是屏幕上显示数据的最基本的点;还有一个看起来很像的单位 pt,pt 就是 point,是印刷行业常用单位,等于1/72英寸,一般在打印的时候使用。...像素 px 是相对于显示器屏幕分辨率而言的,所以一般把它看做一个基础单位,很多其它单位都是以 px 为参照的。...百分比 css 中的百分比是一种相对值,使用百分比的关键是找到它的参照物。 属性 参照 width & height 宽和高在使用百分比值时,其参照一般都是父元素的 content 的宽和高。

    79120

    【数字信号处理】基本序列 ( 基本序列列举 | 单位脉冲序列 | 单位脉冲函数 | 离散单位脉冲函数 | 单位脉冲函数 与 离散单位脉冲函数的区别 )

    文章目录 一、基本序列列举 二、单位脉冲序列 1、单位脉冲函数 2、离散单位脉冲函数 3、单位脉冲函数 与 离散单位脉冲函数的区别 一、基本序列列举 ---- 基本序列 有 单位脉冲序列 单位阶跃序列...\ \ n = 1 \end{cases} 1、单位脉冲函数 单位脉冲函数 ( 单位冲击函数 ) 对应的 函数图像 如下 : 横轴是 n , 纵轴是 \delta (n) ; n = 0 时...其取值不再是固定的 0 , 1 ; 离散单位脉冲函数 ( 离散单位冲击函数 ) 对应的 函数图像 如下 : 横轴是 t , 纵轴是 \delta (t) ; t = 0 时 , \delta...(t) 为无穷 t = 1 时 , \delta (t) = 0 3、单位脉冲函数 与 离散单位脉冲函数的区别 单位脉冲函数 与 离散单位脉冲函数 的区别 : ① 横轴坐标为 0 的情况 :...1, 2, 3, \cdots 等整数位置上的值为 0 ; 在 离散单位脉冲函数 \delta (t) 中 , t 为除 0 以外的任何值 , 对应的函数值 \delta (t)

    4.2K20

    CSS 中的相对单位

    # 视口的相对单位 相对于浏览器视口定义长度的视口的相对单位。 视口——浏览器窗口里网页可见部分的边框区域。它不包括浏览器的地址栏、工具栏、状态栏。...视口的相对单位 vh: 视口高度的 1/100 vw:视口宽度的 1/100 vmin:视口宽、高中较小的一方的 1/100(IE9 中叫 vm,而不是 vmin) vmax:视口宽、高中较大的一方的...不用媒体查询就实现了大部分的响应式策略。省掉三四个硬编码的断点,网页上的内容也能根据视口流畅地缩放。...# 无单位数值和行高 支持无单位值的属性: line-height z-index font-weight 任何长度单位(如 px、em、rem)都可以用无单位的值 0,因为这些情况下单位不影响计算值,...一个无单位的 0 只能用于长度值和百分比,比如内边距、边框和宽度等,而不能用于角度值,比如度,或者时间相关的值,比如秒。 line-height 属性比较特殊,它的值既可以有单位也可以无单位。

    91420

    移动适配的长度单位

    rem单位 效果:屏幕宽度不同,网页元素尺寸不同(等比缩放) 与px单位或百分比布局对比: px单位是绝对单位 百分比布局特点宽度自适应,高度固定 rem单位是相对单位 rem单位是相对于HTML标签的字号计算结果...像素尺寸转换rem: 1.根据视口宽度,设置不同的HTML标签字号 2.确定设计稿对应的设备的HTML标签字号 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号(1/10视口宽度)...3.得出rem单位的尺寸,并书写代码 rem单位的尺寸=px单位数值/基准根字号 *例:计算68px是多个rem?...运算:完成px单位到rem单位的转换 加减乘直接书写计算表达式。...单位的尺寸=px单位数值/(1/100视口宽度) 注:在开发中,vw和 vh不会混用,因为 vh是1/100视口高度,全面屏视口高度尺寸大,如果混用可能会导致盒子变形。

    1.3K20

    关于力矩单位的理解

    大家好,又见面了,我是你们的朋友全栈君。 电机转矩,简单的说,就是指转动的力量的大小。...但电动机的转矩与旋转磁场的强弱和转子笼条中的电流成正比,和电源电压的平方成正比所以转矩是由电流和电压的因素所决定的。...转矩是一种力矩,力矩在物理中的定义是: 力矩= 力 ×力臂 电机的“扭矩”,单位是 N·m(牛米)。 电磁转矩的计算公式没有涉及力臂的概念,单位为什么也是N.m? 电磁转矩是机电能量转换的桥梁。...——————————————————————————————————— 个人总结1:电磁转矩可能只是描述电机的出力,还没有牵扯到扭矩的概念,但是单位还N.m,不理解。...,转矩的测量对传动轴载荷的确定与控制、传动系统工作零件的强度设计以及原动机容量的选择等都具有重要的意义。

    77110

    使用 Apache PIG 统计积累型数据的差值

    现在要求使用PIG来统计某个时间段(1 hour)内,多个进程此项数据的变化量汇总。可以看到数据形如以下形式。进程会通过GrpID分组,每个组内有多个进程,需要计算的是各组VALUE值的总的变化量。...粗看起来这个问题似乎很简单,因为数据量并不是很大,可以首先LOAD整个数据集,然后按照PID分组,在分组内对TIMESTAMP时间排序,计算最后一个与第一个VALUE的差值,然后再对GrpID分组将刚才计算出来的差值求和即可...仔细想想这是不行的,因为在每个PID分组内,本次时间片内的数据有可能因为进程重启而清零(如下图),所以不能简单的按照时间排序后尾首相减来计算。...(V_t – V_(t-1)) : 0) 从最后一个VALUE开始,计算Vt – V(t-1) 的值并求和,当遇到差值为负的情况,也就是出现了进程重启清零的情况,就加零。...不过好在PIG脚本可以调用其他语言编写的UDF(User Define Function)来完成某些复杂的计算逻辑,我们就采用此种方案。

    92220
    领券