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

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

在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度。...而移动端则较为复杂,它涉及到三个视口:布局视口(Layout Viewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)。 本文主要讨论移动端中的视口。...因此,引入了布局视口、视觉视口和理想视口三个概念,使得移动端中的视口与浏览器宽度不再相关联。...布局视口(layout viewport) 一般移动设备的浏览器都默认设置了一个 viewport 元标签,定义一个虚拟的布局视口(layout viewport),用于解决早期的页面在手机上显示的问题...理想视口(ideal viewport) 布局视口的默认宽度并不是一个理想的宽度,于是 Apple 和其他浏览器厂商引入了理想视口的概念,它对设备而言是最理想的布局视口尺寸。

2.3K20

华为路由器仅的有2个千兆口,无法切换成二层内网接口?其实完全可以操作,还挺简单的

华为AR1220-S企业级路由器,有2个千兆网口和8个百兆网口,这8个百兆口,倒是可以很方便地转换为三层接口,用来连接外网,但是2个千兆网口就可惜了,只能用来连接外网,无法切换成二层的内网口,这就有点尴尬了...,客户的宽带是200M,而内网交换机是千兆的,无疑都必须用到千兆网口,难道只能更换路由器?...客户的诉求,就是我们努力的方向,能想办法解决的问题,坚决不让客户花钱,那么就来看看怎么把其中一个千兆网口改造成内网接口吧。...开始之前,先来复习一下上一篇文章的拓扑图以及客户的诉求: (1)华为AR1220-S,两个千兆口为Wan口,8个百兆的是Lan口,客户已经问过华为客服,无法将其中一个千兆口定义为Lan口,让笔者想办法实现...(这一步,关于交换机的配置在上一篇文章中已经完成,本文将完成路由器的配置); (5)Vlan10和Vlan12能互访,但它们都禁止访问Vlan11; 这一步比较简单,在华为S5720交换机中执行以下配置命令即可

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

    超越媒体查询:使用更新的特性进行响应式设计

    如前所述,我们没有将一个图像(通常是较大的高分辨率版本)发送到所有屏幕尺寸并将其缩放到视口宽度,而是指定了一组图像以在特定情况下使用。...媒体查询会根据图片的大小适当地添加: 大于等于1000px的视口加载picture.png 601px到999px之间的视口加载image-lg.png 介于401px和600px之间的视口加载picture-mid.png...浏览器查找媒体查询与当前视口宽度匹配的第一个元素,然后它将显示适当的图像(在srcset属性中指定)。...在此示例中,我们告诉浏览器永远不要让.box类的元素的宽度减小到45%或600px以下(以视口宽度为准,以最小者为准): .box { width : min(45%, 600px) } 如果45%...vh是视口高度或可见屏幕高度的首字母缩写。 100vh代表视口高度的100%(取决于设备)。 同样,vw代表视口宽度,这意味着设备的可视屏幕宽度,而100vw则代表视口宽度的100%。

    4.1K10

    什么是igmp协议_igmpv3协议

    (*、G)表项删除,不再转发该组组播 查询器选举 一个网段中只能有一个路由器负责处理组播,该路由器就是查询器 IGMPv1没有查询器选举机制,只能依靠上层组播路由协议选举 成员报告抑制机制 主机以组播224.0.0.1...,路由器则在组状态中删除该组播源;如果收到,则不做任何操作 离开某个组播组 1.主动向路由器发送membership-report报文;报文包含希望离开的组播组和TO_IN(NULL)消息 2.路由器收到该报文...ID 所有堆叠的物理设备的操作系统必须一致 配置步骤 更改设备编号 保存配置,手动重启更改了设备ID的交换机 手动Shutdown要加入到堆叠口中的物理口 创建虚拟堆叠口,并加入相应的物理口 手动开启物理口...'port-id' //物理口加入到堆叠口 [h3c]irf member 'member-id' renumber 'new-member-id'//更改IRF设备ID [h3c]irf-port-configuration...本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.2K40

    基于Mesh路由器的全屋wifi组网

    漫游的过程中无线终端会自动剃除弱信号路由,连接上强信号路由。...结合家庭网线预埋情况、自己的网络需求设计组网方案 结合家庭网线预埋情况、自己的网络需求设计组网方案 以下是我的家庭网线预埋情况、网络需求: 网线预埋: 卧室均预埋了单网线口,客厅仅预埋一条网线 网络需求...其中,mesh主路要保障客厅、大部分地方信号稳定,需要买一个处理器好、网络稳定的mesh路由器 三、相关资料 单线复用 用VLAN交换机的单线复用,由于外网WAN和内网LAN通过VLAN交换机设为不同的...VLAN ID,在单根网线中传输,互不影响。...可以更改光猫或路由器的网关地址,也可以更改VLAN交换机的ip。

    1.4K10

    桥接模式?NAT模式?深入原理,一文带你彻底搞清楚!

    看了后面就明白了】 通过在VMware虚拟网网络编辑器中,也可以看到有三个虚拟交换机分别对应不同的网络模式: ·VMnet0:用于桥接模式下的虚拟交换机【需要管理员权限】 ·VMnet1:用于仅主机模式下的虚拟交换机...LAN口和WAN口之间数据流管理和控制的基本流程: 1.数据接收:当数据从局域网上的设备通过某个LAN口进入路由器时,路由器的交换机或交换模块会接收到这些数据包。...5.数据返回:对于从互联网返回的响应数据或外部网络发来的数据包,路由器会通过WAN口接收这些数据,并根据源IP地址和端口等信息确定目标设备和LAN口。...6.数据转发到LAN口:路由器的交换机或交换模块会将收到的数据包转发到目标LAN口,以便将数据包传递给局域网内的设备。...一些验证:共享网络 仅主机模式,也是可以通过共享网络的模式【类似wifi的感觉】,让虚拟机可以访问主机和互联网的。在主机的网络配置中,将可用的网络连接共享给 VMnet1虚拟网卡。

    2.3K22

    上海电信光猫SA1456C桥接后4K IPTV继续使用

    上海电信光猫:SA1456C 路由器:TL-R488GPM-AC 背景: 打电话给上海电信客服被告知,改桥接不能看4K IPTV,电信安装师傅也是同一口径。...这种方案是需要软路由,万一不稳定,会影响家庭安定团结的局面。 需求: 1、光猫接IPTV直接看,有两台IPTV盒子接交换机即可,不需要更改任何东西。...如何在光猫中设定桥接,路由器拨号网上网的文章很多啦,我就不贴图去写,以下是几个坑注意下,只要按照这些设置就应该就完美上网和看IPTV啦。...有坑: 3.1宽带拨号密码不是光猫页面上的密码,应为8位数字密码 3.2MTU设置与光猫一样的,我的是1492 3.3WAN口MAC地址复制光猫的mac地址(请务必填的是光猫路由器上贴的mac地址...本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    5.7K30

    你可能不知道的「 CSS 容器查询 」

    我们使用创建响应式设计时,通常使用媒体查询根据视口的大小来更改文档布局。 但是,许多设计都有一些通用组件,这些组件会根据其容器的可用宽度来更改布局。...这可能并不总是与视口的大小有关,而是与组件在布局中的放置位置有关。 例如,以下组件可能显示在网站布局的窄或宽列中。 如果有空间,它将显示为两列,否则,我们希望将其堆叠显示。...媒体查询使我们能够根据视口的范围来改变元素的大小。 当我们添加一个类或目标元素时,我们决定当对象在侧边栏中时,它必须使用堆叠布局。...我们将列定义为: 该维度中,空间的百分比或分数。 因此,容器查询仅允许通过在一维中指示大小来扩展包含属性,这被描述为单轴遏制。...然后,可以编写一个查询来查找此包含上下文而不是视口大小,以便为组件制定布局决策。 使用创建容器查@container。 这将查询最近的包含上下文。

    1.6K30

    Chrome 108 :发布新的 CSS 布局单位!

    在最近发布的 Chrome 108 中,带来了几个新的 CSS 视口单位,下面我带大家一起来看一下: 视口(viewport)代表当前可见的计算机图形区域。...一般我们提到的视口有三种:布局视口、视觉视口、理想视口,在我之前写的下面这篇文章中详细介绍了视口相关的概念和原理看兴趣可以看: 关于移动端适配,你必须要知道的 在响应式布局中,我们经常会用到两个视口相关的单位...vw 和 vh 中的较小值 vmax : 选取 vw 和 vh 中的较大值 如果我们将一个元素的宽度设置为 100vw 高度设置为 100vh,它将完全覆盖视觉视口: 这些单位有很好的浏览器兼容性,...但是,在移动设备上的表现就差强人意了,移动设备的视口大小会受动态工具栏(例如地址栏和标签栏)存在与否的影响。视口大小可能会更改,但 vw 和 vh 的大小不会。...除了 Large viewport 和 Small Viewport ,还有一个 Dynamic viewport(动态视口) 当动态工具栏展开时,动态视口等于小视口的大小。

    1.6K20

    不断封禁开源项目,连自家的都不放过

    来自:程序员报道 继去年封禁伊朗等地区账号后,GitHub 近日再次封禁了一个属于微软的前端开源项目 Aurelia,理由是项目中有两名来自伊朗的外部贡献者。...这是一个名叫“Aurelia”的前端项目被 GitHub 封禁了。Aurelia 是微软开发的 JavaScript 框架,开源已有 5 年,由一家美国公司管理。 ?...之前也没有收到正式的通知,这对我们是毁灭性的行为!”他开玩笑说:“难道是因为微软又有了一个新的 JavaScript 框架,所以要封掉 Aurelia?!...事件不断发酵,快速的就顶到了 HackerNews 头版,GitHub 的首席执行官不得不也对此表示了歉意: 关闭此帐户显然是一个可怕的错误,我对受此影响的人表示歉意。...我们正在调查具体过程,并更改规则以确保此类问题不会再次发生。 以下是完整回应: ?

    39110

    Metal 框架之渲染管线渲染图元

    概述 在 《 Metal 框架之使用 Metal 来绘制视图内容 》中,介绍了如何设置 MTKView 对象并使用渲染通道更改视图的内容,实现了将背景色渲染为视图的内容。...要将位置转换为 Metal 的坐标,该函数需要绘制三角形的视口的大小(以像素为单位),因此需要将其存储在 viewportSizePointer 参数中。...光栅化阶段获取输出位置,并将 x、y 和 z 坐标除以 w 以生成归一化设备坐标中的 3D 点。归一化设备坐标与视口大小无关。 归一化设备坐标使用左手坐标系来映射视口中的位置。...这意味顶点函数在该坐标空间中生成的 (x,y) 已经在归一化设备坐标空间中了。将输入位置除以1/2视口大小就生成归一化的设备坐标。...该示例将两个参数的数据复制到命令缓冲区中,顶点数据是从定义的数组复制而来的,视口数据是从设置视口的同一变量中复制的,片元函数仅使用从光栅化器接收的数据,因此没有传递参数。

    2.1K00

    移动端基础

    搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器 使用外网服务器,直接IP或域名访问 2.视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。...视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题 iOS,Android...可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...meta视口标签的主要目的:布局视口的宽度应与理想视口宽度一致。...多倍图 物理像素比会放大图片倍数,会造成图片模糊 在标准viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题 背景图片注意缩放问题 3.3二倍精灵图 在firework

    1.7K10

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

    在Set Studio,我们进行了一个小型的非正式实验,以回答“视口尺寸有多碎片化?”这个问题。我们收集了超过120,000个数据点,涉及超过2,300个不同的视口尺寸。...即使在同一款iOS设备上,基于操作系统状态,一个网站至少也可能出现在3种不同的环境中。 如果你以灵活、流畅的方式进行构建,这并不是问题。这一点在这个图表中有所体现。..."移动端" 与 "桌面端" 在这次实验中,我们仅捕获了每个数据点的宽度和高度,这些尺寸是通过 window.innerWidth 和 window.innerHeight 获取的。...我们决定将任何宽度大于800px的视口视为“桌面端”,或者我们更喜欢称之为大视口。 你可能会觉得“800px对于桌面端来说太小了”,如果我们是在测量屏幕尺寸,你是对的。但我们这里测量的是视口尺寸。...来看看所有的视口尺寸 受到2015年Open Signal关于Android屏幕碎片化报告的启发,我们用砖石布局展示了前150个最常见的视口尺寸。你也可以看到所有2,300个不同的视口尺寸。

    21730

    移动端基础

    web服务器,手机和服务器一个局域网内,通过手机访问服务器 使用外网服务器,直接IP或域名访问 2、视口 视口(viewport)就是浏览器显示页面内容的屏幕区域。...视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题 iOS,Android...可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...meta视口标签的主要目的:布局视口的宽度应与理想视口宽度一致。...3.2多倍图 物理像素比会放大图片倍数,会造成图片模糊 在标准viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题 背景图片注意缩放问题  开发中需要用多倍图,比如需要放一个

    2K20

    Unity通用渲染管线(URP)系列(十四)——多相机(Camera Blending & Rendering Layers)

    1.1 分屏 让我们首先考虑由两个并排摄像头组成的分屏方案。左摄像机的视口矩形宽度设置为0.5。右摄像机的宽度也为0.5,其X位置设置为0.5。如果我们不使用后处理功能的话,那么它将按预期工作。...(带有Post FX的分屏 不正确) 发生这种情况是因为调用SetRenderTarget会重置视口以覆盖整个目标。要将视口应用于最终的FX Pass后,我们需要在设置目标之后且在绘制之前设置视口。...最简单的示例是使用覆盖整个屏幕的常规主摄像头,然后添加第二个摄像头,该摄像头稍后以相同的视图但较小的视口渲染。我将第二个视口缩小为一半,并通过将其XY位置设置为0.25居中。 ?...编辑器最初将渲染Clear后的黑色纹理,但是此后,渲染纹理将包含最后渲染到该纹理的内容。正常情况下,多个摄影机可以使用任何视口渲染到相同的渲染纹理。...它返回一个字符串数组,我们可以在静态构造函数方法中创建它。我们将以与默认名称相同的名称开头,不同之处在于Layer字和数字之间的空格。 ? 这会稍微更改渲染层标签。

    9K22

    将 SVG 与媒体查询结合使用

    在 HTML 文档中,我们可以根据视口的条件显示、隐藏或重新排列页面的某些部分。例如,如果浏览器窗口的宽度为 480 像素,我们可能会将导航从水平导航移动到垂直可折叠列表。...通过将 CSS 与 SVG 结合使用,我们可以根据用户交互更改 SVG 的外观。或者我们可以在多个地方使用同一个 SVG 文档,并根据视口的宽度显示或隐藏它的一部分。...但是通过媒体查询,我们可以做更聪明的事情。 让我们区分 HTML 文档视口和 SVG 文档视口。当 SVG 内联时,HTML 视口和 SVG 视口是一回事。...媒体查询在这两种情况下都适用,但是当 SVG 文档被链接时,它的视口独立于它的 HTML 文档。在这种情况下,浏览器窗口的大小不会决定 SVG 视口的大小。...不幸的是,这是 SVG 的一个限制。要修复它,我们需要更改viewBoxSVG 文档的属性,但仅当视口低于特定大小时。

    6.2K00

    不懂就问,两台路由器,咋分别通过WAN和LAN口去连接?

    正常来说,两个路由器在一个网段内,IP地址肯定是一样的,连接两个DHCP服务器共同工作,IP就会产生冲突,对吧? 在这个情况下,怎么分别通过WAN和LAN口去连接?...从它们的名称上我们就不难看出,WAN口主要用于连接外部网络,如ADSL、DDN、以太网等各种接入线路。 而LAN口用来连接家庭内部网络,主要与家庭网络中的交换机、集线器或PC相连。...就像我这个地方的DNS是202.102.152.3(或8.8.8.8万能DNS)保存退出这时进入路由器的状态界面你会看到A路由器为B路由器临时分配了一个IP地址。...(不填也行,可以打开B路由的DHCP服务功能,自动获取IP地址) 简单来说,这种连接方式,就是A路由分配一个固定IP给B路由的WAN口,再由B路由分配给属下的LAN口,达成二次路由的目的。...然后,打开网络参数的LAN口设置,更改LAN口IP地址,比如改为 192.168.1.123 只要和别的已经使用的IP地址不冲突就可以了。

    4.6K31

    SIGCOMM 2023 | Dragonfly:以更高的感知质量实现连续 360° 视频播放

    Rao 原文链接:https://dl.acm.org/doi/10.1145/3603269.3604876 内容整理:李雨航 在流式传输 360° 视频时,通过将视频在空间上分割为 tile 并仅传输用户的视口...如图 1,除了像传统视频流所做的将视频分成块(chunk)外,它们还将每个 chunk 在空间上分割成片(tile),其中一个 tile 具有与原始块相同的帧数,但仅覆盖帧的较小空间区域。...其次,主动跳过 tile 的获取提供了可以用以增强用户体验的额外自由度,例如,可能希望跳过一个截止时间更紧急、仅有少量帧受益且位于视口边缘的 tile ,并取而代之以以更高质量获取一个稍后需要但在多个帧中位于视口中心的...由于客户端可以为同一个 tile 发送多个请求,服务器跟踪已发送的每个 tile 的质量,并且仅会在之前以保障流质量获取的情况下才会重复发送一个 tile 。...NoMask 在中位 PSNR 上与 Dragonfly 相当,然而,在图 8(a)的放大部分中,它显示出一个显著的尾部。这是因为 NoMask 具有一小部分不完整的视口,影响了 PSNR 的尾部。

    31410
    领券