文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

学姐叫我看 CSS 新出的容器查询，然后把公共组件重构成响应式的！

当我们在设计UI时以这种心态思考时，我们可以开始考虑组件的不同变体，这些组件依赖于它们的父宽度。 在下面的图中，请注意文章组件的每个变化是如何以特定的宽度开始的。...不仅如此，我们还可能有一个组件的变体，它应该只显示在特定的上下文中。例如，事件列表页面。在这种情况下，清楚在何处使用此变体是很重要的。 问题是，如何告诉设计师应该在哪里使用这些组件。...作为一名设计人员，我们应该提供关于应该在何处使用组件变体的指导。它可以是一个完整的页面设计，也可以是一个显示如何使用每个组件的简单图。 注意我是如何将每个变体映射到一个特定的上下文，而不是一个视口。...聊天列表 我在Facebook messenger上看到了这种模式。聊天列表根据视口宽度改变。我们可以使用CSS容器查询来实现它。 当有足够的空间时，清单将展开并显示每个用户的名称。...然后，如果容器宽度大于180px，将显示用户名。 另一个类似的用例是侧导航。我们可以切换导航项标签的位置，从在新行或旁边的图标。

2.2K30

旷视、北邮等国内团队包揽六项第一，COCO&Mapillary联合挑战赛结果公布

据数据显示，本届大会注册参会人数近 3200 人，收到论文投稿 2439 篇，其中接收 776 篇（31.8%）。...COCO 数据集针对全场景理解而设计，意在促进物体检测研究发展。 Mapillary Vistas 是新近推出的街景集图像数据集，专注于图像的高阶语义理解，推动自动驾驶和机器人导航等领域的技术落地。...本届在 ECCV 2018 上的 COCO + Mapillary 联合挑战赛，包含 4 项 COCO 比赛、2 项 Mapillary 比赛，共计 6 个赛项。...从 COCO 数据集 Detection Leaderboard 上我们可以看到，港中文 - 商汤联合实验室 MMDet 团队、旷视科技团队在 COCO 实例分割赛项上比分接近（上图中旷视科技团队与 MMDet...虽然其他 COCO 赛项得分还未显示在 Leaderboard 上，但我们可以从 COCO + Mapillary 联合挑战赛官网公布的 Workshop 日程上看出： COCO 关键点检测赛项：旷视科技第一

