因分辨率变化html页面布局跳动_分辨率的那些事

最新推荐文章于 2022-04-20 13:07:13 发布
最新推荐文章于 2022-04-20 13:07:13 发布
阅读量643 收藏
点赞数
文章标签： 因分辨率变化html页面布局跳动

3b7e25aecd029d5dccc76d39f4c579a5.png

Resolution(分辨率)

分辨率分很多种，这里主要涉及显示分辨率中的概念，图片分辨率等其他不过多展开，所以理解过程中不要将图片等涉及进来，这部分是为了后面视图和转换等概念提供基础。

Dots Per Inch (dpi)

每英寸像素点数，每英寸（2.54cm）长度内的像素点数，是打印机、鼠标等设备分辨率的度量单位。现在一些Android等显示器设备也使用dpi单位。

  • 最早电脑显示器ppi（非系统）和打印设备dpi是相等的（72 ppi）
  • 从技术角度说，“像素”只存在于计算机显示领域，而“点”只出现于打印或印刷领域
  • Android也使用dpi单位，和ppi等价的

726823fa2e1d34b50e4ea543f7951922.png

Pixel Density (ppi)

每英寸像素，又称像素密度，和dpi等价，表示打印图像或显示器单位面积上的度量单位， 相当于间接知道1像素的物理大小。 ppi受到 物理像素 和 屏幕尺寸 影响。

23ac27bd06d4b8018031755e7127fc1c.png

a7cdd3953caf92bfd76861fa7c2a5f89.png

例如iphone4 326ppi 表示每英寸（2.54cm）有326像素

Pixel (px)

像素，影像显示的基本单位，不是一个物理单位，1像素不一定等于1物理像素，可以通过 ppi/dpi 计算， 所以1像素在不同型号设备上物理大小是不一样的。

Retina Display

视网膜显示屏，正常观看距离下足以使人肉眼无法分辨其中的单独像素，在屏幕大小不变分辨率变大，像素密度提升，显示更加细腻，但是这会导致文字图片变小，所以 drp 2.0 时是使用4个像素替换原来1个像素

df9c04ea663a57f67a2e40e783baa55b.png

Physical Pixel

物理像素，也可以理解称原始像素，pc或moblie切换分辨率， 一般可以切换的最大逻辑分辨率是最适配的，也就是1:1适配物理像素， 其他分辨率 1逻辑像素 != 1物理像素

e62e78fe455149723e9c006f79fb921b.png

Device-independent Pixels (dip or dp)

密度独立像素，也称逻辑像素（Logical Pixel）、渲染像素（Rendered Pixels），不要和 px 概念混淆，android使用 pd 单位，ios上称 pt(point) 单位，pd和pt是等价的，是渲染出来的虚拟像素。

px = dp * (dpi / 160)

86daddd4dd2f5c434102e26a5d051d8c.png

7be5e7592ef39afcc4045dcbe14bcbbb.png

Point (pt)

点，这里 **与印刷和CSS中不是同一概念 (可能会有渊源)，**该单位在IOS中指 逻辑像素 单位，CSS pt单位后面会单独展开。

px = pt * dpr

0f699aad55350611ed2a265bd518a844.png

Device Pixel Ratio (dpr)

物理像素和设备独立像素(逻辑像素)的比值， 物理像素/逻辑像素 宽高比

dpr = 物理像素 / 逻辑像素

c421f8291aa7d7a815880ba6b3f2e29d.png

Screen Resolution

屏幕分辨率，最大的分辨率就是物理分辨率， 超出物理像素就会显示不下或者出现滚动条。

Graphics Resolution

显卡分辨率， 显卡分辨率和屏幕分辨率的交集 决定实际可以的分辨率。

Display Size

显示屏尺寸，显示屏尺寸会影响PPI

a516b760be1848b02a3c5cda854890fd.png

Viewport(视口)

可视区域窗口，如显示器、浏览器、webview等，其中将引用PPK提出的3个概念来理解viewport，这里不仅指显示器分辨率，还涉及web视口概念，讲解PC和Moblie（移动端）的区别。

下面讲到的属性将按照W3C标准，兼容性请到caniuse查询。

Web Viewport

f24a8c47e4d5f34937b7df359226d366.png

