CSS浏览器的视图与坐标怎么实现
本篇内容主要讲解“CSS浏览器的视图与坐标怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS浏览器的视图与坐标怎么实现”吧!
我们提供的服务有:网站建设、做网站、微信公众号开发、网站优化、网站认证、瀍河ssl等。为成百上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的瀍河网站制作公司
像素(Pixel)
像素(pixel)是影像显示的基本单位,一个像素通常被视为影像的最小的完整取样。用来表示一幅影像的像素越多,结果更接近原始的影像。
分辨率(Image resolution)
分辨率(Image resolution)日常用语中之分辨率多用于影像的清晰度。分辨率越高代表影像质量越好,越能表现出更多的细节。
每英寸像素(PPI)
每英寸像素(英语:Pixels Per Inch,缩写:PPI),又被称为像素密度,是一个表示打印图像或显示器单位面积上像素数量的指数。一般用于计量电子设备屏幕的精细程度。通常情况下,每英寸像素值越高,屏幕能显示的图像也越精细。如上面分辨率的图显示。
视网膜显示屏(Retina Display)
视网膜显示屏(Retina Display)是一种由苹果公司设计和委托制造的显示屏。有研究表明,人类肉眼能够分辨的最高PPI是300PPI,所以超过PPI超过300的往往被称为Retina显示屏,这个概念是不对的,Retina显示屏指的是在人体正常使用距离下,无法用肉眼看到屏幕像素的显示屏。
每英寸点数(DPI)
DPI(英语:Dots Per Inch,每英寸点数)是一个量度单位,用于点阵数位影像,意思是指每一英寸长度中,取样或可显示或输出点的数目。如:打印机输出可达600DPI的分辨率,表示打印机可以在每一平方英寸的面积中可以输出600X600=360000个输出点。
设备独立像素(DIP, DP)
设备独立像素(Device Independent Pixels,DIP,又称设备无关像素)是一种物理测量单位,基于计算机控制的坐标系统和抽象像素(虚拟像素),是定义UI布局时使用的虚拟像素单位。
设备像素比(DPR)
设备像素比(DPR)是设备上物理像素和DIP的比例。公式如下:
window.devicePixelRatio = 物理像素 / dips
CSS像素(CSS Pixels)
CSS像素(CSS Pixels)是WEB编程中诞生的概念,用于定于浏览器中每个模型不同CSS的值大小。由于CSS像素(CSS Pixels)是个逻辑性的像素,而非物理性的像素,所以1个CSS像素在不同设备上大小可能会有不同。但即便是如此,对于CSS来说,还是希望在不同设备上大小尽可能地看起来相同。
那么这该如何实现呢?
基于这个问题,W3C提出参考像素这个概念。定义如下:
参考像素是设备上一个像素的视角,像素密度为96dpi,离设备长一臂。标准的手臂长度为28英尺,所以视角大概为0.0213度。对于臂长的读数,1px应该为0.26mm(1/96 英尺)。
所以1px CSS像素大小该是多少?
基于这个问题,W3C给出的答案如下:
对于CSS设备而言,这些尺寸要么锚定(i)通过将物理单元与其物理测量关联起来,或者锚定(ii)通过将像素单元与参考像素关联起来。对于打印介质和类似的高分辨率设备,锚单元应该是标准物理单位之一(像英尺,厘米等)。对于低分辨率的设备和具有不寻常观看距离的设备,建议将锚单元作为像素大圆。对于此类设备,建议像素单元参考最接近参考像素的设备像素的整数。
以上就是1px CSS像素的定义。也合理的解释了为什么显示设备的物理尺寸与物理像素不同,但是同样CSS值的元素大小却相差无几了。这是因为不同设备的px实现的参考锚点不同。
屏幕尺寸怎么算?
首先我们可以知道1英寸=2.54CM,基本所有的屏幕都以对角线来衡量尺寸。
手机屏幕常见尺寸有:5、6、5.5、6.5、7
笔记本一般是:10、12、13、14、15、18、19
想知道自己屏幕的尺寸可以使用勾股定理:
视图
视口(viewport)
视口(viewport)代表当前可见的计算机图形区域。在 Web 浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的 UI, 菜单栏等——即指你正在浏览的文档的那一部分。
在WEB开发中,视口(viewport) 是个很重要的概念,尤其在响应式网页设计中是必备的。
通过上述一系列的名词介绍,我们可以知道不同设备的尺寸,分辨率,CSS像素大小都不尽相同,所以 视口(viewport) 的大小也就跟设备相关。
在尺寸较大的设备中,在这些设备上,应用显示区域不一定是全屏的,viewport 是浏览器窗口的大小。
在大多数移动设备中,浏览器是全屏的,viewport 是整个屏幕的大小。
在全屏模式下,viewport 是设备屏幕的范围,窗口是浏览器窗口,浏览器窗口大小小于或等于视口的大小,并且文档是这个网站,文档的大小可比 viewport 长或宽。
如何设置文档viewport?
文档viewport可以通过三种方式进行设置:
HTML标签
第一种方式就是在HTML的
中引入Value可能值描述width一个正整数或者字符串device-width以pixels(像素)为单位, 定义viewport(视口)的宽度。height一个正整数或者字符串device-height以pixels(像素)为单位, 定义viewport(视口)的高度。initial-scale一个0.0到10.0之间的正数定义设备宽度(纵向模式下的设备宽度或横向模式下的设备高度)与视口大小之间的缩放比率。maximum-scale一个0.0到10.0之间的正数定义缩放的最大值;它必须大于或等于minimum-scale的值,不然会导致不确定的行为发生。minimum-scale一个0.0到10.0之间的正数定义缩放的最小值;它必须小于或等于maximum-scale的值,不然会导致不确定的行为发生。user-scalable一个布尔值(yes或者no)如果设置为no,用户将不能放大或缩小网页。默认值为yes。
CSS伪类选择器@viewport
@viewport规则让我们可以对文档的大小进行设置 viewport。这个特性主要被用于移动设备,但是也可以用在支持类似“固定到边缘”等特性的桌面浏览器,如微软的Edge。
按百分比计算尺寸的时候,就是参照的初始视口(viewport)。初始视口指的是任何用户代理和样式对它进行修改之前的视口。桌面浏览器如果不是全屏模式的话,一般是基于窗口大小。
在移动设备上(或者桌面浏览器的全屏模式),初始视口通常就是应用程序可以使用的屏幕部分。它可能是全屏或者减去由操作系统或者其它应用程序所占用的部分(例如状态栏)。
语法如下:
@viewport {
}
描述符:
据can_i_use显示,兼容性几乎全线飙红。
对于我们在移动设备上常用的viewport设置
就可以这么来写
@viewport {
width: device-width;
zoom: 1.0;
min-zoom: 0.5;
max-zoom: 2.0;
user-zoom: zoom;
}
VisualViewport
首先我们看Window.visualViewport
这是一个只读的实验性的web api,目前只有chrome 60 +跟Opera 47+支持。
属性如下:
{
height: 936, // 视觉视口高度,返回值为CSS像素值。
offsetLeft: 0, // 视觉视口边缘与布局视口左边的偏移量
offsetTop: 0, // 视觉视口边缘与布局视口顶边的偏移量
onresize: null, // 视觉视口大小变化时触发
onscroll: null, // 滚动视觉视口时触发。
pageLeft: 0, // 视觉视口边缘的初始化包含原点的X坐标,返回值为CSS像素值。
pageTop: 6680, // 视觉视口边缘的初始化包含原点的Y坐标,返回值为CSS像素值。
scale: 1, // 返回值为视觉视口的缩放比例
width: 1364, // 视觉视口宽度,返回值为CSS像素值。
}
坐标系统
通过上述对设备屏幕跟视口的介绍,我们应该可以对电子设备中的浏览器显示情况有了基本的了解。那么接下来我们来了解一下浏览器中的坐标系系统。
迪卡尔坐标系
早在初中开始,我们就开始接触一个非常重要的概念 —— 笛卡尔坐标系。在数学里,笛卡尔坐标系(英语:Cartesian coordinate system),也称直角坐标系,是一种正交坐标系。
下图是数学概念中的平面坐标系:
下图是数学概念中的三维直角坐标系:
图上信息就不作过多的解释了,有需要详细了解的可以参考https://zh.wikipedia.org/笛卡尔坐标系
WEB中的坐标系统
上面介绍的是我们数学概念中的坐标系,在WEB页面中,也有相应的坐标系统。计算法则也相仿,只是它和我们数学中的概念有点不一样,就是原点位于浏览器的左上角。整个浏览器屏幕就是第一象限,表现上只有正值,负值都隐藏了起来。无论是平面坐标还是三维坐标都是如此,只不过由于浏览器屏幕是个平面,所以三维坐标中的Z轴是贯穿浏览器的。
平面坐标系的坐标值可以看以下图示与DEMO:
html,
body,
div {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.poinerPosition {
font-size: 2vw;
position: absolute;
left: 0;
top: 0;
}
'use strict';
window.addEventListener('pointermove', PointerEvent => {
const {
x,
y,
} = PointerEvent;
poinerPosition.innerHTML = ——
(${x}, ${y})
——;
poinerPosition.style.left = ——${x + 20}px——;
poinerPosition.style.top = ——${y}px——;
});
到此,相信大家对“CSS浏览器的视图与坐标怎么实现”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
文章标题:CSS浏览器的视图与坐标怎么实现
文章转载:http://scyanting.com/article/jiegjd.html