视口

2024-11-21说说你对`<meta>`标签的理解
<meta>标签是HTML文档头部的一个重要组成部分，它提供关于HTML文档的元数据。元数据不会显示在页面上，但会被浏览器、搜索引擎和其他网络服务使用。它们用于指定字符集、页面描述、关键字、作者、视口设置等等，对SEO和用户体验至关重要。以下是<meta>标签的一些关键理解：位
2024-11-20reactflow 中 useOnViewportChange 模块作用
1.响应视口变化的核心功能在ReactFlow中，`useOnViewportChange`是一个用于处理视口（Viewport）变化的钩子。视口是用户在界面上看到的包含流程图部分的区域，它的变化包括但不限于平移、缩放、旋转等操作。这个模块的主要作用是让开发者能够监听和响应视口的这些变化。2.执行
2024-11-18OSG开发笔记（三十二）：深入理解相机视口、制作支持与主视图同步变换旋转的相机HUD
前言深入理解相机视口，摸索相机视口旋转功能，背景透明或者不透明。本篇，实现了一个左下角旋转HUD且背景透明的相机视口。 Demo HUD相机的坐标抬头HUD就是通过投影矩阵来实现，具体可参看《OSG开发笔记（二十）：OSG使用HUD
2024-11-18Day09_单位转换-综合案例
Day09_单位转换-综合案例背景:前面我们已经把HarmonyOS生态系统中的PC端和移动端的项目进行了开发;但是我们目前使用的单位是px(像素)单位,是一种固定形式的布局,但是再实际开发的时候我们可使用的单位还是有很多的;本节课我们主要学习的就是常见的单位今日
2024-11-15css动态检测视口屏幕的尺寸
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>css动态检测屏幕的视口尺寸</title&g
2024-11-07[vant] 最新版使用vw布局+vant组件库兼容方案
1.安装vw插件npmipostcss-px-to-viewport-8-plugin--save-dev2.配置vite.config.jsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importAutoImportfrom'unplugin-auto-import/vite';importComponen
2024-11-06聊聊vue的 vue-intersect 插件
1.vue-intersect 插件vue-intersect 是一个Vue.js的插件，它提供了对元素的可视区（viewport）交集检测的功能，可以用来实现懒加载等效果。使用 vue-intersect 需要先安装它，然后在你的Vue项目中配置并使用。1.1.相关地址https://blog.csdn.net/gitblog_00963/article/det
2024-10-17ScrollView
目录新建效果展示参数解释代码示例新建选中或者创建新节点手动挂载或者使用快捷键(GameObject->UI->Scrollbar)创建脚本ScrollRect效果展示参数解释Content内容这是对需要滚动的UI元素（例如大型图像）的矩形变换的引用。Horizontal水平滚动启用水平滚动
2024-10-13height:100%,height:100vh什么区别呢
height:100%; 和 height:100vh; 是设置元素高度的两种不同方式height:100%;：这个属性会使元素的高度等于其父元素的高度。也就是说，元素的高度将会占据其父元素的百分之百高度。值为百分比时，实际的高度取决于其父元素的高度。如果父元素没有显式地设置高度，则 height:
2024-10-11CSS 中的常用尺寸单位
像素(px)：最常用的单位，相对于显示器的分辨率。1px等于屏幕上的一个点。例如：width:100px;表示宽度为100像素。百分比(%)：相对于父元素的尺寸。例如，如果一个元素的宽度设置为50%，那么它将占据其父元素宽度的一半。例如：width:50%;表示宽度为父元素宽度的50%。视口宽度(vw)
2024-09-26【Bevy实战】2D场景下Camera实践
Bevy，一个用Rust构建的令人耳目一新的简单数据驱动游戏引擎。如果你是一名Rust开发者，同时又对游戏开发比较感兴趣，那么Bevy一定是你会接触甚至是使用的游戏引擎。当然，本文关注的重点并不是来介绍Bevy，以及它的一些基本概念，关于这块的内容读者完全可以到Bevy的官网、Github主页进行学
2024-09-26大屏看板适配方案
1.由来宏观角度：大屏看板要刚好占满屏幕，不能留有空白区域，也不能出现内容溢出，或者出现滚动条的情形微观角度：内容必须跟着屏幕分辨率的变化而变化，分辨率大的内容跟着大，分辨率小的内容跟着小2.CSS自适应单位CSS中的自适应单位有2种：vw/wh和remvw/wh：100vw当前视口宽度，优点是无
2024-09-04css 中高度100%和100vh
‌100%和100vh的区别‌‌12在‌CSS中，height:100%表示元素的高度将与其父元素的高度相同。但是，要使height:100%生效，父元素必须具有明确定义的高度，例如固定高度值或相对定位。如果父元素的高度未被明确定义，那么height:100%将不会生效。另一方面，height:100vh表示元素的高度将占
2024-08-29IntersectionObserver实现监听dom进入浏览器视口
letimg=document.getElementsByTagName("img");constobserver=newIntersectionObserver(entries=>{//entries是被观察的元素集合for(leti=0,len=entries.length;i<len;i++){letentries=entries[i];//通过这个属性判断是否在视口
2024-08-21js面试题图片懒加载！
一、原理只加载可视区域内的图片，而那些还未滑动到可视区域的图片先不加载，直到用户滚动到这些资源即将可见的时候才进行加载。若一个页面有大量的图片资源，网页首次打开时，若同时加载完这些资源，需要消耗大量的时间，利用图片懒加载，先加载部分图片，既不会影响用户体验，又能大幅提升首
2024-08-19HTML5+CSS3学习笔记补充——移动端网页+Bootstrap框架
移动端网页和Bootstrap框架1.视口：用来约束HTML尺寸<metaname="viewport"content="width=device-width,initial-scale=1.0">2.二倍图：防止设计稿图片在高分辨率屏幕下模糊失真3.
2024-08-17CSS——弹性盒（flex）
一、弹性盒的简介 1、flex（弹性盒、伸缩盒）：是css中的又一种布局手段，他主要用来代替浮动完成页面的布局。 2、flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变。 3、弹性容器：要使用弹性盒，必须先将一个元素设置为弹性容器
2024-08-14如何判断哪些元素在视口下面
问题在一个滚动列表中，顶部有一个【全部置入】的按钮，点击按钮要将可视区域内的图片置入到页面中思路点击按钮时，循环遍历每个元素算出它的坐标-滚动条距离顶部的scrollTop通过IntersectionObserver观察者来判断哪些元素在可视区域内实现这次就使用IntersectionObserver来实
2024-07-29Vue3-如何自己写一个“返回顶部”功能
功能描述：在屏幕的右下角固定一个“返回顶部”按钮，只有当用户滚动屏幕一定程度后出现，否则隐藏。点击按钮，网页平滑的滚动到页面顶部。环境：Vue3,js，antd具体思路：1、给窗口挂载滚动事件，监听视口的滚动，当滚动距离超出设定阈值后，出现按钮。2、点击按钮，滚动窗口。具体代码：<tem
2024-07-26getBoundingClientRect 和 IntersectionObserver 的区别和用法
目录getBoundingClientRectIntersectionObservergetBoundingClientRectgetBoundingClientRect是一个DOMAPI方法，用于获取指定元素相对于视口的位置和尺寸信息。它返回一个DOMRect对象，包含了元素的左上角和右下角相对于视口的坐标。“图片懒加载”，这个词语想必大家再熟悉不
2024-07-21分辨率缩放比
win系统调整显示器缩放比与浏览器缩放比对webPC端项目的影响https://juejin.cn/post/7325647896048730153?searchId=202407212053040F1493DC6D415F8F770B 悟空和大王2024-01-201,048阅读5分钟专栏： js/ts/css相关 win用户为什么会手动调整显示器缩放比
2024-07-17移动端适配的基础概念
一、英寸一般用英寸描述屏幕的物理大小。如苹果SE4英寸，苹果XS6.5英寸，电脑显示器的22英寸上面的尺寸都是屏幕对角线长度。英寸和厘米的换算：1英寸=2.54厘米二、分辨率2.1像素像素即一个方块，具有特定的位置和颜色。像素可以作为图片和电子屏幕最小组成单元通常我们所
2024-07-0116-视口的理解
01布局视口和视觉视口02理想视口<metaname="viewport"content="width=device-width,initial-scale=1.0">通过width=device-width即布局视口的宽度等于设备的宽度，以此来达到效果视口中的其它值
2024-06-21UE5笔记-实现Lumen实时渲染GI下的的类UCanvasRenderTarget实现多场景/自定义分辨率/方位的渲染视口
默认的SceneCapture不能用于实时Lumen光照模式下为了实现实时渲染GI下的的类似于UCanvasRenderTarget2D类.可以参考GameViewport类的源码尝试使用UE的渲染逻辑和数据多渲染一份视口副本到直接的FSceneView上，封装一份UCaptureRenderTarget出来从而实现一些例如自定义分辨率的
2024-06-20Vue 3 + Element Plus实现PC和移动端兼容的技术探讨
在现代Web开发中，实现PC端和移动端的兼容性已经成为一个必备的技能。Vue3作为一款流行的前端框架，结合ElementPlus这个优秀的UI组件库，为我们提供了丰富的工具和解决方案。在本文中，我们将探讨如何使用Vue3和ElementPlus来实现PC和移动端的兼容性，并结合vh、vw等单位实现响应