深度好文

Window

window 是一个包含DOM文档的窗口，并暴露给JavaScript，这里主要讲解 cssom-view 相关的。

列举一些属性：
窗口：

  • screen 与当前窗口相关的屏幕信息
  • outerWidth 当前窗口的宽度
  • screenTop/screenY 屏幕顶端到窗口的垂直距离
  • devicePixelRatio 当前显示器的物理像素和设备独立像素的比例

视口：

  • document 当前窗口所包含文档的引用
  • innerHeight 当前窗口文档可视口的高度
  • innerWidth 当前窗口文档可视口的宽度
  • pageYOffset/scrollY 当前文档在垂直方向已滚动的像素值

从上面可以看出window上的view主要是屏幕、窗口、文档相关的信息。

552e3e899fc69e119ed34f95c6f6a325.png

Document

document是表示载入页面的 DOM Trees。 document 接口描述了任何类型的文档的通用属性与方法，根据不同的文档类型（例如HTML、XML、SVG，...），还能使用更多 API，下面只涉及HTML DOM。

先来了解一下DOM，下面看一个HTML DIV继承图：

ca3b42c46e47fd894a4d449873ab8ad8.png

这个图表示继承关系 HTMLDivElement -> HTMLElement -> Element -> Node -> EventTarget

其中event、node、element都属于DOM基类实现，HTMLDivElement、HTMLElement（html接口，非指html元素，html是HTMLHtmlElement）是属于HTML DOM的实现。

  • [document.documentElement](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLHtmlElement) 指根元素，html中指html元素，html dom实现
  • [document.head](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLHeadElement) 指header元素，html dom实现
  • [document.body](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/body) 指body元素，html dom实现

了解document后更加易于理解document下面的dom。

DocumentElement

dom 根元素 html ，开始讲 documentElement 的 cssom-view

documentElement 继承于 HTMLElement，属性列表：

  • offsetTop 距离父节点顶部距离
  • offsetLeft 距离父节点左边距离
  • offsetWidth 元素 border+padding+scrollbar+width
  • offsetHeight 元素 border+padding+scrollbar+height

documentElement 继承于 Element，属性列表：

  • scrollTop
  • scrollLeft
  • ...

0bfca1a1d870fb1a002ed35589d8c7b0.png

9d7f935428f37901e08913a7145121ff.png

Body

继承于 Element

Note：排版模式不一样获取属性值会不一样，Quirks Mode模式是为了兼容ie6之前的非标准行为，例如： document.documentElement 在Quirks mode里面没有定义

Element

继承于 Element

Retina Display

在讲移动端 viewport 前，我必须再讲一下 Retina Display ，而这又涉及到 物理像素 和 逻辑像素 ，因为这将会影响 viewport 。

020916abca25daf1ebc63831bce15e80.png

5729b665290b27b58649c6642ad50b9f.png

用iphone来举例，iphone 6 逻辑像素 375*667 ，物理像素 750*1334 ，因此 dpr 是 2 ， 1逻辑像素 会渲染成 4物理像素 ，视觉上看起来就会更宽更高。

Layout Viewport

布局视口，为了phone screen上能像pc上一样展示，所以移动端浏览器设置默认宽度，因此有了 layout viewport ，而且不同浏览器 layout viewport 不一样。

How wide is the layout viewport? That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.

e84ecb790ec25715ec3dafdd90db35b9.png

如果页面 layout 宽度超过 layout viewport 宽度页面就会出现滚动条。

Visual Viewport

可视视口，用户可视的页面区域，用户可以放大缩小 visual viewport ，而且不影响 layout viewport ，不同设备分辨率也不一样。

当前缩放值 = 理想视口宽度 / 视觉视口宽度

db38fef9679c8dc222768347d6bc349a.png

Ideal Viewport

理想视口，使用 layout viewport 一般会感觉文字等太小，不是理想视口，因此浏览器厂家提出 ideal viewport 概念，理想视口就等于屏幕逻辑像素（dip），用户无需放大或缩放。

布局视口与理想适口保持一致：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">

f10c5fef6031048aca070bca6d38f079.png

CSS (单位)

可以参考w3c

Relative Length Units

相对长度单位

df44a7303075f63a9c3b62bb5667a506.png

