本文将告诉大家如何从 PPT 里面解析出通用元素的 x 和 y 的值，以及元素的宽度和高度的值 在开始之前请看 C# dotnet 使用 OpenXml 解析 PPT 文件 在拿到 slidePart.Slide.CommonSlideData.ShapeTree...里面的元素，几乎所有元素都存在坐标和宽度高度，这里的元素我称为通用元素，也就是不是特定的如形状、图片元素 此时的元素应该是继承 OpenXmlElement 类，在这个类里面可以通过 GetFirstChild...element 是 OpenXmlElement 类 拿到了 ShapeProperties 实际上就是 PPT 文件的 p:sppr 内容，在 PPT 里面将会用如下格式设置元素里面的值中 a:xfrm...也就是 a:ext 获取元素的宽度和高度，请看代码 var extents = transform2D.GetFirstChild();...UWP 中设置元素的坐标请看 win10 uwp 拖动控件 ----
简介 根据CSS规范，视口百分比单位相对于初始包含块的大小，它是web页面的根元素。 视口单位为：vw，vh，vmin和vmax。 vw单位表示根元素宽度的百分比。1vw等于视口宽度的1%。...视口宽度 vw单位表示根元素宽度的百分比，1vw等于视口宽度的1%。 ?...视口单位基于页面的根元素，而百分比则基于它们所在的容器。因此，它们彼此不同，但各自都有各自的用处。 视口单位的用例 字体大小 ? CSS 视口单位非常适合响应式排版。...为了防止这种情况，我们应该在某些断点上使用媒体查询并更改字体大小。...一个子元素，即使父元素的宽度受到限制，它也会占据视口100％的宽度。 考虑下面： ?
静态布局 直接使用px作为单位 2. 流式布局 宽度使用%百分比，高度使用px作为单位 3. 自适应布局 创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。...使用 @media媒体查询来切换多个布局 4. 响应式布局 通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用 5. 弹性布局 通常指的是rem或em布局。...important; } } 但使用rem来布局的方案并不太正统，它有一些hack的特点 比较规范的方式是使用vw单位，随之而来的就是后起之秀 VW布局 花了一些时间整理了REM...通过配置html根元素的font-size为vw单位，并且配置最大最小的像素px值，在其他css代码中可以直接使用rem作为单位 调用方式炒鸡简单 html { @include root-font-size...直接使用宽度值，因为使用的是vw，视窗未缩放 而在页面标签（html和body）中，简单地配上属性代表是否需要限制宽度即可。
em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN 我在面试时经常问会一道和em有关的题，来看一下面试者对css细节的了解程度，如下，问s1...假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x = 屏幕宽度 / 100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比。...可以实现神奇的x 通过上面对rem的介绍，可以发现，如果子元素设置rem单位的属性，通过更改html元素的字体大小，就可以让子元素实际大小发生变化 html {font-size: 16px} p {width...} 比Rem更好的方案 上面提到想让页面元素随着页面宽度变化，需要一个新的单位x，x等于屏幕宽度的百分之一，css3带来了rem的同时，也带来了vw和vh vw —— 视口宽度的 1/100；vh —...： 首先是字体的问题，字体大小并不能使用rem，字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；由于设置了根元素字体的大小，会影响所有没有设置字体大小的元素，因为字体大小是会继承的，难道要每个元素都显示设置字体大小
REM 是值/数据类型长度的值。长度的另外一个值是我们老朋友 - 像素 px。每个接受长度作为值的属性都接受 REM 值。比如：margin, padding, font-size 等。...VW 代表视窗的 1% 宽度。...比如： 10vw 我们定义了类名 10vw 的宽度是 10vw，该元素宽度将会是可视窗口宽度的 10%。...如果根元素的 font-size 值并未更改，则默认是 16px。...如下： html { font-size: 18px; // 默认值是 16px } h1 { font-size: 2rem; // 2 * 18px = 36px } 当然，我们也可以使用百分比更改根元素的
Min() 函数 min() 函数支持一个或多个表达式，每个表达式之间使用逗号分隔，然后以最小的表达式的值作为返回值，我们可以使用min()为元素设置最大值。...同样，我们可以使用man()为元素设置最小值。 考虑下面的例子，我们希望元素的最小宽度为500px。...意思是，如果VAL在MIN和MAX范围之间，则使用VAL作为函数返回值；如果VAL大于MAX，则使用MAX作为返回值；如果VAL小于MIN，则使用MIN作为返回值。...可能是%，em，rem，vw/vh。 甚至百分比值也可以基于视口宽度（如果元素直接位于中），也可以基于其父元素。...editors=1100 边界与阴影 在一些设计案例中，如果元素边框的宽度和弧度比较大时，在移动时应尽量减小。通过使用clamp()，我们可以根据视窗宽度使其动态。
在这种情况下，我们使用100vw，这意味着我们希望浏览器根据浏览器窗口的完整宽度选择图像尺寸。 第二个项800px没有媒体查询，而只是一个尺寸。这被视为我们的回退尺寸。...picture元素允许您定义多个source元素，用于在不同的屏幕尺寸下定义要使用的不同图像。然后，浏览器将选择与当前屏幕尺寸匹配的第一个source元素，并使用该图像。...如果没有任何source元素与当前屏幕尺寸匹配，则将使用picture元素中定义的img作为备用图像。...不过，在使用picture元素时，每个source元素通常只有一个分辨率，因此您可以将其作为srcset属性中的唯一URL。 另一个属性是media属性。...如果没有任何媒体查询匹配，则使用img标签作为备选项，这也是为什么我们没有针对较大屏幕尺寸专门设置source元素的原因。
使用弹性布局 使用百分比 避免写死宽度和高度 添加滚动条 使用 rem 3.移动终端的常用宽度和高度 垂直屏幕的常见宽高比：1:2, 2:3, 3:4, 3:5, 5:8, 9:16 横向屏幕的常见宽高比...如果为子元素的顶部和底部设置了百分比，它将相对于父元素的高度，并直接进行非静态定位（默认定位）。同样，如果为子元素的左侧和右侧设置了百分比，它将与父元素宽度的直接非静态定位（默认定位）相对应。...如果子元素的 padding 和 margin 设置为百分比，无论是垂直还是水平，它们都是相对于直接父元素的宽度而言的，与父元素的高度无关。...响应式的缺点：如果有太多的样式需要在浏览器尺寸发生变化时进行更改，那么多套样式代码将非常麻烦。...4.4 VW、VH 响应式布局 因为 100vw = 100 视图窗口宽度，100vh = 100 视图窗口高度，那么根据 750 的设计草案，100vw 就是 750。
它们的作用彼此之间有所关联。...在屏幕宽度不足 500px 时候，也就表现为 width: 100%，反之，则表现为 width: 500px： 同理，在类似的场景，我们也可以使用 max() 从多个值中，选取相对更大的值。...我们可以利用 vw 来实现给字体赋动态值，假设在移动端，设备宽度的 CSS 像素为 320px 时，页面的字体宽度最小为 12px，换算成 vw 即是 320 / 100 = 3.2，也就是 1vw 在...它的一个问题在于，如果仅仅使用 vw，随着屏幕的不断变大或者缩小，内容元素将会一直变大变小下去，这也导致了在大屏幕下，许多元素看着实在太大了！...因此，对于移动端页面而言，所有涉及长度的单位，我们都可以使用 vw 进行设置。而诸如字体、内外边距、宽度等不应该完全等比例缩放的，采用 clamp() 控制最大最小阈值。
作用：可以使用媒体查询, 根据不同的视口宽度, 设置不同的根字号。...设备宽度不同，HTML标签字号设置： 设备宽度大， 元素尺寸大 设备宽度小，元素尺寸小 目前在rem布局方案中，将网页分成10份，HTML标签的字号为视口宽度的1/10，可以便于计算。...3.得出rem单位的尺寸，并书写代码 rem单位的尺寸=px单位数值/基准根字号 *例：计算68px是多个rem？..../37.5rem 注意：开发中除法计算通常使用小括号。 嵌套：快速生成后代选择器。 注：&表示当前选择器，不生成后代选择器，通常配合伪类或伪元素使用。 变量：存储数据，方便使用和修改。.../abc/ 禁止导出：//out :false vw / vh 实现在不同宽度的设备中，网页元素尺寸等比缩放的效果。
计算得出的值小于600px，则浏览器将使用45％作为宽度。...相反，如果45％计算得出的值大于600px，则将使用600px作为元素的宽度。 max()函数也有类似的情况。 它也接受两个值，但是我们没有定义元素的最小尺寸，而是定义了它可以获取的最大尺寸。...相反，如果60％的值小于600px，则将使用600px作为元素的宽度 限定值 clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用...vw：相对于视口的宽度 vh：相对于视口的高度 rem:相对于根元素()(默认字体大小通常为16px) em:相对于父元素 %：相对于父元素 同样，大多数浏览器的默认字体大小为16px，这是...vh是视口高度或可见屏幕高度的首字母缩写。 100vh代表视口高度的100％（取决于设备）。 同样，vw代表视口宽度，这意味着设备的可视屏幕宽度，而100vw则代表视口宽度的100％。
为了在不同尺寸和密度比的设备上表现出一致的视觉效果，使用逻辑像素描述一个相同尺寸的物理单位。在具有高密度比的屏幕下，一个逻辑像素对应多个物理像素。...在 PC 端上， 元素的宽度被设置为 100% 时，等同于视口大小，等同于浏览器的窗口大小。...vw/vh 由于目前 vw、vh 相关单位获得了更多浏览器的支持，可以直接使用 vw、vh 单位进行移动端开发。...使用响应式图片 展示图片时，可以在 picture 元素中定义零或多个 source 元素和一个 img 元素，以便为不同的显示/设备场景提供图像的替代版本。...如果没有找到匹配的图像或浏览器不支持 picture 元素，则使用 img 元素作为回退方案。
2.1、em em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN 比如父元素font-size:12px; 自身元素如果写成：font-sise...； 如果根元素设置成font-size=1rem;则根元素换成px就是相对于初始字体大小，一般是12px； 2.3、vm/vh vw ：视口宽度的 1/100；vh ：视口高度的 1/100 —— MDN...字体并不合适使用rem, 字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；由于设置了根元素字体的大小，会影响所有没有设置字体大小的元素，因为字体大小是会继承的，难道要每个元素都显示设置字体大小...所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。...如果不考虑兼容性问题，可以大胆使用vw/vm做弹性的布局。
使用视区宽度单位vw，如下： .banner { height: 15.15vw; background-size: cover; } 如果对兼容性要求不是很高，使用vw也是一个不错的做法...使用百分比padding，如下： .banner { padding: 15.15% 0 0; background-size: cover; } 此时无论图片的外部元素怎么变动，比例都是恒定不变的...二、CSS百分比padding与宽度自适应图片布局 但是有时候我们的图片是不方便作为背景图呈现的，而是内联的，百分比padding也是可以轻松应对的，求套路是比较固定的，图片元素外面需要一个固定比例的容器元素...，因为有vw单位的存在，毕竟理解vw看上去要更简单一些，所以，一直就没做相关技巧的介绍。...对于这种图片宽度100%容器，高度按比例的场景，padding-bottom的百分比值大小就是图片元素的高宽比，就这么简单。
当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值，所有元素就会按比例放大或者缩小。...若使用vw布局，就不需要再像rem那样，在js中去动态设置根元素的font-size了，sass中只需要使用这个函数做转换即可 //以iphone7尺寸@2x 750像素宽的视觉稿为例 @function...百分比%是根据父元素宽度或者高度进行计算，而vw vh固定按照viewport来计算，不会受父元素宽高度影响。...100vw包括了页面滚动条宽度（页面滚动条属于viewport范围内，100vw当然包括了页面滚动条宽度）。但把body或者html设置为width:100%时，是不包括页面滚动条的宽度的。...那么就会引发一个问题：pc端使用vw单位时，如果页面内容超出一屏长度，出现了纵向滚动条，同时有元素width:100vw， 则会导致出现条横向滚动条，因为元素（100vw + 滚动条宽度）超出了viewport
因此，vw单位用做宽度自适应的布局，完全是吃力不讨好得显摆！ 我们需要想的是其他一些只能vw, vh才能完成的应用场景，这就是下面依次要展示的内容~~ 五、场景之：元素的尺寸限制 ?...其目前是不支持vw, vh单位的啊！？ 原因就在于，覆盖层为固定定位(fixed)元素（绝对定位(absolute)元素也如此）。...尼玛，当我做覆盖以及定位这两个demo的时候，心一下子凉下去了： vw, vh用在宽度自适应上没有价值——%可以实现之~~ 现在又：vw, vh用在absolute/fixed定位属性元素上没有价值——...于是，我下面所设想的应用场景就会脱离宽度，脱离绝对定位元素，会是什么呢？？...本demo 元素还可以设置float:left或inline-block两端/居中对齐等，让一屏的水平方向显示多个page页面，就如实际的office word一样。
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。...，但是宽度的rpx却是固定的，所以可以使用rpx作为单位，来设置布局的宽高，不是所有的单位都适合rpx，字体不适合rpx,会导致不同设备看不清。...根据设计稿按照1rem = 40px 对着各个元素进行单位转换 px：绝对单位，页面按精确像素展示 em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是...视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。 vw：viewpoint width，视口宽度，1vw等于视窗宽度的1%。...小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw 小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh [图片.png] vmin：vw和vh中较小的那个
Syntax { --variable:#ffffff; color: var(--variable); } CSS Functions calc() calc()用于对数值作计算，单位包括长宽（px、vw...calc()要求+和-的左右有空格。 例如，width:calc(100% - 30px)定义了比父元素宽度小30px的宽度。...attr() attr()用于取回被选择元素的属性，比如对一个标签，可以用attr(src)获取图片地址。如果css选择器选择了多个元素，attr()在每个元素上可能有不同结果。...这样不会更改user agent-defined环境变量的值。...()、blur()等 透明、模糊，详情参考CSS filter 一些实验特性 element() 比如background:element(#id)可以以#id选择的元素为背景，element()使元素作为图片使用
所以我们在实际开发中通常使用 CSS 像素，你眼中的 1px 可能对应多个设备像素，比如上面的 IPhone X， 1 css px = 3 * 3 device px // IPhone X 中，1...14px */ } 复制代码 所以，如果我们改变根元素的字体大小，页面上所有使用 rem 的元素都会被重绘。...vw，vh，百分比 浏览器对于 vw 和 vh 的支持相对较晚，在 Android 4.4 以下的浏览器中可能没办法使用，下面是来自 Can I use 完整的兼容性统计数据， ?...响应式设计里，vw 和 vh 常被用于布局，因为它们是相对于视口的， vw，viewport width，视口宽度，所以 1vw = 1% 视口宽度 vh，viewport height，视口高度，所以...上述文章非常详细地介绍了网格的一些基本概念（比如容器和项目，行和列，单元格和网格线等），使用姿势，注意事项等。作为新兴的布局方案，使用时你需要考虑兼容性是否满足， ?
vw: 相对于浏览器可视区的宽度 1vw = 浏览器可视区宽度的 1% vh: 相对于浏览器可视区的高度 1vh = 浏览器可视区高度的 1% 也就是说 100vh 实际上等于浏览器可视区的高度...假设浏览器可视区高度为 720px，某个元素的宽度为 300px，那应该写成多少 vh 才与 300px 相等呢，如下。...8.1、尝试 rem + vh 方案 一开始想的是 rem + vh 结合使用，根元素 html 使用 vh，其他单位则使用 rem，然后找到有问题的宽高比，通过 @media 方式设置 html 为...8.2、落地方案，vh + vw + JavaScript 计算 而直接在元素的属性值上设置为 vh 或 vw，所有的值都会实时变动，没有最小值（除了属性为字体有最小值），这样就最大程度减少 UI 变乱的情况了...把 .vw-mode 下的内容设置为上下居中。 通过 JS 计算，当可视区比例为竖向比例时，则在顶层元素加上 .vw-mode 类名，当比例为横向比例时，则去掉 .vw-mode 类名。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
