具有特定视口宽度的超出视口高度的额外空间 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

浅谈移动端中的视口（viewport）

基本概念 1.1 两种像素像素是计算机屏幕中显示特定颜色的最小区域。屏幕中的像素越多，同一范围内能看到的内容就越多。或者说，当设备尺寸相同时，像素越密集，画面就越精细。...布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height 获取。 ? 可以看到，默认的布局视口宽度为 980px。...显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素（device independent pixel, dip）。...dip 和设备的物理像素无关，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。...定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值 minimum-scale [0.0-10.0] 定义放大最大比例，它必须小于或等于maximum-scale

2.3K2 0

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

然而，如果你倾向于使用非常特定的断点和硬编码的字体、尺寸和间距，即使出发点很好，你也可能发现自己并没有提供最佳的用户体验。..."移动端" 与 "桌面端" 在这次实验中，我们仅捕获了每个数据点的宽度和高度，这些尺寸是通过 window.innerWidth 和 window.innerHeight 获取的。...我们决定将任何宽度大于800px的视口视为“桌面端”，或者我们更喜欢称之为大视口。你可能会觉得“800px对于桌面端来说太小了”，如果我们是在测量屏幕尺寸，你是对的。但我们这里测量的是视口尺寸。...视口是浏览器窗口的尺寸，而不是屏幕尺寸。如果你正在桌面设备上阅读这篇文章，有多少窗口占满了整个屏幕？你正在阅读的浏览器占据了多少屏幕空间？...来看看所有的视口尺寸受到2015年Open Signal关于Android屏幕碎片化报告的启发，我们用砖石布局展示了前150个最常见的视口尺寸。你也可以看到所有2,300个不同的视口尺寸。

2173 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