Absolute Length Units

绝对长度单位

08f3eb66206c18342839679be56cbe0f.png

Adaptation(适配)

为什么要适配？

  • 不同机型逻辑分辨率不一样
  • 不同机型dpr = 物理分辨率/逻辑分辨率不一样

要怎么做？

  1. 减少分辨率种类，同一手机厂商物理分辨率会五花八门，但是逻辑分辨率很多机型却相同
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

将layout viewport和ideal viewport宽度保持一致，也就是逻辑分辨率宽度

  1. 适配逻辑分辨率和dpr

如何适配？

rem

我们看下 手淘方案 lib-flexible，已经不推荐

ee169c6d80369290ea756083804f2aee.png
  1. 设计稿是750px , css像素是750px , dpr=2 基本按750布局即可
  2. 动态生成meta标签及属性，devicePixelRatio=2的时候scale=0.5
  3. 计算出html的font-size = deviceWidth / 10，页面分成10份
  4. css尺寸 = 设计稿标注尺寸 / (750 / 10)，可以用less、sass等转换

vh、vw

随着浏览器兼容 viewport 长度单位，viewport 方案逐渐流行，但是此方案也不是完美的。1vw表示可视视口的1%，即将可视视口分成100份。

  • px单位转换公式 ($px / 375) * 100vw

更多 viewport 参考：如何在Vue项目中使用vw实现移动端适配

