视口

最新推荐文章于 2024-10-10 17:42:11 发布
最新推荐文章于 2024-10-10 17:42:11 发布
阅读量327 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47123532/article/details/116451247
版权

1.视口概念

描述：视口就是视图窗口的简称，页面中视口大小实际上就是HTML元素的显示大小。
说明：页面想要在移动端加载必须进行视口的适配，如果不对页面进行调整 ，那么默认页面在移动端加载的时候，都认为页面视口宽度为980px。

为什么是980？
    很早之前，电脑的分辨率比较低，写一个电脑端的网站都是980px。
    为了让980px的网站可以在手机完美显示出来，人为地把这个虚拟容器的宽度定了980px。
    
iphone6/7/8宽度是375
iphone5宽度是320
iphone6/7/8plus它的宽度是414

    上面的320px  375px   414px，指的是手机的宽度（设备独立像素，和我们手机的分辨率不是一回事）

    在真实开发中，通常会以iphone6作为标准。  
在开发时，我们就以手机宽度为主。

视口（viewport）是用来约束网站中最顶级块元素<html> 的，即它决定了<html>的大小
在PC设备上viewport的大小取决于浏览器窗口的大小，以CSS像素做为度量单位。

2.设置视口

样例：

    

3.PC端到手机端

 1）把电脑端的网站放到虚拟容器中，这个虚拟容器的宽度是980px，这个980是人为规定的，手机在出厂时就设置好了。

 2）第二步，就是把这个虚拟容器放到手机里 

4.盒子

写一个盒子：
    200*200盒子。
    在PC端：逻辑像素和物理像素一一对应    同一个盒子在不同的手机中，大小是不一样的。

  如果不想让盒子被压缩，你需要设置虚拟容器的大小。如果设置成和手机的宽度一样的，这样，这个盒子在所有的手机都不会压缩了。

结论：只要我们去写手机端的页面，必须要设置视口大小。

 

 

 

