本文并非原创，只是真心觉得好，特别是图解的很到位，我在js中经常会用到，就记下来，与大家分享。...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素。...obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型，单位像素。...clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素。...obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型，单位像素。...clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
维基百科①的解释为： 在计算机图形学理论中，当将一些对象渲染到图像时，存在两个类似区域的相关概念。(视口和窗口) 视口是一个以特定于渲染设备的坐标表示的区域（通常为矩形）。...视口范围内的图像会以剪切的形式，投影到到世界坐标窗口中，完成图像的可视化展示。 在 Web 浏览器中，视口是整个文档的可见部分。如果文档大于视口，则用户可以通过滚动来移动视口。...白话描述一下： ●计算机把图像渲染到显示器的过程中，会先把图像画在一个逻辑层的画布上，然后从这个画布中框选一部分，将其投影到显示层。 ●这个选框就是视口，显示层就是窗口。...如果浏览器和针对 PC 制作的网页都不做任何处理，那么在窄屏设备上加载网页，我们看到的效果便是默认显示网页的左上角部分，然后通过水平和竖直方向的滚动来浏览网页的其他部分。...●在 Web 浏览器术语中，它指的是您正在查看的文档中当前可在其窗口中显示的部分（如果以全屏模式查看文档，则指的是屏幕）。在滚动到视图中之前，视口外部的内容在屏幕上不可见。
转载自 祥的博客 原文链接：https://blog.csdn.net/humanking7/article/details/86108269 ---- 文章目录 @[toc] 1.使得Qt界面的控件随窗口的变化而变化...Qt窗口大小和位置 Qt窗口大小、位置及其大小改变引起的事件QResizeEvent 1.使得Qt界面的控件随窗口的变化而变化 1.1....窗体指针； ui.lab_central就是中央的那个随窗口变化而变化的QLabel控件。...注意： 其中获取窗口大小有3种方式： 用frameGeometry().size()：窗口会显示不全，滚动条显示不了； 用geometry().size()：滚动条显示一半，显示的不好； 用ui.lab_central...那么问题来了，需要对Qt窗口有个大致的了解。 2. Qt窗口大小和位置 ?
背景图片 相关CSS背景图片background:url(logo.png)no-repeat;背景图片大小缩放: 宽 高background-size:100%100%;绝对定位position:absolute...background-repeat: no-repeat;背景图片 终极缩放大法object-fit: cover;cursor: pointer;background-attachment用来设置背景图片是否随页面一起滚动可选值...：不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素background-attachment: fixed;scroll，默认值，背景图片随着窗口滚动fixed，背景图片会固定在某一位置...，不随页面滚动背景图像偏移, 如下: 水平(宽度.左右平移) 垂直(高度.上下)background-position: -50px -50px;背景图片默认是贴着元素的左上角显示通过background-position...，则图片会向左移动指定的像素 第二个是垂直偏移量如果指定的是一个正值，则图片会向下移动指定的像素如果指定的是一个负值，则图片会向上移动指定的像素css处理文字不换行、换行截断、溢出省略号单行文字超出显示省略号
不过，你可以通过s=或size=参数传递一个值（图像是正方形的），动态规定Gravatar图像大小。...如果电子邮件地址哈希值没有对应的图像，则返回404响应（文件没有找到） mm： 简约、卡通风格的人物轮廓像（不会随邮箱哈希值变化而变化）。...identicon：几何图案，其形状会随电子邮箱哈希值变化而变化。 monsterid：程序生成的“怪兽”头像，颜色和面孔会随会随电子邮箱哈希值变化而变化。...wavatar:：用不同面容和背景组合生成的面孔头像。 retro：程序生成的8位街机像素头像。 ? ? ? ? ? ? ? ? ? ? 强制显示默认头像 出于某些原因，你可能需要强制显示默认头像。...比如下面这个URL请求的是200像素大小，分级为G或者PG级的Gravatar头像，如果对应的邮箱哈希值没有头像，则默认返回404响应。
scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。 ...local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。 ...border-box： 从border区域（含border）开始显示背景图像。 content-box： 从content区域开始显示背景图像。...scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。 ...local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。
与内容相关的图片，通常也需要响应式，它们的大小往往随viewport改变。对于这类图像，还有更好的处理方法。 二、可变宽度的图像：基于viewport选择 1....在viewport宽度小于960像素时，使图像的宽度为viewport宽度的75％。当viewport大于960像素时，使图像的宽度为640像素。 vm ? 当处理宽度的时候，%单位更合适。...占满宽度的元素: % > vw 正如我所提到的，vw单位根据视窗的宽度决定它的大小。然而，浏览器是根据浏览器的窗口计算视窗大小的，包括了滚动条的空间。...如果页面延伸超过视口的高度——滚动条出现——视窗的宽度将会大于html元素的宽度。 因此，如果你将一个元素设置为100vw,这个元素将会延伸到html和body元素范围之外。...滚动条的问题也不是一个问题，因为现在大多数页面通常不会有水平滚动条。 vh应用 全屏背景图片 vh单位一个典型的用途是用来创建一个横跨整个屏幕高度和宽度的背景图片，不管设备的大小。
务必需要注意的是fixed是针对浏览器窗口定位，而非父级。...–webkit-transform-style: preserve-3d，会对fixed定位造成影响，在向下滚动之后，fixed定位的内容位置会发生变化。在PC端，也会有布局上的影响。...如果美工不靠谱，那很建议你提前跟他沟通一下，以防止1080像素大小下的设计图，字体出现了12、16像素的大小…… 使用rem进行制作的时候，通过JS的控制，rem是随设备宽度变化而变化的。...如果想在320像素的设备宽度下，保证12像素的字体大小，在宽度1080像素的设备上，字体最少为：12 / 320 * 1080 = 40.5 。也就是最少要设置为42像素的字体大小。...（注意，最小字体是12像素，不能再变小；另外字体大小都需要是偶数）
定位（position为absolute/relative），offsetParent取父级中最近的元素 obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分...= border-width*2+padding-left+width+padding-right obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分...，包括padding，不包括滚动条、border scrollHeight 获取对象的滚动高度，对象的实际高度； scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离...scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth 获取对象的滚动宽度 3. client client指元素本身的可视内容，不包括overflow...被折叠起来的部分，不包括滚动条、border，包括padding clientWidth 对象可见的宽度，不包括滚动条等边线，会随窗口的显示大小改变 clientHeight 对象可见的高度 clientTop
outerWidth() 方法返回元素的宽度（包括内边距和边框）。 outerHeight() 方法返回元素的高度（包括内边距和边框）。...js获取尺寸的方法 clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。...Window 尺寸 有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。...包含上面的浏览器地址等所有上面的部分) screen.availHeight - 可用的屏幕高度(不包含下面的任务栏，包含上面的浏览器地址等所有上面的部分) screen.height-屏幕高度（包含整个屏幕，如电脑的大小是...2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位。
，有“省略/空格”时，不能显示任何文档； name：窗口名称/target特性； features：窗口特点： channelmode=yes|no|1|0 是否使用剧院模式显示窗口。...fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。 默认是 no。处于全屏模式的窗口必须同时处于剧院模式。 height=pixels 窗口文档显示区的高度。以像素计。...left=pixels 窗口的 x 坐标。以像素计。 location=yes|no|1|0 是否显示地址字段。默认是 yes。 menubar=yes|no|1|0 是否显示菜单栏。...resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。 scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。...width=pixels 窗口的文档显示区的宽度。以像素计。
moveBy是接收当前位置在这俩个方向上移动的像素值。 窗口大小 所有浏览器都支持四个窗口大小的属性。 outerWidth，outerHeight是浏览器窗口自身的大小，就是我们当前浏览器的大小。...这个还挺实用的，我们可以通过媒体查询来设置响应式，但有时候我们列表需要通过页面视口的宽度来判断是不是切换俩个还是切换四个，然后实现新闻列表的切换，我们在js肯定是要判断浏览器窗口大小的。...再提一点我们还可以使用resizeTo(),resizeBy()来调整窗口大小，但是这个用的不是很多，一般我们不会去主动调这个的，毕竟显示给用户的，如果我们设置个定时器让窗口自己变，那用户可能会砸电脑。...// 相对于当前视口向下滚动 80 像素 window.scrollBy(0, 80); // 相对于当前视口向右滚动 40 像素 window.scrollBy(40, 0);...; 这个也挺有用的，尤其手机端，我们需要网页头部的一直显示在页面顶部，一到网页顶部头部背景颜色是透明的，滚动后背景颜色变成白色，就可以通过js来判断，让它移动到一定位置的时候背景颜色改变。
event对象位置信息获取 先总结下区别： event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。...，会随窗口的显示大小改变 obj.clientHeight = (height + padding) //元素的高 clientTop、clientLeft 这两个返回的是元素周围边框的厚度...，包括这个元素没显示出来的实际宽度，包括padding，不包括滚动条、border scrollWidth 获取对象的滚动宽度，对象的实际宽度； scrollHeight 获取对象的滚动高度... scrollLeft 已滚动过去的宽度 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离...js中getBoundingClientRect 当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。
password”两种类型 name：为文本框命名，方便后台ASP和PHP使用 value：文本框默认值，一般起提示作用 2....处理使用 name：为控件命名，以备后台程序ASP和PHP使用 checked：checked="checked"时，此选项默认被选中 注意：同一组的单选按钮...）本身 它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小， 因此固定定位的元素会始终位于浏览器窗口内视图的某个位置...像素 像素为什么是相对单位呢？...因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”） 2. em 假定 font-size设定 14px，那么 1em=14px 3.
left : document.documentElement.scrollLeft || document.body.scrollLeft; } } 跨浏览器获取可视窗口大小...//跨浏览器获取可视窗口大小 function getWindow () { if(typeof window.innerWidth !...通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。 同步加载流程是瀑布模型，异步加载流程是并发模型。...五、PageX和clientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点...,随滑动条移动 而变化.
该方法会截取页面的屏幕截图，并根据该特定元素的大小和位置进行裁剪。 如果该元素被其他元素覆盖，则在截图上实际上不可见。 如果该元素是可滚动容器，则截图上只会显示当前滚动的内容。...scale Union["css", "device", None] 设置为"css"时，截图上每个CSS像素将具有一个实际像素。对于高DPI设备，这将使截图保持较小的大小。...不适用于jpeg图像。默认为false。 full_page Union[bool, None] 为true时，截取完整可滚动页面的屏幕截图，而不是当前可见的视口。默认为false。...scale Union["css", "device", None] 设置为"css"时，截图上每个CSS像素将具有一个实际像素。对于高DPI设备，这将使截图保持较小的大小。...如果该元素是可滚动容器，则截图上只会显示当前滚动的内容。 该方法会等待可操作性检查，然后将元素滚动到视图中，然后再进行截图。 如果该元素已从 DOM 中移除，则该方法会抛出一个错误。
显示分辨率列表：https://zh.wikipedia.org/wiki/显示分辨率列表 下图是不同分辨率下的图像显示 ?...通常情况下，每英寸像素值越高，屏幕能显示的图像也越精细。如上面分辨率的图显示。...在尺寸较大的设备中，在这些设备上，应用显示区域不一定是全屏的，viewport 是浏览器窗口的大小。 在大多数移动设备中，浏览器是全屏的，viewport 是整个屏幕的大小。...在全屏模式下，viewport 是设备屏幕的范围，窗口是浏览器窗口，浏览器窗口大小小于或等于视口的大小，并且文档是这个网站，文档的大小可比 viewport 长或宽。...初始视口指的是任何用户代理和样式对它进行修改之前的视口。桌面浏览器如果不是全屏模式的话，一般是基于窗口大小。 在移动设备上（或者桌面浏览器的全屏模式），初始视口通常就是应用程序可以使用的屏幕部分。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