weixin_39567169
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
强制分辨率_xg_分辨率修改_修改_
09-30
修改分辨率，强制的哦，愁，修改窗口文件等等
因分辨率变化html页面布局跳动_前端响应式布局解决方案
weixin_39788740的博客
12-04 625
移动端页面布局的问题，在当今前端是比较常见的话题，因为不同终端设备的分辨率，dpr等不同，导致前端无法用单一的px值来将页面的元素固定，需要通过技术手段在不同的环境下进行适配，来保证页面最佳的可读性，这里将会总结一些常见的方案。百分比布局这是最早的布局解决方案，解决成本低，高效。将页面元素的宽度以百分比来进行设置，高度不变。缺点也显而易见，在例如ipad横屏下，页面被拉伸很多，造成视觉体验较差。M...
CSS 控制Html页面高度导致抖动问题的原因
weixin_30300523的博客
10-12 643
CSS 控制Html页面高度导致抖动，这类由高度导致页面抖动的问题，其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码： html,body{ overflow-y:scroll;}html,body{ overflow:scroll; min-height:101%;}html{ overflow:-moz-scrollbars-vertical;} 已经试验过了...
屏幕显示密度dpi_屏幕密度和DPI的对应关系
weixin_39968592的博客
02-05 2278
基本概念铺垫像素像素(pixel)为图像的基本单位，是一个抽象的采样，在很多情况下，它们采用点或者方块显示。每个像素可有各自的颜色值，可以采用RGB表示。单位面积内的像素越多代表分辨率越高，所显示的图像就会接近于真实物体。屏幕尺寸屏幕尺寸(Screen size)指屏幕的物理尺寸，一般用屏幕对角线长度表示，单位英寸(1英寸 = 2.54 厘米)。如小米4是5英寸。宽高比率宽高比率(Aspect R...
解决Html在不同分辨率下显示效果不一样的问题
qq_23260455的博客
09-14 4929
问题描述： 让导航栏重叠在轮播图上面，并且导航栏要是透明的状态，功能实现了，但是出现拖到分屏宽度就变了。 代码： 开始用的宽度设置都是px单位，后来改成百分比就可以自适应了。 原因分析： 百度看到HTML+CSS项目实践八：同一个HTML页面，在不同电脑上的显示效果不一样！解决HTML页面针对不同分辨率的问题 通过设置百分比长宽，对于不同分辨率的显示器上会自动适应大小。 ...
从Ubuntu Screen API得到屏幕信息及手机的方向信息
Elastic 中国社区官方博客
03-22 1295
我们知道对于一些手机应用来说，能够得到屏幕的尺寸信息已经屏幕的方向，那么对我们的应用的布局非常中．我们可以通过对这个事件的感知，进一步来对我们的应用的布局来重新调整．
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）
热门推荐
小菜吉的博客
02-28 2万+
这里是javascript中制作滚动代码的常用属性 页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; window.innerHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高..
因滚动条出现而导致页面晃动的解决方案
sinat_23668639的博客
10-29 1万+
这两天因为oa主页为了消除晃动的影响给body下的div加了一个{min-height:960}，可是产品对底部出现的大片空白不满意，而且如果换了超大屏幕这个最小高度还是会出问题，最后去网上百度了这么一个方法，下面的的代码加到CSS文件中就可以了，非常好用。  html{overflow-y:scroll;} overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内
fx.rar_分辨率 地震_反褶积_地震_地震分辨率_地震处理
09-24
FX反褶积 用于地震资料处理 提高地震分辨率 压制噪声
SupResolDemo.rar_matlab分辨率_分辨率提高_图像分辨率_图像增强 matlab
07-13
MATLAB编写的增强图像分辨率的程序，可以提高图像分辨率，使图像更加清晰。
设置分辨率_windows修改屏幕分辨率_
10-01
修改windows屏幕显示分辨率，方面程序中调用
SAR_simulation.rar_SAR 分辨率_radar_radar imaging_sar成像
07-15
SAR雷达成像仿真 基于MATLAB的三种不同的算法程序 分析频谱与分辨率
解决html中不同电脑分辨率下css定位出现位置偏移/错位的问题
m0_57454052的博客
04-20 3972
不同的电脑分辨率不同，有时候我们的笔记本默认分辨率是125%，会导致一些，在100%分辨率的定位正常的情况下，却在125%分辨率下错位 解决思路 ： 外部的div可以给一个相对比较安全的宽度比如1200PX，作为背景并且相对定位，然后里面的元素绝对定位，这样就OK了 使用媒体查询设置在不同屏幕下的不同的定位即可 @media screen and (max-width: 1600px) { //屏幕尺寸 小于1600px 下 .类名 { left: 67.5% !importan.
html出现滚动条页面闪动,css解决滚动条出现造成页面晃动的问题
weixin_39907157的博客
06-03 3075
窗体默认是没有滚动条的，而HTML的内容是自上而下加载，就会发生一开始没有滚动条，后来突然出现滚动条，此时页面的可用宽度发生变化，水平方向的内容会发生晃动，尤其是水平居中显示的内容，出现滚动条后会重新计算。解决方法：一、简单的做法是html {overflow-y: scroll;}当页面注定要出现滚动条的话，可以用此方法，让滚动条从一开始就显示出来，即使内容一屏能展示也会出现滚动条，这里有点不优...
QML怎么适配不同的设备
周翔的专栏
03-10 6048
前言做嵌入式和移动开发，不同的设备，不同的分辨率需要UI能够适配，这是一个很现实的问题。QML作为Qt中为UI而生的，使用QML一定要解决适配的问题。分辨率现在同一尺寸的屏幕，其分辨率也是不同，在QML中使用 anchors 进行相对的布局时，其是以像素为单位。现在有一个概念，叫做每英寸像素数目。当设备的PPI不同时，控件的大小不同，这可能导致，如果设计是在一个尺寸小PPI低的屏幕上设计，将程序放到
分辨率自动调节html,网页根据分辨率自适应
weixin_39891158的博客
05-30 2109
随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。【网页根据宽度自动调整的代码】首先，在网页代码的头部，加入一行vie...
html不同显示器布局全乱了,不同显示器分辨率，调用不同的css文件方法[经验总结]...
weixin_35937871的博客
06-16 1078
根据分辨率不同，调用不同的css文件方法不同浏览器调用不同CSS文件将以下JS代码放入和标签内，此段JS代码作用是辨别浏览器分辨率解释：var IE1024="";var IE800="";var IE1152="";var IEother="";引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.var Firefox1024=...
基于yolov5目标检测的跌倒检测数据集（voc格式）-上部
最新发布
05-07
基于yolov5目标检测的跌倒检测数据集（voc格式）——上部
html字体根据分辨率变化
05-30
可以使用CSS3中的媒体查询（Media Queries）来实现根据分辨率自适应的字体大小。媒体查询是CSS中的一个功能，可以根据设备的规格指定不同的CSS样式。例如，我们可以使用以下代码来设置在分辨率小于等于768px的设备上...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值