区分浏览器视口的尺寸 （字节2020校招）
qq_46179838的博客
09-30 1463
下面开始区分 一、clientWidth和clientHeigh 、 clientTop和clientLeft 1，clientWidth的实际宽度 clientWidth = width+左右padding 2，clientHeigh的实际高度 clientHeigh = height + 上下padding 3，clientTop的实际宽度 clientTop = boder.top(上边框的宽度) 4，clientLeft的
viewportwidth.js:一种确定准确的跨浏览器视口宽度的解决方案
06-20
视口宽度.js 用于确定准确的跨浏览器视口宽度的解决方案。 更新 03/07/2015 Chrome、Opera、Safari 和 Firefox 都更新了渲染引擎，以在此问题上保持一致。 这使得这个库的使用最少，这是一件好事。 我宁愿让浏览器始终呈现，然后必须修补问题。 window.innerWidth可以在这些浏览器中一致使用以获取视口宽度。 Chrome 40+ Safari 7.1+ 火狐 36+ 歌剧 27+ 浏览器 9+ 为什么我需要这个？ 有时您希望将 JavaScript 功能与 CSS 媒体查询断点同步。 使用 JavaScript 检查视口宽度时，不同的浏览器会报告不同的值。 您可以 Webkit 处理媒体查询宽度/高度的方式与大多数其他浏览器不同。 在 Chrome 和 Safari 中，如果页面上存在滚动条， window.innerWid
css3的视口宽度
qq_38874697的博客
11-25 927
CSS3中的视口宽度 vw：1vw等于可视窗口宽度的1%。 vh：1vh等于可视窗口高度的1%。 vmin：选取vm和vh中最小的一个。 vmax：选
认识视口的宽度-----vw
weixin_57375608的博客
08-31 503
vw-视口的宽度
html移动Web开发----优化浏览器视口宽度设置
weixin_33743880的博客
06-13 514
为什么80%的码农都做不了架构师？>>> ...
UE5关卡视口操作全指南：掌握视口导航与事件处理
10-09
在Unreal Engine 5（UE5）中，关卡视口（Level Viewport）是编辑器中的核心组件，它允许开发者直观地查看和编辑游戏世界。关卡视口不仅提供了一个实时的3D预览窗口，还支持多种操作，如导航、选择、变换对象等。此外...
react-native-inviewport:检测组件是否在设备视口中
04-30
React本机视口 检测组件是否在设备视口中。 我基于以下内容： : 进行了一些细微修改。 安装 sudo npm react-native-inviewport@latest --save 用法示例 假设您已经设置了组件，这是一个简单的示例。 checkVisible ...
视口比例.lsp 源码
09-12
创建与更改视口比例-源码！ 创建与更改视口比例-源码！ 创建与更改视口比例-源码！ 创建与更改视口比例-源码！
vue-in-viewport-directive:Vue 2指令，当元素是视口时添加CSS类
04-28
Vue在视口指令中 Vue 2指令可根据元素在视口中的当前位置在其宿主元素上设置CSS类。 这些类是： in-viewport -元素的某些部分在视口内 above-viewport -元素的某些部分在视口上方 below-viewport -元素的某些部分...
使用视口元标记
04-05
"使用视口元标记"这一主题就是解决这个问题的关键技术之一。视口元标记（Meta viewport tag）是HTML5中引入的一个重要元素，它允许开发者控制在移动浏览器上展示网页的方式，确保网页能在不同尺寸的屏幕上正确显示。...
【每日知识】视口
qq_46580087的博客
02-11 1211
今天我们说到视口，视口在响应式设计中是一个非常重要的概念。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 在移动端浏览器中存在两种视口： 一是可见视口，即设备大小； 二是视窗视口，即网页宽度。 设备屏幕是414pxd 宽度，在浏览器中，414px的屏幕能够显示1200px 的内容。那么，414px 就是可见视口的宽度，而1200px 就是视窗视口的宽度。 为了显示更多的内容，浏览器会通过
HTML5开发手机应用--viewport的作用-模拟窗口一直显示980px
chuncuan2581的博客
10-31 535
　 “viewport”，翻译为中文可以叫做“视区”，大家都知道移动设备的屏幕一般都比PC小很多，webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上，默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度），也就是说当我们加载一个普通网页的时候，webkit会先以980像素的...
视口单位了解
a242424242424的博客
04-23 141
1vw = 1/100 视口宽度，如果视口的宽度是 375px，那么 1vw = 3.75px。1vh = 1/100 视口高度，如果视口的高度是 667px，那么 1vh = 6.76px。vw和vh是css中的一个相对长度单位，被称之为视口单位。
CSS视口单位及长度单位
Gloria的博客
12-16 1533
CSS视口单位及长度单位CSS长度单位绝对长度单位相对长度单位认识视口单位（ Viewport units )px（像素）em（相对长度单位）rem%vw和vhvwvhvmin和vmax视口单位应用场景总结 CSS长度单位 绝对长度单位 绝对长度单位表示为一个固定的值，不会改变。不利于页面渲染。 in------英寸 cm------ 厘米 mm-----毫米 pt -----点(Point)，...
三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）...
weixin_30780649的博客
01-13 236
Window 尺寸 有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、...
移动端三个视口
weixin_30788619的博客
07-06 403
转载：http://www.cnblogs.com/wmmang-blog/p/4708351.html 本文记录学到的有关视口的内容，不足之处请指正。 1、视口 有时会使用百分比来声明宽度,如： html,body{} div{width:30%;} 假设div是body的子元素，这段css就表示该div占body宽度的30%.body没有显示声明宽度...
html中视口单位是怎么用
servepeople的博客
10-10 611
vw和vh：用来基于视口的宽度和高度，灵活设置元素的宽高、间距等。vmin和vmax：在不同的屏幕方向（横向或纵向）上，选择视口宽度和高度中较小或较大的值。通过视口单位，你可以让网页的布局和样式更加响应式，适应不同屏幕的大小。这对于需要在手机、平板和桌面设备上展示自适应内容的网页来说非常有用。
什么是视口
m0_73749787的博客
10-20 1392
一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px。在布局过程中只要使用 rem 设置元素的尺寸，在改变 rem 的基准值 html 的字体大小的时候，页面上的元素将等比例缩放实现适配。在PC端，正常的视口宽度就是整个浏览器的窗口可视区的宽度，会随着浏览器窗口大小的重置而缩放；
视口地址
最新发布
03-21
<think>好的，我现在需要处理用户关于视口（viewport）地址、使用方法或定义的查询。首先，我得明确用户的问题范围，可能涉及视口在不同上下文中的含义，比如Web开发中的视口概念，或者图形编程如OpenGL中的视口设置。用户提到的引用资料包括gl.viewport、postcss-px-to-viewport、Preact Scroll Viewport以及EXTJS中的XType组件，这些都需要涵盖到。 首先，我要区分不同领域的视口定义。在Web前端开发中，视口通常指浏览器中用于显示网页的区域，涉及响应式设计，比如通过<meta name="viewport">标签控制移动端布局。而OpenGL中的gl.viewport()函数用于设置渲染视口的位置和尺寸，这在图形渲染中很重要。另外，用户提到的postcss-px-to-viewport是一个将像素单位转换为视口单位的工具，属于响应式设计的一部分。Preact Scroll Viewport可能是一个用于处理滚动视口的库，而EXTJS中的XType用于定义组件，可能与视口组件相关。 接下来，需要整理每个引用资料中的相关内容。引用[1]详细说明了gl.viewport()的参数和应用场景，比如多视口渲染和调整渲染区域。引用[2]涉及使用postcss-px-to-viewport进行移动端适配，将px转换为视口单位（vw/vh）。引用[3]提到Preact Scroll Viewport的安装和基本使用，可能用于优化滚动性能。引用[4]中EXTJS的XType定义组件，可能包括视口组件的使用方法。 然后，要确保回答结构清晰，分点解释视口的定义、使用方法，并覆盖不同技术栈中的应用。需要将OpenGL、Web前端、响应式设计、特定库（如Preact、EXTJS）中的视口用法分别说明，同时引用提供的资料作为支持。 需要注意用户可能混淆了“视口地址”这一术语，可能是指视口的位置或配置，比如在OpenGL中的视口位置参数，或者在Web中的视口设置。需要明确每个上下文中的具体含义，避免歧义。 最后，生成相关问题时要覆盖各个应用场景，比如性能优化、多视口应用、单位转换、滚动处理等，确保问题具有针对性和扩展性，帮助用户深入理解。</think>### 视口（Viewport）的定义与使用方法 #### 1. **视口的定义** 视口（Viewport）是用于定义渲染或显示区域的技术概念，在不同场景下有不同的含义： - **图形渲染（如OpenGL）**：视口是渲染目标（如屏幕或窗口）的一个子区域，通过设置视口位置和尺寸控制绘制内容的显示范围[^1]。 - **Web开发**：视口指浏览器中用于显示网页内容的可视区域，尤其在移动端通过`<meta viewport>`标签控制页面缩放和布局[^2]。 - **响应式设计**：通过视口单位（如`vw`、`vh`）实现元素尺寸的动态适配。 --- #### 2. **视口的使用方法** ##### 2.1 OpenGL 中的视口设置 在图形编程中，`gl.viewport()`用于设置视口参数，语法如下： ```javascript gl.viewport(x, y, width, height); ``` - **参数说明**： - `x`和`y`：视口左下角的坐标（像素单位）[^1]。 - `width`和`height`：视口的宽度和高度[^1]。 - **应用场景**： - 分屏渲染（如游戏中的小地图）[^1]。 - 动态调整渲染区域（如窗口缩放时）。 ##### 2.2 Web 前端中的视口配置 - **HTML 元标签**：控制移动端视口行为。 ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` - **CSS 视口单位**： ```css .container { width: 100vw; /* 视口宽度的100% */ height: 50vh; /* 视口高度的50% */ } ``` ##### 2.3 响应式单位转换工具 使用`postcss-px-to-viewport`将固定像素（`px`）转换为视口单位（`vw`/`vh`）： 1. 安装插件： ```bash npm install postcss-px-to-viewport ``` 2. 配置参数示例： ```javascript { unitToConvert: 'px', viewportWidth: 750, // 设计稿宽度 unitPrecision: 5, viewportUnit: 'vw', fontViewportUnit: 'vw' } ``` ##### 2.4 框架中的视口组件 - **Preact Scroll Viewport**：优化长列表滚动性能。 ```javascript import { useScroll } from 'preact-scroll-viewport'; // 使用视口滚动组件包裹列表 ``` - **EXTJS 视口组件**：通过`xtype`定义全屏布局。 ```javascript xtype: 'viewport', layout: 'fit', items: [{ /* 内容组件 */ }] [^4] ``` --- #### 3. **核心应用场景** - **图形渲染**：多视口叠加（如AR/VR中的分屏显示）。 - **移动端适配**：通过视口单位实现元素自适应。 - **复杂UI**：EXTJS视口组件管理全屏布局。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值