【假设父级div就是真个屏幕】，高度设置为屏幕的宽度乘以9/16。...这里我得电脑端测栏加边距的宽度大约是330px,手机端的边距太小就忽略不算了对应的css就是这样 @media only screen and (min-width:768px){ embed{height...原理就是这样，因为我也没有去仔细计算我的模板边距测栏宽度总和是多少，所以比例不可能特别精准，还有就是现在iframe同样可以用上述方法。...本来，文章写道这里就应该结束了，但是突然想到了香菇社长那个超宽的屏幕，仅仅是上述代码肯定会导致一个问题，视频高度可能会超出屏幕的高度。怎么办呢？想了一下，觉得这样比较简单！...在电脑端css加入下面的东东 max-height:100vh;/*限制视频高度最大不能超过浏览器窗口高度*/ max-width:calc(16 * 100vh/ 9);/*限制视频宽度最大不能超过浏览器窗口高度的

1.1K3 0

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

视口单位中的“视口”，PC端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。 ...根据CSS3规范，视口单位主要包括以下4个： 1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的1%。 ...vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。...比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。 vmax相对于视口的宽度或高度中较大的那个。...其中最大的那个被均分为100单位的vmax。 vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

1.5K3 0

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

dip （设备逻辑像素）跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。...：属性名取值描述 width 正整数或 device-width 定义视口的宽度，单位为像素 height 正整数或 device-height 定义视口的高度，单位为像素，一般不用 initial-scale...）的宽度设置为 ideal viewport（理想视口）的宽度，initial-scale=1.5 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）...8、vw: 1% 布局视口宽度　　9、vh: 1% 布局视口高度　　10、分辨率：横向物理像素数 * 纵向物理像素数 iPhone5为例物理像素：640 * 1136。屏幕尺寸：4英寸。...布局宽度：布局视口的逻辑像素的数量屏幕宽度：屏幕的逻辑像素的数量（视觉视口、可见视口、虚拟视口）逻辑宽度：逻辑像素的数量视觉宽度：横向长度 chrome 实验结论：桌面浏览器设置viewport

1.7K5 0

CSS 尺寸单位概述

升角是小写字母（如 h 或 b）中超出 x 高度的部分。表意单位：ic和ric ic 单单位最适用于中文、日文和韩文字符集。它根据所使用字体的"水 "或"水形表意文字"来计算长度。...中文、日文和韩文字体中的字形通常具有相同的宽度和高度。因此，对于这些字符集，ic 单位可以很好地将文本限制为每行特定的字形数。...它们是相对于初始包含块的大小计算的，如果是分页媒体，则是视口或页面。一个视口百分比单位等于初始包含块的 1%。这与百分比不同，百分比将尺寸设置为父元素宽度或高度的一定比例。...「动态视口」，无论浏览器界面是否展开或缩回，动态视口都会存在，并根据可用空间的大小而增大或缩小 image.png 例如，iOS 上的 Safari 浏览器会在你从页面顶部向下滚动时隐藏后退按钮、标签菜单和其他控件...容器相对单位视口相对单位适用于浏览器窗口的可用空间，而容器相对单位则是相对于元素的包含上下文的大小来计算的。

3621 0

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

媒体查询媒体查询是响应式网页设计的基石。它们允许开发人员根据设备的特征（例如宽度、高度和方向）应用 css 样式。通过使用媒体查询，您可以为不同的屏幕尺寸创建不同的布局。...视口单位视口单位是相对单位，可以轻松创建可扩展的设计。它们包括 vw（视口宽度）和 vh（视口高度），它们是视口尺寸的百分比。这些单位对于设置适应视口大小的尺寸和间距特别有用。...} 在此示例中，容器跨越视口的整个宽度，确保它适应不同的屏幕尺寸。...1rem, 3rem); margin-bottom: clamp(1rem, 1.5vw, 2rem); } 在此示例中，标题的字体大小将在 1.5rem 和 3rem 之间缩放，具体取决于视口宽度...组合技术结合媒体查询、视口单元和流体布局，您可以创建高度响应且灵活的网页设计。

2021 0

vivo悟空活动中台-基于行为预设的动态布局方案

）空间竞争由于所有元素根据屏幕实际宽度进行等比缩放，故对屏幕“剩余空间”的利用是静态的，即当屏幕宽高比变化时，所有元素总是同时 “占据”或者“让出”特定比例的空间，尤其是在空间紧凑的情况下，可能存在非重点内容元素...2.1、缩放行为预设缩放行为预设主要解决不同视口下页面元素间的空间竞争问题。...2.1.1、元素分类将元素分类为主要元素和次要元素：主要元素页面中需要突出的重点内容，在视口尺寸发生变化引起的空间竞争中，处于优势地位；次要元素页面中相对不重点的内容，在视口尺寸发生变化引起的空间竞争中...1、基准视口与实际视口 1.1、基准视口宽高描述基准视口的宽度与高度，我们设基准宽度用 baseW 表示，其值为 10.8 rem （对应设计稿 1080px ），同理基准高度 baseH 的值设置为...1.2、实际视口宽高描述实际视口宽度与高度，我们设实际宽度和高度分别为 realW 和 realH ，且由于使用基于 DPR 和 rem 的方案，容易得出 realW = baseW = 10.8rem

2.1K1 0

OpenGL 学了那么久了，glViewport 你真的会用吗？

OpenGL中的 glViewport 函数用于定义视口（Viewport），即确定窗口中显示的区域。...y：视口的左下角Y坐标。 width：视口的宽度。 height：视口的高度。 glViewport函数的作用是将正投影坐标（OpenGL的默认坐标系）映射到屏幕上实际显示的区域。...它将正投影坐标系中的点映射到屏幕上指定大小的矩形区域内。在使用OpenGL进行绘图时，我们通常需要先通过glViewport来设置视口，将整个窗口或窗口的一部分作为渲染区域。...同时改变 width 和 height 参数这里传入的参数为 glViewport(0,0,width/2,height/2)，此时数据和正常时相比宽度变成了之前的一半，高度也变成了之前的一半。...如果超过该空间的屏幕像素，将不显示。但并不意味着OpengGL没有绘制超出显示部分的纹理数据。

3.2K1 0

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

viewport 最先由 Apple 引入，用于解决移动端页面的显示问题，通过一个叫的 DOM 标签，允许我们可以定义视口的各种行为，比如宽度，高度，初始缩放比例等，视口的宽度和高度， var layoutViewportWidth = document.documentElement.clientWidth var layoutViewportHeight...，正整数 | device-width，视口宽度，单位是 CSS 像素，如果等于 device-height，则为理想视口的高度 initial-scale，0-10，初始缩放比例，允许小数点 minimum-scale...响应式设计里，vw 和 vh 常被用于布局，因为它们是相对于视口的， vw，viewport width，视口宽度，所以 1vw = 1% 视口宽度 vh，viewport height，视口高度，所以...下面是一些响应式图片的最佳实践， 1.确保图片内容不会超出 viewport 试想一下，如果图片固定大小且超出理想视口的宽度，会发生什么？

1.8K2 0

移动端viewport属性说明笔记

通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 # 基础概念像素是计算机屏幕中显示特定颜色的最小区域。...# 布局视口(layout viewport) 指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...# 理想视口(ideal viewport) 布局视口的默认宽度并不是一个理想的宽度，于是 Apple 和其他浏览器厂商引入了理想视口的概念，它对设备而言是最理想的布局视口尺寸。...显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素（device independent pixel, dip）。...，单位为像素 height 正整数或device-height 定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值，即当页面第一次 load 的时候缩放比例

1.6K2 0

浏览器之性能指标-LCP

简单来说，它是「用户在屏幕上实际能看到的网页部分」。 ❞ 网页视口的大小取决于「用户设备的屏幕尺寸和浏览器窗口的大小」。在不同的设备上，网页视口的宽度和高度可能会有所不同。...常见的视口单位有vw（视口宽度的百分比）、vh（视口高度的百分比）、vmin（视口宽度和高度中较小值的百分比）和vmax（视口宽度和高度中较大值的百分比）。...例如，很多公司网站的首页，其中的主要部分(轮播图/图片信息)占据了视口的主导位置：字节跳动官网该主要部分代表了该特定页面的LCP。...LCP还会因页面环境而异，因为LCP元素基于视口展示。对于LCP来说，真正的技巧在于「测量特定元素加载所需的时间」（而不是页面本身）。...对于图像元素，报告的大小要么是其可见大小，要么是其固有大小（intrinsic size），取较小的那个。对于文本元素，LCP仅考虑其文本节点的大小。 ❝此外，LCP不会考虑元素的任何超出视口的部分。

1.7K3 0

响应式设计

用这一语法，通常叫作媒体查询（media queries），写的样式只在特定条件下才会生效。流式布局。这种方式允许容器根据视口宽度缩放尺寸。...媒体查询使用@media规则选择满足特定条件的设备。 /** * 只有当设备的视口宽度大于等于 560px 的时候，才会给标题设置 2.25rem 的字号。...max-width 等 min-width 匹配视口大于特定宽度的设备，max-width 匹配视口小于特定宽度的设备。...)——匹配高度小于等于20em的视口 (orientation: landscape)——匹配宽度大于高度的视口 (orientation: portrait)——匹配高度大于宽度的视口 (min-resolution...固定容器（比如，设定了 width: 800px 的元素）在小屏上会超出视口范围，导致需要水平滚动条，而流式容器会自动缩小以适应视口。

2.1K1 0

移动web开发

视觉视口 visual viewport 字面意思,他是用户正在看到的网站的区域.注意:是网站的区域我们可以通过缩放去操作视觉视口.但不会影响布局视口,布局视口仍保持原来的宽度....理想视口 ideal viewpoint 为了使网站在移动端有最理想的浏览和阅读宽度而设定....理想视口,对设备来讲,是最理想的视口尺寸需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局视口就多宽 meta...背景缩放 background-size 语法: background-size: 宽度高度; 假如有两个值,那么就是直接拉大或缩小图片,如果是只有一个值,那就必然是宽度,高度默认不变,所以是按照宽度等比例缩放...的区别: cover是一定要让图片铺满整个背景区域:比如图片当中,宽度其实已经到了,但是图片还是一直放大知道高度也够到,即使后面宽度已经超出.

2.3K2 1

CSS Viewport 单位，很多人还不知道使用它来快速布局！

视口宽度 vw单位表示根元素宽度的百分比，1vw等于视口宽度的1%。 ?...假设我们有一个元素与以下CSS： .element { width: 50vw; } 当视口宽度为500px时，50vw计算如下 width = 500*50% = 250px 视口高度 vh单位表示根元素高度的百分比...Vmin 单位 vmin表示视口的宽度和高度中的较小值，也就是vw 和 vh 中的较小值。如果视口宽度大于其高度，则将根据高度计算该值。我们以下面的例子为例。 ?...我们有一个横屏手机，其中有一个元素具有vmin单元。在这种情况下，值将根据视口高度计算，因为它小于宽度。...2.第二种解决方案：Flexbox和视口单位（推荐）通过将100vh设置为body元素的高度，然后可以使用flexbox来使main元素占用剩余空间。

3.3K3 0

移动端与PC端页面布局区别、background-size 背景图片的缩放

下面来介绍视口的概念。...视口视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况...使用视口解决上面的div显示太小的问题 ? ? 设置了视口之后，div显示比较正常了。...contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。下面来使用这张图片作为背景缩放一下看看。 ?...contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。 ?

3K2 0

解决CSS垂直居中的几种方法（基于绝对定位，基于视口单位，Flexbox方法）

二、基于绝对定位的解决方法如果我们想要利用绝对定位的方法进行垂直剧中的话，那么就要求元素具有固定的宽度和高度，如果没有固定的宽度和高度就无法实现，因为需要利用top和left的值，进行定位...这段代码在本质上做了这样几件事情：先把这个元素的左上角放置在视口(或最近的、具有定位属性的祖先元素)的正中心，然后再利用负外边距把它向左、向上移动(移动距离相当于它自身宽高的一半)，从而把元素的正中心放置在视口的正中心...不过幸运的是，如果只是想把元素相对于视口进行居中，仍然是有希望的。CSS值与单位(第三版)定义了一套新的单位，称为视口相关的长度单位。 1) vw 是与视口宽度相关的。...与常人的直觉不符的是，1vw 实际上表示视口宽度的 1%，而不是 100%。 2) 与 vw 类似，1vh 表示视口高度的 1%。 ...3) 当视口宽度小于高度时，1vmin 等于 1vw，否则等于 1vh。 4) 当视口宽度大于高度时，1vmax 等于 1vw，否则等于 1vh。

1.8K7 0

【学习图片】11.描述性语法

使用 x 描述密度一个固定宽度的在任何浏览上下文中占据的视口空间相同，无论用户显示器的密度（屏幕上的物理像素数量）如何。...当缩小以适应400个逻辑像素宽的布局空间时，该800像素图像源具有双倍的像素密度 - 在具有DPR为2的显示器上，它看起来很清晰。..."> 这里，sizes 的值告诉浏览器，我们的布局中 img 占用的空间宽度为 80vw - 视口宽度的 80%。记住，这不是一个指令，而是图像在页面布局中的大小的描述。...幸运的是，我们可以在这里使用calc()——任何具有响应式图像本地支持的浏览器也将支持calc()，使我们能够混合和匹配CSS单位——例如，一个占据用户视口的全宽度，减去两侧1em边距的图像：的视口上占据视口宽度的80%，左右各有一个em的内边距，在较小的视口上则占据视口的全部宽度。

1.2K2 0

Web 技术：CSS最小和最大(宽度高度)知识点及优缺点

上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。通常，我们希望限制元素相对于其父元素的宽度，同时使其具有动态性。因此，有一个基础宽度或高度的能力，使其扩展的基础上，可用的空间。...由于宽度是以像素为单位定义的，因此不能保证上面的方法适用于移动视口。为了解决这个问题，我们可以使用百分比来代替像素作为最小和最大属性。考虑下面这个具有article主体的示例。...modal是一个元素，因此它已经具有其父元素的100％宽度，对吗？考虑下面为模态设计简化的测试案例。请注意，如果可用视口空间不足，则宽度如何更改为其父级的100％。 ?...最大宽度/高度和视口单位的流体比率为了使比例容器能够根据视口大小进行响应缩放，引入了padding hack。现在，我们可以通过组合CSS中的视口单位和最大宽度/高度来模仿相同的行为。 ?...为了使其流畅，我们需要以下内容：纵横比：高度/宽度容器的宽度：可以是固定数字，也可以是动态数字（100％）设置height为视口宽度的100％乘以纵横比设置max-heigh，该高度是容器的宽度乘以纵横比

6.1K2 0

【小程序_02】布局方式

2.2 视觉视口（visual viewport）它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。 ?...2.3 理想视口 (ideal viewport) 为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口，对设备来讲，是最理想的视口尺寸,需要手动添写meta视口标签通知浏览器操作。...meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽。...-- 单位：长度、百分比、cover、contain cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（不考虑图片是否有超出部分） contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域...再平分剩余空间 stretch 设置子项元素高度平分父元素高度 <!

1.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