- 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等单位实现响应
- 2024-06-10移动端适配和响应式页面中的常用单位
在移动端适配和响应式页面中，一般采用以下几种单位：百分比（%）：百分比单位是相对于父元素的大小计算的。它可以用于设置宽度、高度、字体大小等属性，使得元素能够随着父元素的大小自动调整。百分比单位在响应式布局中非常有用，特别是在设置容器的宽度时。视口单位（vw、vh、vmin、
- 2024-06-09从零手撕一个网页版图形编辑器之坐标变换（3）
本编辑器（土豆猫图形编辑器）社区版代码已开源，开源库地址：https://gitee.com/longhan13/lgxmap_community.git本文暂时中断前面章节的代码框架讲解，先讲解一下本编辑器所使用的坐标变换方法及涉及的相关代码，是本编辑器基础的基础。本编辑器所使用的坐标系为右手坐标系，既X正向水
- 2024-06-06个人向 godot 源码阅读 - 3 - MainLoop 以及 2D 视口
3-MainLoop以及2D视口godot默认的主循环类型为SceneTree,在之上则承载了godot中的重要概念之一节点树.SceneTree的源文件位于scene/main/scene_tree.cpp,SceneTree默认将会在Main::start()函数中被创建,然后被设置到OS的mainloop上,现在让我们来看看Scen
- 2024-05-28介绍图片懒加载的几种实现方法
在JavaScript中，懒加载（LazyLoading）主要用于延迟加载资源，例如图片、视频、音频、脚本等，直到它们真正需要时才加载。这样可以提高页面的加载速度和性能。以下是几种常见的JavaScript懒加载实现方式：1.监听滚动事件通过监听滚动事件来实现图片懒加载是一种传统并且常见的方
- 2024-05-14js 取滚动条 和视口大小
functiongetScrollSize(){if(window.pageXOffset){return{x:window.pageXOffset,y:window.pageYOffset}}else{return{x:document.body.offsetLeft+document.documentElement.offsetLeft,
- 2024-04-23CSS-vmin&vmax单位
vmin和vmax单位vmin是相对于视口宽度和高度中较小值进行计算，它的值为视口宽度和高度中的较小值的百分比。例如，如果视口宽度为800px，高度为1000px，那么1vmin等于8px（800px的1%）。vmax是相对于视口宽度和高度中较大值进行计算，它的值为视口宽度和高度中的较大值的百分比。
- 2024-04-18h5 自适应页面背景图无法自动适应的问题
有时候制作好自适应页面，上面用的是背景图，发现在手机中，宽度会出现不能100%显示的问题，虽然样式中我们使用了width为100%。加入以下语句<html><head><metaname="viewport"content="width=1200px">当只设置width属性值，而不指定initial-scale属性值时，大多数浏览器
- 2024-04-16移动端安全区域适配方案
前言什么是安全区域？自从苹果推出了惊艳的iPhoneX，智能手机界就正式步入了全面屏的新纪元。然而，这一革新也带来了一个特别的问题——那就是屏幕顶部的“刘海”和底部的“黑条”区域。这些区域犹如手机的“神秘面纱”，遮挡了一部分屏幕，给开发者带来了新的挑战。Android似乎对iPhon
- 2024-04-06移动端适配方案总结之vw
1、vw/vh是什么？vw是：viewportwidth视口宽度单位vh是：viewportheight视口高度单位实际开发中我们基本用vw；2.相对视口的尺寸计算结果1vw=1/100视口宽度1vh=1/100视口高度例如：当前屏幕视口是375像素，则1vw就是3.75像素，如果当前屏幕视口为414，则1vw就是4.
- 2024-04-06移动端基础
移动端基础一.了解二.视口1.视口形式2.视口标签3.viewport设置三.二倍图1.像素比2.多倍图3.背景缩放及使用（background-size）4.多倍图切图四.移动端开发选择1.单独制作2.响应式3.总结五.移动端技术解决方案1.初始化2.盒子模型3.特殊样式六.常见布局一.了解二.视
- 2024-03-07聊聊懒加载以及优化方案
我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。本文作者：霁明什么是懒加载（lazyloading）懒加载是一种将资源标识为非阻塞（非关键）资源并仅在需要时加载它们的策略。这是一种缩短关键渲染路径长度
- 2023-12-19记录--一行代码修复100vh bug
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助你知道奇怪的移动视口错误（也称为100vhbug）吗？或者如何以正确的方式创建全屏块？一、100vhbug什么是移动视口错误？你是否曾经在网页上创建过全屏元素？只需添加一行CSS并不难：.my-page{height:100vh}1v
- 2023-12-19一行代码修复100vh bug | 京东云技术团队
你知道奇怪的移动视口错误（也称为100vhbug）吗？或者如何以正确的方式创建全屏块？一、100vhbug什么是移动视口错误？你是否曾经在网页上创建过全屏元素？只需添加一行CSS并不难：.my-page{height:100vh}1vh是视口高度的1%，正是我们所需要的。但当我们在移动设备上测试时，就
- 2023-12-06前端开发-视口（布局视口、视觉视口、理想视口）
首先必须要明白一点：（假设手机分辨率3200*1420），css中的1px不一定等于实际屏幕的1px（这里有1420px）,系统会自动匹配一个最合适的比例（假设这个比例为3.5），用屏幕的3.5px去渲染css中的1px，也就是说，所有的显示屏幕，不管你的分辨率是多少，系统都会自动匹配一个最适合的比例（假设是5），用实际屏幕的
- 2023-11-20CSS 尺寸单位概述
在本文中，我们将探讨CSS尺寸单位的四大类别。我们将了解这些尺寸单位的用途、它们的最佳工作原理，以及如何在每种情况下选择最佳尺寸单位，从而在各种媒体和设备尺寸下优化我们的布局。关于CSS尺寸单位CSS提供了多种指定元素大小或长度的方式，其中一些更为直观。CSS单位可分
- 2023-11-20revit中绘制图纸
目标：在revit中可自定义操作图纸，用于测试二维批注内容直接在图纸此处鼠标右键进行图纸的将新建及编辑，可自己拖动视口到图纸，也可以自己复制视口--该点主要用于测试一个二维批注被多个图纸的多个视口截取 备注：在revit中同一个模型图纸不允许重名，同一个视口不允许被拖动到多
- 2023-11-20revit视口移动操作-快捷键
1、旋转—三维才有按住键盘shift键盘+滚轮（鼠标中间），移动鼠标可旋转2、放大、缩小：按住shift键盘，前后滚动可放大缩小3、移动：只需要按下鼠标滚动，移动鼠标4、选中：（1）点选：点击，可加Ctrl，shift可减选（2）框选：用鼠标框住，从右往左（反选，选中所有可使用）—从左往右（正选，部分不会被选中
- 2023-11-20revit中的修改图纸中视口的显示
一、对图纸中视口的缩放鼠标hover到图纸视口内双击进入视口，在空白处双击可退出视口。在进入视口内可以对图纸的缩放比例进行缩放，这样可以满足一个图纸内有多个视口。 二、对图纸中视口的裁剪第一步：在视口列表中，进入图纸对应的视口下，勾选左侧菜单第二步：在图纸中，进入对应图
- 2023-11-10Vue3（开发h5适配）
在开发移动端的时候需要适配各种机型，有大的，有小的，我们需要一套代码，在不同的分辨率适应各种机型。因此我们需要设置meta标签<metaname="viewport"content="width=device-width,initial-scale=1.0">移动设备具有各种不同的屏幕尺寸和分辨率，例如智能手机和平板电脑。为了提供更好的
- 2023-10-25cesium 相机视口
functionsaveView2(){varviewJson={//世界坐标（不直观）...viewer.camera.position,//弧度值（不直观）"heading":viewer.camera.heading,"pitch":
- 2023-10-17[学习笔记] 有关CSS响应式设计的单位
em和rem单位：em和rem是相对于元素的字体大小计算的单位。em单位是相对于父元素的字体大小，而rem单位是相对于根元素（通常是 <html> 元素）的字体大小。em和rem单位可以用于实现相对于字体大小的自适应布局。vw和vh单位：vw和vh是视口宽度和视口高度的百分比单位
- 2023-10-09h5基础
1.介绍1.1IPhone6的参数设备像素750*1334设备独立像素375*667屏幕分辨率750*1334ppi326一般设置的移动端最大和最小宽度min-width:320px;max-width:640px;1.2980布局视口980像素就是浏览器厂商设置的布局视口的初始宽度1.3数据共享的方法