标准要求： 除了字幕和文本图片外，文本可以在不使用辅助技术的情况下放大到 200% 而不会丢失内容或功能。...如果对影响元素计算高度和宽度的 CSS 属性使用固定值，当文字大小增大时，元素内部的文字会被截断。 还不信服？ 你可能会想："但当我把浏览器放大到 200% 时，按钮文本看起来很好！"...根据我的经验，随着视口尺寸的缩小，我发现这种方法更难维护。 想象一下，一个具有大文本大小设置的移动设备。使用 em 单位设置的文本容器可能会比视口宽。...如果文本被设备大小截断，这意味着我们有违反不只一个而是两个 WCAG 2.2 标准的风险： SC 1.4.4 调整文本大小 SC 1.4.10 重排 在使用技术 C28 时，防止出现这种情况的一种方法是利用...与使用 width 和 max-width 相比，我们可能只需使用 padding ，然后让浏览器执行其默认的魔法，使元素适合视口。
一、meta 视口标签简介 ---- meta 视口标签 就是为了移动端而设计的 , 该设置只有在移动端生效 ; meta 视口标签 用于设置 浏览器 按照 理想视口 显示页面 ; 使用 meta 视口标签...---- 1、不设置 meta 视口标签代码示例 如果 不设置 meta 视口标签 , 在移动端 默认的 网页宽度 为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示 ; 代码示例...: 如果 不设置 meta 视口标签 , 在移动端 默认的 网页宽度 为 980 像素 , 所有的标签元素都是在 980 像素宽度的网页中显示 ; body 中的文本 会缩小到很小的大小 ;...2、设置 meta 视口标签代码示例 设置 meta 视口标签 , 在移动端 默认的 网页宽度 为 设备宽度 , 是理想视口 ; body 中的文本 显示正常 ; 推荐视口标签写法 : 所有的手机端网页都设置如下样式...: 设置 meta 视口标签 , 在移动端 默认的 网页宽度 为 设备宽度 , 是理想视口 ; body 中的文本 显示正常 ;
布局视口（layout viewport） 一般移动设备的浏览器都默认设置了一个 viewport 元标签，定义一个虚拟的布局视口（layout viewport），用于解决早期的页面在手机上显示的问题...如果要显式设置布局视口，可以使用 HTML 中的 meta 标签： "viewport" content="width=400"> ? 布局视口使视口与移动端浏览器屏幕宽度完全独立开。...2.视口的设置 我们可以使用视口元标签（viewport meta 标签）来进行布局视口的设置 "viewport" content="width=device-width,initial-scale...，或者使用 CSS 中的 device-pixel-ratio。...这时，就需要使用 @2x 甚至 @3x 图来避免图片的失真
p=9448 目录 获取和整理NASA元数据 计算tf-idf 关键字和描述 可视化结果 ---- NASA有32,000多个数据集，有关NASA数据集的元数据 可以JSON格式在线获得。...我们使用tf-idf在描述字段中找到重要的单词，并将其与关键字联系起来。 获取和整理NASA元数据 让我们下载32,000多个NASA数据集的元数据。...另一种方法是查看术语的 逆文本频率指数 （idf），这会降低常用单词的权重，而增加在文档集中很少使用的单词的权重。
移动端常见的适配方案有以下几种，一般都是互相搭配使用。包括： 视口元信息配置 响应式布局 相对单位 媒体查询 响应式图片 安全区域适配 知识点深入 1....1.2 视口 image 视口（viewport） 视口一般是指用户访问页面时，当前的可视区域范围。通过滚动条滑动，视口可以显示页面的其他部分。...视觉视口（visual viewport） 视觉视口是布局视口的当前可见部分。用户可以通过缩放来查看页面内容，从而改变视觉视口，但不影响布局视口。 2....使用 viewport 元标签配置视口 开发者可以通过 对移动端的布局视口进行设置。...如果不进行 viewport 元标签的设置，可能会导致开发者设定的较小宽度的媒体查询永远不会被使用，因为默认的布局视口宽度为 980px。
在网页开发中，可以使用CSS的视口单位（viewport units）来设置元素的尺寸，这些单位根据网页视口的大小进行调整。...常见的视口单位有vw（视口宽度的百分比）、vh（视口高度的百分比）、vmin（视口宽度和高度中较小值的百分比）和vmax（视口宽度和高度中较大值的百分比）。...通常情况下，它会是一个图像或文本块。LCP还会因页面环境而异，因为LCP元素基于视口展示。 对于LCP来说，真正的技巧在于「测量特定元素加载所需的时间」（而不是页面本身）。...在这种情况下，内容包括图片、图表和文本元素。 而LCP仅测量页面能够在视口（viewport）内加载最大元素的速度。...对于文本元素，LCP仅考虑其文本节点的大小。 ❝此外，LCP不会考虑元素的任何超出视口的部分。这意味着大小的计算不包括任何边距（margin）、填充（padding）或边框（border）。
移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。...一、视口 1、layout viewport（布局视口） 一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题...1、使用viewport元标签控制布局 首先看一下viewport元标签极其属性： 1 html 代码: 2 <meta id="viewport" name="viewport" content="width...）的宽度设置为 ideal viewport（理想<em>视</em><em>口</em>）的宽度，initial-scale=1.5 表示将layout viewport（布局<em>视</em><em>口</em>）的宽度设置为 ideal viewport（理想<em>视</em><em>口</em>）...布局宽度：布局<em>视</em><em>口</em>的逻辑像素的数量 屏幕宽度：屏幕的逻辑像素的数量（视觉<em>视</em><em>口</em>、可见<em>视</em><em>口</em>、虚拟<em>视</em><em>口</em>） 逻辑宽度：逻辑像素的数量 视觉宽度：横向长度 chrome 实验结论：桌面浏览器设置viewport
通过使用响应式布局，可以使网页在不同的设备上保持良好的显示效果，无论是在桌面电脑、平板电脑还是手机上。...max-width: 50%; /* 图像最大宽度为其包含元素的50% */ } } 效果： 视口设置...使用 标签设置视口，以确保页面在移动设备上正确缩放。...示例： 这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度...和视口元标签一起，你可以使用另外几个设定，但大体说来，上面那行就是你想要使用的。 initial-scale：设定了页面的初始缩放，我们设定为 1。 height：特别为视口设定一个高度。
text-wrap 属性 text-wrap 属性用于指定元素中的文本是否应换行。它是 CSS 文本模块第 4 级规范的一部分。...如果将 text-wrap 属性设置为 balance ，浏览器将尝试以元素的最后一行与第一行一样长的方式对文本进行换行。如果希望元素中的文本具有一致的外观，这将非常有用。例如，在博客文章的标题中。...另一方面，如果将 text-wrap 属性设置为 pretty ，浏览器就会尝试智能地将文本分成块元素，使最后一行不会出现单字/孤字。...对 CSS 进行作用域界定有助于避免使用过于具体的选择器，也有助于避免在 CSS 中使用 !important 。...查看过渡 CSS 规范中即将出现一个名为 view-transition 的新元标记，它将允许我们在用户滚动页面时控制视口的转换。 例如，如果想在用户浏览新页面时为视口添加淡入效果，可以这样做。
翻译一下： 大视口（Large Viewport）：视口大小假设任何动态扩展和缩回的 UA 界面都没有展开 小视口（Small Viewport）：视口大小假设任何动态扩展和缩回的 UA 界面都展开了...因此，对应到高度之上，其状态大致如下： 理解了大视口与小视口之后，再理解动态视口就轻松了些。...简单而言，动态视口的意思是： 动态工具栏展开时，动态视口等于小视口的大小 当动态工具栏被缩回时，动态视口等于大视口的大小 因此，也就能得到下面这张图： 其中，dvh、dvw、dvmax、dvmin 对标...在水平书写方向上，这对应于视口的宽度，而在垂直书写方向上，这表示视口的高度。记住 inline 方向的简单方法是记住它与文本的方向相同。...看看 CanIUse： 因此，在不久的将来，全面使用 dvh 替代 vh，能有效的减少非常多因为 vh 在移动端的表现而引起的问题。
比如 AndroidStudio 的文件树和编辑器区域，当宽度较窄时，水平方向通过拖拽底部滚动条来滚动视口。...---- 3.通过小案例提取精华 由于 debugger 代码面板中涉及到其他很多东西，这里来精简一下，做个区域视口双向滑动的最小案例，来方便大家理解和使用。...如下所示，蓝色区域内有一行文字，当窗口宽度缩小到文本溢出时，底部会呈现滑动条支持水平滑动： 这里先总结一下实现区域视口的双向滚动的步骤: 需要两个可滑动的视口: SingleChildScrollView...需要两个 Scrollbar 用于控制视口滑动，并且指定 ScrollController, 关联 [滑动视口] 和 [滑动条]。...tag3 和 tag4 处是准备两个可滑动视口，这里简单期间使用 SingleChildScrollView，其他滑动组件都可以。
接下来该指南对文本内容的创作提出了相应的思考和规范，尤其在VR/AR中，想要添加文本或者字幕需要考虑的因素就会有很多，比如有HMD，视角的转换等等。...服务提供商的基本准则 服务提供商方面包括基于HEVC的视口独立OMAF视频配置文件，基于HEVC的视口依赖OMAF视频配置文件，OMAF 3D音频基线媒体配置文件，球到纹理映射和SEI消息生成，编码和内容准备...基本流包含等效的渲染元数据，并且可以使用。 图8显示了一个有更多细节的流程图，又包括基于视点的处理，可以进一步有效的利用资源，提高输出效率。 ? 图7.逻辑接收模型 ?...图8.渲染和视口生成 接下来介绍了基于SEI信息的渲染过程以及分发和传输方面的考虑。...在平板电脑和智能手机的情况下，通过触摸屏幕或移动设备来控制视口等等。
一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口，它们在屏幕适配中起着非常重要的作用。 4.1 布局视口 ?...如上图，我们在描述设备独立像素时曾使用过这张图，在浏览器调试移动端时页面上给定的像素大小就是理想视口大小，它的单位正是设备独立像素。...4.4 Meta viewport 元素表示那些不能由其它 HTML元相关元素之一表示的任何元数据信息，它可以告诉浏览器如何解析页面。...上面的代码中，将 html节点的 font-size设置为页面 clientWidth(布局视口)的 1/10，即 1rem就等于页面布局视口的 1/10，这就意味着我们后面使用的 rem都是按照页面比例来计算的...不同于位图的基于像素， SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。 ?
视口概述视口简单理解就是可视区域的大小我们称之为视口在 PC 端，视口大小就是浏览器窗口可视区域的大小图片图片我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表
vw(Viewport Width) 和 vh(Viewport Height) 概述vw 和 vh 是前端开发中的一个 动态单位, 是一个相对于 网页视口 的单位系统会将视口的宽度和高度分为 100...份, 1vw 就占用视口 宽度 的 百分之一, 1vh 就占用视口 高度 的 百分之一vw 和 vh 和百分比不同的是, 百分比永远都是以父元素作为参考, 而 vw 和 vh 永远都是以 视口 作为参考...width); console.log(getComputedStyle(oDiv).height);图片结论: vw/vh 是一个动态的单位, 会随着视口大小的变化而变化...(相对单位)我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表
譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。 像素（px）是相对于观看设备的。...相对于元素的字体大小（font-size），如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。3em 表示当前字体大小的 3 倍 3、pt：点(Point)，绝对长度单位。...如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 相对于当前字体的 x-height(极少使用) 5、pc：派卡(Pica)，绝对长度单位。相当于我国新四号铅字的尺寸。...相对于视口*宽度的 1%； 12、vh：相对长度单位。相对于视口*高度的 1%； 13、vmin：相对长度单位。相对于视口*较小尺寸的 1％ ，vw和vh中较小的那个； 14、vmax：相对长度单位。...相对于视口*较大尺寸的 1％，vw和vh中较大的那个； 视口（Viewport）= 浏览器窗口的尺寸。如果视口宽 50 里面，则 1vw = 0.5cm。15、%：相对长度单位。
编写顶点函数 编写的顶点函数必须生成输出结构的两个字段，使用 vertexID 参数索引顶点数组并读取顶点的输入数据，还需要获取视口尺寸。...归一化设备坐标与视口大小无关。 归一化设备坐标使用左手坐标系来映射视口中的位置。图元被裁剪到这个坐标系中的一个裁剪框上，然后被光栅化。...将输入位置除以1/2视口大小就生成归一化的设备坐标。由于此计算是使用 SIMD 类型执行的，因此可以使用一行代码同时计算两个通道，执行除法并将结果放在输出位置的 x 和 y 通道中。...如果要针对不同的像素格式，则需要创建不同的管道状态对象，可以在不同像素格式的多个管道中使用相同的着色器。 设置视口 有了管道的渲染管道状态对象后，就可以使用渲染命令编码器来渲染三角形了。...该示例将两个参数的数据复制到命令缓冲区中，顶点数据是从定义的数组复制而来的，视口数据是从设置视口的同一变量中复制的，片元函数仅使用从光栅化器接收的数据，因此没有传递参数。
p=9448 目录 获取和整理NASA元数据 计算文字的tf-idf 连接关键字和描述 可视化结果 ---- NASA有32,000多个数据集，并且NASA有兴趣了解这些数据集之间的联系，以及与NASA...有关NASA数据集的元数据 可以JSON格式在线获得。让我们使用tf-idf在描述字段中找到重要的单词，并将其与关键字联系起来。...获取和整理NASA元数据 让我们下载32,000多个NASA数据集的元数据。...另一种方法是查看术语的 逆文档频率 （idf），这会降低常用单词的权重，而增加在文档集中很少使用的单词的权重。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
