首页
学习
活动
专区
工具
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

    正常而言: 1vw 等于1/100的视口宽度 (Viewport Width) 1vh 等于1/100的视口高度 (Viewport Height) vmin — vmin 的值是当前 vw 和 vh...中较小的值 vmax — vw 和 vh 中较大的值 vh 在移动端存在重大问题!...这与 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

    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,vh,我的建议是rem结合vw来开发,因为视口单位有个缺点就是它没有最小或者最大限制,这就达不到我们都时候所希望的一个限制...所以我们可以在根元素上设置vw和vh,然后在根元素上限制最大最小值,然后配合body设置最大最小宽度。

    2.1K10

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

    视觉视口和缩放比例的关系为: 当前缩放值 = 理想视口宽度 / 视觉视口宽度 所以,当用户放大时,视觉视口将会变小,CSS 像素将跨越更多的物理像素。...显示在理想视口中的网站具有最理想的宽度,用户无需进行缩放。 理想视口的值其实就是屏幕分辨率的值,它对应的像素叫做设备逻辑像素(device independent pixel, dip)。...=1.0,maximum-scale=1"> 下面是每个属性的详细说明: 属性名 取值 描述 width 正整数或device-width 定义视口的宽度,单位为像素 height 正整数或device-height...定义视口的高度,单位为像素,一般不用 initial-scale [0.0-10.0] 定义初始缩放值 minimum-scale [0.0-10.0] 定义放大最大比例,它必须小于或等于maximum-scale...当设置屏幕分辨率为 1920px1200px 的时候,理想视口的宽度值是 1920px, 那么 dip 的宽度值就是 1920px。

    2.3K20

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

    在Set Studio,我们进行了一个小型的非正式实验,以回答“视口尺寸有多碎片化?”这个问题。我们收集了超过120,000个数据点,涉及超过2,300个不同的视口尺寸。...我们所在的家乡切尔滕纳姆(Cheltenham)的人口大约是116,000人,所以我们的数据点几乎可以填满整个城镇! 最常见的视口尺寸是什么?...我们决定将任何宽度大于800px的视口视为“桌面端”,或者我们更喜欢称之为大视口。 你可能会觉得“800px对于桌面端来说太小了”,如果我们是在测量屏幕尺寸,你是对的。但我们这里测量的是视口尺寸。...来看看所有的视口尺寸 受到2015年Open Signal关于Android屏幕碎片化报告的启发,我们用砖石布局展示了前150个最常见的视口尺寸。你也可以看到所有2,300个不同的视口尺寸。...有趣的比较 来自流行框架的断点(Breakpoints) Figma中的断点 这一切的要点是什么? 我们想强调的主要观点是,你根本无法知道用户会以何种方式访问你的网站或网络应用。

    21730

    【Web前端】CSS 的值与单位

    在 CSS 中,每个属性都可以接受一个或多个值。CSS 提供了多种值和单位,以便我们能够精确地控制页面的布局和样式。 一、什么是 CSS 的值? CSS 的值是用来定义样式属性的具体数据。...不同的样式属性接受不同类型的值,这些值可以是数字、长度、百分比、颜色、图片、位置、字符串、标识符或者函数。理解这些值的使用方式以及它们如何影响页面的呈现,将帮助你创建更具表现力和功能性的网页设计。...2、长度 长度值用于定义元素的尺寸和位置,通常以像素(​​px​​)、点(​​pt​​)、厘米(​​cm​​​)等单位表示。长度单位分为绝对单位和相对单位。...1)绝对长度单位 绝对长度单位用于定义固定的尺寸,不依赖于其他因素。常见的绝对单位包括: 像素 (​​px​​):最常用的单位,适用于大多数场景。...div { width: 300px; /* 300 像素宽 */ height: 200pt; /* 200 点高 */ } 2)相对长度单位 相对长度单位根据父元素的尺寸或视口的大小进行调整

    5600

    dotnet OpenXML 测量单位的角度和弧度值

    度的角度值。...而弧度特别指的是 0-2 π 范围的弧度的值 英文里面的 Radians 表示的是中文的弧度,也就是 0-2 π 范围的弧度的值 英文里面的 Degree 表示的中文特指 0-360° 的角度值 在 OpenXML...SDK 里面,采用的基础单位是 60000 倍的 Degree 角度值,也就是在获取到 OpenXML 的 Int32Value 时,获取数值,除以 60000 就拿到了角度值 将角度 Degree...因此在获取到 OpenXML SDK 的角度值的时候,需要进行两步转换才能在 .NET 的 Math 进行转换,第一步是除以 60000 就拿到了角度值,第二步是将角度转换为弧度值 更多请看 Office...Open XML 的测量单位 关于 OpenXML 的单位,我写了一个库用来做转换,请看 dotnetCampus.OpenXMLUnitConverter 本文会经常更新,请阅读原文:

    53620

    第119天:移动端:CSS像素、屏幕像素和视口的关系

    当你设置屏幕分辨率为 1920 * 1200 的时候,ideal viewport(理想视口)的宽度值是1920像素, 那么 dip 的宽度值就是1920。设备像素比是1.5(2880/1920)。...二、CSS像素 CSS像素(px)用于页面布局的单位。样式的像素尺寸(例如 width: 100px)是以CSS像素为单位指定的。...: 属性名 取值 描述 width 正整数 或 device-width 定义视口的宽度,单位为像素 height 正整数 或 device-height 定义视口的高度,单位为像素,一般不用 initial-scale...viewport(布局视口)的宽度,layout viewport(布局视口)宽度默认值是设备厂家指定的。...布局宽度:布局视口的逻辑像素的数量 屏幕宽度:屏幕的逻辑像素的数量(视觉视口、可见视口、虚拟视口) 逻辑宽度:逻辑像素的数量 视觉宽度:横向长度 chrome 实验结论:桌面浏览器设置viewport

    1.7K50

    【笔记】《游戏编程算法与技巧》1-6

    将场景变换到相机坐标系所用的变换矩阵称为观察矩阵 投影坐标系: 有时称视口坐标系. 将自定义的视体变为标准视体的过程, 变换后的原本自定义视体中的内容会变换到标准视体中....基于OpenGL的书中常见的标准视体的是比较符合数学规则的三个轴都在(-1, 1)的立方体, 而基于DirectX的标准视口则为了表达方便将z映射到(0, 1)上, 这会使得投影变换矩阵产生差别, 具体查看对应文档即可...DirectX版本, 因此投影后视体的z处于(0, 1) 透视投影: 同样是将整个场景缩放, 但是透视投影的原始视体是锥形的, 所以推导上相对复杂一些....而z分量本身则需要保持近似线性插值, 联立方程将近平面和远平面的深度投影到0-1从而求解出第三行的两个矩阵系数. 最后将这个视体进行一次正交投影映射到(1, -1)即可....下图是通用的DirectX版本投影矩阵, 实际DirectX使用的时候并没有第三列上面的两个系数 透视投影变换只能保证深度投影后前后顺序不变, 但是并不能保持线性关系, 整体的深度值会向后挤压, 也就是大多数深度投影后分布在较后的比例

    4.2K31

    浅谈 GPU图形固定渲染管线

    2.1  坐标系统 根据顶点坐标变换的顺序,主要有如下几个坐标空间:局部坐标系(或称自身坐标系、建模坐标系)、世界坐标系、观察坐标系、视口坐标系(屏幕坐标系)。...视口坐标系(屏幕坐标系) 从视点坐标系到视口坐标系的转换是通过视口变换操作来进行的。视口变换的任务是将顶点坐标从投影平面转换到屏幕的一个矩形区域中,该区域称为视口。...在游戏中,视口通常是整个矩形屏幕区域,当然也可以将视口描述为屏幕的一个子区域,视口的坐标是相对于窗口来描述的 经过一系列坐标的转换,我们输入计算机的一系列三维坐标点已经转换为2D屏幕的三维显示数据。...然后对超出视口外的三角形进行裁剪(视口裁剪),如果有一个三角形其中一个顶点位于画面外,另外两个顶点位于画面内,我们看到的将是一个四边形,而这个四边形又被划分为两个小的三角形。...这里提到了视口裁剪,实际上裁剪是个很大的概念,裁剪包括了视域裁剪(应用程序阶段)、视口裁剪、背面剔除、遮挡剔除(光栅化阶段)。背面剔除涉及到三角形的顶点绕序问题。

    2.5K80

    响应式网页设计:使用媒体查询、视口单元和流体布局的技术

    随着智能手机、平板电脑和台式显示器等设备的不断增加,创建能够为用户提供最佳观看体验(无论其使用何种设备)的网站至关重要。本文将探讨实现响应式网页设计的基本技术,重点关注媒体查询、视口单元和流畅布局。...视口单位 视口单位是相对单位,可以轻松创建可扩展的设计。它们包括 vw(视口宽度)和 vh(视口高度),它们是视口尺寸的百分比。这些单位对于设置适应视口大小的尺寸和间距特别有用。...} 在此示例中,容器跨越视口的整个宽度,确保它适应不同的屏幕尺寸。...使用 clamp() 实现响应式字体大小 使用clamp()函数可以创建流畅的排版,可以在不同的屏幕尺寸上平滑调整。 clip() 函数采用三个值:最小值、首选值和最大值。...组合技术 结合媒体查询、视口单元和流体布局,您可以创建高度响应且灵活的网页设计。

    20210

    浅谈 GPU图形固定渲染管线

    2.1  坐标系统 根据顶点坐标变换的顺序,主要有如下几个坐标空间:局部坐标系(或称自身坐标系、建模坐标系)、世界坐标系、观察坐标系、视口坐标系(屏幕坐标系)。...视口坐标系(屏幕坐标系) 从视点坐标系到视口坐标系的转换是通过视口变换操作来进行的。视口变换的任务是将顶点坐标从投影*面转换到屏幕的一个矩形区域中,该区域称为视口。...在游戏中,视口通常是整个矩形屏幕区域,当然也可以将视口描述为屏幕的一个子区域,视口的坐标是相对于窗口来描述的 经过一系列坐标的转换,我们输入计算机的一系列三维坐标点已经转换为2D屏幕的三维显示数据。...然后对超出视口外的三角形进行裁剪(视口裁剪),如果有一个三角形其中一个顶点位于画面外,另外两个顶点位于画面内,我们看到的将是一个四边形,而这个四边形又被划分为两个小的三角形。...这里提到了视口裁剪,实际上裁剪是个很大的概念,裁剪包括了视域裁剪(应用程序阶段)、视口裁剪、背面剔除、遮挡剔除(光栅化阶段)。背面剔除涉及到三角形的顶点绕序问题。

    2.3K20

    OPengl、DirectX、OPenCV、OpenCL

    内置变量:gl_Color顶点着色器或片段着色器的主颜色 3.坐标系:   世界坐标(WC 屏幕原点)、物体坐标(MC 模型移动时坐标系不变,只是移动模型)、设备坐标(视区或视口DC)、眼坐标(z...轴方向VC)   OpenGL坐标变换栈(ModeView)、正交变换、透视变换(近大远小)   仿射变换:齐次坐标系,第四分量0表示向量,第四分量1表示点 相关函数:   glViewPort视口设置...(变换模式设置)   glloadindentity(移动模型坐标到视口原点)   glPushMatrix(获取当前栈顶矩阵压栈到新栈中)   glLoadMatrix(矩阵栈顶重赋值)   ...) OpenGL四种矩阵堆栈: GL_MODELVIEW(模型变换):gluLookat视口变换 GL_PROJECTION(投影变换):glFrustum 3D透视投影、-gluPerspective...  HLSL:DirectX着色器语言,文件扩展名*.fs   CG:支持Opengl和DirectX的着色器C语言编程 ###3.OpenCV   计算机视觉处理库 ###4.OpenCL

    2.2K50

    响应式布局,你需要知道这些

    设备像素与CSS像素的区别是什么? EM,REM 的计算规则是什么?实际应用中如何选择? 什么是视口 viewport,布局视口,视觉视口,理想视口的区别? 百分比单位和视口单位的计算规则是什么?...> 进行设置,viewport 元标签的取值有 6 种, width,正整数 | device-width,视口宽度,单位是 CSS 像素,如果等于 device-width,则为理想视口的宽度 height...,正整数 | device-width,视口宽度,单位是 CSS 像素,如果等于 device-height,则为理想视口的高度 initial-scale,0-10,初始缩放比例,允许小数点 minimum-scale...,让我们回到响应式布局,与视口相关的几个单位有:vw,vh,百分比。...,它和 vw,vh 的区别是什么?

    1.8K20

    交换机光口和电口的区别是什么?快来看这份详细解读!

    交换机光口和电口的区别是什么?快来看这份详细解读! 前言 作者:神的孩子都在歌唱 大家好,我是神唱, 在企业级网络环境中,交换机是非常重要的基础设备,它用于连接不同的网络设备并转发数据包。...大多数交换机都提供了两种类型的端口:光口 和 电口。 图片来源于网络 一....主要特点: • 介质:使用 光纤(单模光纤或多模光纤)进行数据传输,支持更远的传输距离。 • 传输距离:相比电口,光口支持的传输距离更长。...如何选择光口和电口? • 选择电口:如果你的网络设备都在同一个区域内,并且不需要过长的连接距离,那么电口就是一个非常合适的选择。它的布线成本低,安装简单,适用于普通办公室、家庭网络等环境。...• 选择光口:如果你的网络需求涉及长距离、高带宽的传输,或者你需要连接多个楼层、建筑物或数据中心,那么光口是更好的选择。光纤支持更远的传输距离和更高的速度,适合大规模网络或高需求的企业环境。

    3200

    CSS&HTML面经专题——(四)移动端响应式布局

    在viewport中有两种视口,分别表示为: visual viewport(视觉视口):浏览器内看到的网站的显示区域,用户可以通过缩放来查看网页,从而改变视觉视口。...视觉视口不会影响布局视口的宽度和高度。 固定大小——跟屏幕大小相同,在上面。 layout viewport(布局视口):布局视口定义了pc网页在移动端的默认布局行为。...rem : 是一个相对单位,1rem等于根元素的font-size值。...(2)概念 根据屏幕大小变化,页面的内容排版布局会自动调整变动,已呈现更好的用户体验。 5、rem,em,px的区别是什么? px 绝对单位,页面按精确像素展示。...em 相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

    2.4K20

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

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

    1.1K31
    领券