58930
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

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

    它类似于 @media查询，不同之处在于它根据容器的大小而不是视口的大小进行判断。 我们使用创建响应式设计时，通常使用媒体查询根据视口的大小来更改文档布局。...但是，许多设计都有一些通用组件，这些组件会根据其容器的可用宽度来更改布局。 这可能并不总是与视口的大小有关，而是与组件在布局中的放置位置有关。 例如，以下组件可能显示在网站布局的窄或宽列中。...如果有空间，它将显示为两列，否则，我们希望将其堆叠显示。 上图中的左右两个组件，是同一个组件，功能上是完全一样的，只是要展示不同的布局。...但是，这并不能完全实现媒体查询在整个布局中的作用。 媒体查询使我们能够根据视口的范围来改变元素的大小。 当我们添加一个类或目标元素时，我们决定当对象在侧边栏中时，它必须使用堆叠布局。...在线演示demo集合 本文演示的 demo 的在线链接：https://codepen.io/rachelandrew/pen/NWdaxde 以及容器查询 demo 的大集合: https://codepen.io

    1.6K30

    乐视法拉第新车百万起步价，如何在市场立足？

    此次曝光的相关文件显示，富卓汽车与法拉第未来于2015年达成合作协议，富卓为法拉第提供座椅设计、测试等相关的服务，并收取共计 1100 多万美元的费用。...2016 年富卓又提出一项 290 多万美元的追加费用提案，也被法拉第采纳，最终双方的合作总金额高达 1390 万美元。...但是连10万美元的房租都支付不起，看来法拉第未来真的是很缺钱。 而这种糟糕的财务状况，也使得法拉第未来的产品研发深受影响。...比方说，今年4月发布的乐视超级汽车，该车的模型就是由法拉第汽车的设计团队在接到乐视方面的指示后，紧急赶制的。 ?...所以说，对于法拉第未来，这家集合了众多硅谷优秀人才的公司，发布量产车之后或许该好好考虑是否有必要继续与乐视汽车的合作，重新开始寻找投资方。

    44540

    3D图形渲染管线

    就像一个在同一时间内，不同阶段不同的汽车一起制造的装配线，传统的图形硬件流水线以流水的方式处理大量的顶点、几何图元和片段。 图2显示了当今图形处理器所使用的图形硬件流水线。...光栅化的结果是像素位置的集合和片段的集合。当光栅化后，一个图元拥有的顶点数目和产生的片段之间没有任何关系。例如，一个由三个顶点组成的三角形占据整个屏幕，因此需要生成上百万的片段。...允许这个阶段可能丢弃片段，这个阶段为它接收到的每个输入片段产生一个或不产生着过色的片段。...在本图中，两个三角形被光栅化了。整个过程从顶点的变换和着色开始。下一步，图元装配解读那从顶点创建三角形，如虚线所示。之后，光栅用片段填充三角形。最后，从顶点得到的值被用来插值，然后用于贴图和着色。...图6：形象化图形流水线 ---- 可编程图形流水线 当今图形硬件设计上最明显的趋势是在图形处理器内提供更多的可编程性。图7显示了一个可编程图形处理器的流水线中的顶点处理器和片元（像素）处理器。

    1.8K20

    ASP.NET MVC学习笔记06编辑方法和编辑视图

    上图中用到了DataAnnotations。Display属性指明要显示的字段的名 称（在本例中“Release Date”来代替“ReleaseDate”）。...第二个参数是要调用的操作方法的名称（在本例中， Edit方法）。最后一个参数是一个匿名对象 （anonymous object），用来生成路由数据 （在上图中，ID 为1 的）。...注意，视图模板在文件的顶部有 @model MvcMovie.Models.Movie的声明，这将指定视 图期望的模型类型为` Movie。...视图模板在文件的顶部有 @model MvcMovie.Models.Movie的声明，这将指定视 图期望的模型类型为 Movie。 ? 处理 POST 请求 回看前面的Eidt的Post方法。...ViewBag填入的操作方法: 参数“All”提供的项列表中的预先选择的。

    5K50

    论文翻译 | ORB-SLAM3：一个用于视觉、视觉惯性和多地图SLAM系统

    ,以牺牲召回为代价来提高精度.结果,系统在关闭循环和重用以前的地图方面太慢.我们提出了一种新的位置识别算法,首先检查候选关键帧的几何一致性,然后检查与三个可共视关键帧的局部一致性,这三个关键帧在大多数情况下已经在地图中...ORB-SLAM Atlas 第一个完整的多地图SLAM系统,能够处理视觉和视觉惯性系统,在单目和立体配置.地图集可以表示一组不连续的地图,并在其上平滑地应用所有的制图操作:位置识别、相机重新定位、闭环和精确的无缝地图合并...2 Merging maps（地图合并） 地图和融合成为新的活动地图.为删除重复点,将在的关键帧中主动搜索匹配项以查找的地图点.对于每对匹配,从中移除点,并且中的点不断累积已移除点的观测值.共视性和本征图通过添加边来更新...首秀是地图点融合：融合窗口由匹配的关键帧组合而成,检测到重复的点进行融合,在共视性和本质图中创建新的关联....,ORB-SLAM3将竞争方法的准确性提高了一倍多.在VINS-Mono的情况下,ORB-SLAM3在单个会话中获得了2.6的更好精度,在多个会话中优势上升了3.2倍,显示了我们的地图合并操作的优势.

    4.7K40

    SwiftUI 中掌握 ScrollView 的使用：滚动可见性

    在操作闭包内，我们获取可见标识符列表，并可以对可见项执行所需的操作。有时，视图需要在其可见性状态在 ScrollView 中发生变化时进行响应。...同样，当视图从可见状态转换为不可见状态，即显示的视口部分少于 10% 时，也会运行该闭包。...每个数字都显示在一个 Text 视图中，并有不同的背景颜色。...在操作闭包内，获取可见标识符列表并赋值给 visible 状态变量。onChange：监听 visible 状态变量的变化，并打印当前可见的项。...此外，在页面底部有一个视频播放器，当视频播放器出现在视口内时，它会自动播放，当其离开视口时，会自动暂停。总结今天，我们学习了如何跟踪 ScrollView 内特定视图的可见性，并监控可见标识符列表。

    22421

    移动端H5开发之页面适配篇

    最近开发并上线了一款H5项目，在这里想和大家分享一下关于项目中使用到的移动端适配技巧，如果对你们有所帮助的话，就多多点赞收藏各位看官老爷别着急，在讲页面适配之前，我们先来捋一捋viewport（视口）的概念...1.3 理想视口图片视觉视口，用户通过屏幕真实看到的区域我们可以通过调用 window.screen.width / height 来获取视觉视口大小1.4 页面适配方法综上所述，为了在移动端让页面获得更好的显示效果...下图为实现效果图片上面的代码会有一个最大变化的阀值，为designWidth也就是720px，当浏览器窗口的大小超过这个值时，就不再动态变化了，这个可以保证在pc上也能正常显示。...图片图片所以一倍的图片，在dpr为2的设备上会显示小一倍，然后flexible会针对这种情况整体缩放0.5，也就使图片正常显示。...这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值用于确保内容即使在非矩形的视区中也可以完全显示。

    7.6K92

    【前端探索】图片加载优化的最佳实践

    如果我们拿到的设计的切图，我们可以用tinypng或者智图，对图片进行尺寸修改和压缩。...使用懒加载的注意点 懒加载，就是没显示在视口内的图片，先不加载。所以我们需要注意下，不需要加载的图片，不要让它出现在窗口内。...常见的一个错误就是，img的样式，没有一个固定的高度，进入页面的时候，所有img都已经在视口中出现了，这时候vue-lazyload会认为这个img是需要加载图片的。...前一个页面有固定的高度，只有前8个图片会出现在视口，也只有前8个图片会加载。 后一个页面，所有图片都先出现在视口了，虽然最后视口中显示的还是只有8个，但是最后没出现的其他几十个图片也会先加载。...同时，前一个视口的界面稳定也更好。 总结 图片优化的点还有很多，今天思维导图中列举的点也没有全部介绍，感觉每个点都可以专门写一篇文章深究。

    69810

    【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )

    ( 网页大小 | 网页大小 > 设备大小 ) 布局视口 - Layout ViewPort 指的是 在 浏览器 中，用于 显示文档的区域大小和位置。...为了 使网页在 不同设备上 都能够 正确地显示和布局，开发者可以使用 响应式设计来根据设备的不同调整布局视口。...一些常用的技术包括 响应式设计 弹性布局和流体布局 使页面 在不同设备上自适应地进行布局和排版。...下图中 , 在下面的 视觉视口 中 , 网页只能被看到一部分区域 ; 3、理想视口 ( 网页大小 = 设备大小 ) 理想视口 - Ideal Viewport 指的是指在浏览器中，使 网页布局 和 显示最佳的视口大小...理想视口的大小 取决于 网页的内容和布局，通常应该 与布局视口的大小相同 。 通过设置理想视口，可以 使网页在不同设备上具有相同的布局和显示效果，无需进行缩放和滚动。

    1.3K30

    Access查询设计界面

    一、创 建 查 询 在创建查询时，在“创建”选项卡中，有选择查询向导和查询设计。通常是选择查询设计来创建，而查询向导则只是创建没有限制条件的简单查询。 ?...在不了解如何使用查询设计时，可以先通过简单查询来认识一下查询。 点击查询向导，可以选择新建查询的类型，包括简单查询，交叉表查询，查找重复项查询和查找不匹配项查询等。然后从选定的表中选择需要的字段。...这里得到的查询并不是一张新表，只是一个动态的集合。原始的数据依然存储在原来表中。将生成的查询删除，原始数据也不会丢失。...在界面上侧的图标，最左侧的视图有“设计视图”、“SQL视图”和“数据表视图”，可以在不同的视图中切换。 “运行”图标是设定好查询的条件之后，点击“运行”，在执行查询操作，以得到查询的结果。...在界面中间是相应的表格和字段。（多个表时会显示表关系。）

    3.2K10

    最新iOS设计规范四｜3大界面要素：视图(Views)

    四、集合（Collections） 集合主要用来管理一系列有序的内容，例如一组照片，并以可自定义和高度可视化的布局呈现。因为集合没有强制执行严格的线性格式，所以它特别适合显示大小不同的项。...在集合中，插入、删除或重新排序项目，都可以启用动画，并且还支持自定义动画。 当标准行或网格布局足够时，避免创建新的设计。集合应该是用来优化用户体验的，而不是成为关注的焦点。...如果你在滚动视图中显示页面控制元素，则需要关闭滚动视图中的滚动条以免为用户带来困扰。 不要在一个滚动视图中放置另一个滚动视图。...行可以被分隔为不同标记的部分，并且会有索引标记显示在屏幕右侧。页眉可以出现在一节中的第一项之前，页脚可以出现在最后一项之后。 ? 分组列表。...插入分组表不包含索引。插入的分组样式在常规宽度的环境中效果最佳。因为在紧凑的环境中空间较小，所以插入的分组表可能会导致文本换行，尤其是在内容本地化时。 ? 设计规范 注意列表的宽度。

    8.5K31

    模拟试题A

    2．下列描述深度缓冲消隐算法的特点中，正确的是（ ） A）从每个多边形出发，根据其对应像素深度大小比较，严格按自远到近顺序进行显示 B）以视区每个像素为处理对象，严格按自远到近顺序进行显示...C）从每个多边形出发，根据其对应像素深度大小比较，可按任意顺序进行显示 D）以视区每个像素为处理对象，可按任意顺序进行显示 3．下列消隐算法中，与其它三个算法所属消隐空间不同的是( )...，通常所谓“物体”是三维欧氏空间点的集合 B）一组三维欧氏空间点的集合都可看成一个（组）“物体” C）单个孤立的点不是“物体” D）一根直线段或单张曲面都是“物体” 3．不能很好地处理透明对象的消隐算法是...，所有对象都应转化为像素点来显示 D）在图形文件中，点、线、圆、弧等图形元素都要转化为像素点来描述 5．下面哪些措施能获得反走样效果？...,视区的四条边界为 ? 已知窗口内的一点(Xw,Yw)，则对应视区中的点（Xs,Ys）为Xs= ，Ys= 。 四、综合题(44′) 1.

    3.6K10

    如何在标准的机器学习流程上玩出新花样？

    在海康威视，很多的应用以前是放在后端的，但现在都在逐渐向往边缘端转移，所以我们有相当一部分的工作是在边缘端的深度神经模型以及工业机器人的配置上。 机器学习pipeline实践 ?...我们可以给定一个标注，输入更多信息量，比如一个人在图中的位置、关键点集合，甚至是一个非常稠密的网格。这是一个信息从少到多的过程，无论信息多复杂，在神经网络下都可以输出你想要的结果。...在测试中，我们希望小目标的分辨率能够在10像素以下，越小越好，因为越小越能体现算法的优势，而对于检测过程中的帧漏检，相比基于光流的显示聚合方法，隐式的信息聚合方法可以进一步的提高检出率。 ?...可以看到，无论在严重遮挡、远景，还是不规则的长宽比的配置下，这个方法还是有一定的优势。 ? 这是定性的一些结果，像图中这样检测难度非常大的情况也可以检测出，稠密的行人也没有漏检。...在我们推导的公式中，为每一层设计一个符合该层的放大因子或缩小因子，该因子取值由该层的误差输出和输入的比值决定。此方法可以在训练一个没有残差的一百层网络的初始阶段使用。 实验结果 ?

    52350

    iOS 9人机界面指南(四)：UI元素（上） - 腾讯ISUX

    4.2.3 集合视图 集合视图用于管理一系列有序的项，并以一种自定义的布局来呈现它们。 ?...由于集合视图的布局不是一个严格的线性布局，因此尤其适合用来展示一些尺寸不一致的项。 集合视图支持广泛的自定义，因此我们要尽量避免把心思都放在进行全新的设计上。...让视图中的项更容易选中。如果用户很难点中集合视图中的项，他们是不会愿意用你的应用的。...跟所有用户可以点击的UI对象一样，请确保你的集合视图中每一个项的最小点击区域有44×44pt，尤其是在iPhone上。 当你要让整个布局进行动态变化时，请务必谨慎。...使用对分视图控制器，在左侧主窗格展示固定的信息，在右侧详情窗格展示相关的详情或从属信息。以这种设计模式，当用户选择类主视图中的某一项，右侧详情窗格应当展示相应与这一项相关的内容。

    10.1K51

    unity3d自学教程_3D技巧

    简要介绍 Unity3D软件是由Unity Technologies公司提供的综合开发环境，主要面向游戏开发人员、虚拟现实设计师等，可用于创建诸如三维视频游戏、建筑可视化、实时三维动画等类型的多媒体内容...资源（Asset）：表示材质、纹理、音频文件、游戏对象等在开发过程中可使用的资源。 预制件（Prefab）：游戏对象和组件的集合，可以在场景中被复用。...面板右侧是以图标（或列表）形式显示的资源集合，其右上方放大镜图标所标识的输入框为资源查找框，可输入资源名称、类型和标签进行查找。...层级面板（Hierarchy）：列出当前场景视图中的所有游戏对象（GameObject）。一旦游戏对象在场景视图中被添加或删除，在层级视图中也将同步更新。...其各轴方向与视口坐标相同。屏幕坐标的本质是激活的视口坐标（相机有多个，每个相机有自己的视口坐标，屏幕对应于被激活相机的视口，因此屏幕坐标是被激活相机的视口坐标）。鼠标位置坐标属于屏幕坐标。

    3.3K20

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

    , 但是帧率的不稳定导致这个过程可能过早或过晚 为了最大化流水线效率, 游戏设计了双缓冲技术, 前缓冲是用于输入显示器的完整图像, 后缓冲是正在绘制的下一帧图像, 显示器按照周期从前缓冲获取内容, 程序渲染完画面就进行前后缓冲交换...: 游戏世界会同时在xy上滚动, 类似单轴滚屏, 需要同时准备四张背景图像用于显示, 而且背景不再使用链表来组建, 而是改为二维数组来决定目前需要显示哪些背景图像 砖块地图: 将背景切分为等分的方块,...方块可以集合在一张表单里然后按照索引进行查找, 此时游戏世界由精度更高的二维索引数组构建, 一般储存为外部文件然后按需读入....将场景变换到相机坐标系所用的变换矩阵称为观察矩阵 投影坐标系: 有时称视口坐标系. 将自定义的视体变为标准视体的过程, 变换后的原本自定义视体中的内容会变换到标准视体中....漫反射项+高光项得到 环境光项是直接附加的一个常数 漫反射项是颜色乘上一个权重, 权重是法线方向与光照方向的点乘 高光项也是颜色乘权重, 权重是视线方向与光照方向的半程向量(相加然后单位化)与法线方向的点乘

    4.2K31

    白话GNN原理（一）

    三、数学描述与相关定义 图由节点集合和边集合组成。表示节点的所有邻居节点，表示和节点相连的所有边。表示节点的特征向量，表示连接和节点的边的特征向量，表示整个图的特征向量。...二、上式支持有向图，只要在中加一项表示方向即可。三、,可能依赖于节点，简单来说每个node都有属于自己的,，论文中的模型为了简化，并不考虑这一点。...不想看推导就记住这个有趣的事实：若把某国的地图缩小后印在该国领土内部，那么在地图上有且仅有这样一个点，它在地图中的位置也恰巧表示它所落在的土地位置。...四个节点经过次的迭代(是不是有点RNN即视感)，最终通过函数得到最终向量，如下式: 四、学习算法 回顾下训练数据的定义，有三元组，就可以定义损失如下损失函数： 现在就可以前向传播和梯度下降了，...线性GNN 这样设计保证了在任意下能收缩到一个恒定的向量。 2. 非线性GNN 也使用mlp，但是这样无法保证了在任意下能收缩到一个恒定的向量，所以损失函数需要加正则项。

    2.2K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券