【Hello CSS】第三章-浏览器的视图与坐标

时间  2019-11-25
标签 Hello CSS 第三 浏览器 视图 坐标 栏目 浏览器 繁體版
原文   原文链接

在上一篇【Hello CSS】的第二章第二章-CSS的逻辑属性与盒子模型中提了个问题：javascript

为何Flex box跟Grid box的是以start、end为排列规则，而不是常规的top 、right 、bottom 跟left？php

如今各位看官有答案了吗？css

由于上一篇中有提到过CSS 逻辑属性的变革，从物理概念跳跃到了逻辑概念，也就是从top 、 right 、 bottom、 left更新为block、inline、start、 end。因为Flex box跟Grid box是CSS3的布局模式，因此天然而然会使用更加适应于新时代的语言属性。html

上一篇主要介绍了CSS的逻辑属性跟盒子模型的基本现状。本篇则会介绍浏览器的视图与坐标。java

关于设备屏幕，咱们应该知道的知识

像素(Pixel)

像素(pixel)是影像显示的基本单位，一个像素一般被视为影像的最小的完整取样。用来表示一幅影像的像素越多，结果更接近原始的影像。git

咱们看看下图，图中最小的点就是设备的像素。github

image

分辨率(Image resolution)

分辨率(Image resolution)平常用语中之分辨率多用于影像的清晰度。分辨率越高表明影像质量越好，越能表现出更多的细节。web

显示分辨率列表：zh.wikipedia.org/wiki/显示分辨率列…算法

下图是不一样分辨率下的图像显示chrome

image

每英寸像素(PPI)

每英寸像素（英语：Pixels Per Inch，缩写：PPI），又被称为像素密度，是一个表示打印图像或显示器单位面积上像素数量的指数。通常用于计量电子设备屏幕的精细程度。一般状况下，每英寸像素值越高，屏幕能显示的图像也越精细。如上面分辨率的图显示。

视网膜显示屏(Retina Display)

视网膜显示屏(Retina Display)是一种由苹果公司设计和委托制造的显示屏。有研究代表，人类肉眼可以分辨的最高PPI是300PPI，因此超过PPI超过300的每每被称为Retina显示屏，这个概念是不对的，Retina显示屏指的是在人体正常使用距离下，没法用肉眼看到屏幕像素的显示屏。

下图为显示了“地图”二字的Retina显示屏

image

每英寸点数(DPI)

DPI（英语：Dots Per Inch，每英寸点数）是一个量度单位，用于点阵数位影像，意思是指每一英寸长度中，取样或可显示或输出点的数目。如：打印机输出可达600DPI的分辨率，表示打印机能够在每一平方英寸的面积中能够输出600X600＝360000个输出点。

下图为喷墨打印机以较低质量在约 0.25 平方英寸的范围内按 150 dpi 打印的效果的特写

image

设备独立像素(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 英尺）。

以下图：

image

因此1px CSS像素大小该是多少？

基于这个问题，W3C给出的答案以下：

对于CSS设备而言，这些尺寸要么锚定(i)经过将物理单元与其物理测量关联起来，或者锚定(ii)经过将像素单元与参考像素关联起来。对于打印介质和相似的高分辨率设备，锚单元应该是标准物理单位之一（像英尺，厘米等）。对于低分辨率的设备和具备不寻常观看距离的设备，建议将锚单元做为像素大圆。对于此类设备，建议像素单元参考最接近参考像素的设备像素的整数。

以上就是1px CSS像素的定义。也合理的解释了为何显示设备的物理尺寸与物理像素不一样，可是一样CSS值的元素大小却相差无几了。这是由于不一样设备的px实现的参考锚点不一样。

若是想知道不一样设备屏幕的具体差别，能够参考这个网站：uiiiuiii.com/screen/inde…

屏幕尺寸怎么算？

首先咱们能够知道1英寸=2.54CM，基本全部的屏幕都以对角线来衡量尺寸。

手机屏幕常见尺寸有：五、六、5.五、6.五、7

笔记本通常是：十、十二、1三、1四、1五、1八、19

想知道本身屏幕的尺寸可使用勾股定理：

image

若是想知道你的显示器尺寸，能够参考这个网站：zh.infobyip.com/detectdispl…

鱼头注：关于CSS的单位值，会在后面的章节讲解，有兴趣的千万不要错过。

视图

视口(viewport)

视口(viewport)表明当前可见的计算机图形区域。在 Web 浏览器术语中，一般与浏览器窗口相同，但不包括浏览器的 UI， 菜单栏等——即指你正在浏览的文档的那一部分。

在WEB开发中，视口(viewport) 是个很重要的概念，尤为在响应式网页设计中是必备的。

  • 经过上述一系列的名词介绍，咱们能够知道不一样设备的尺寸，分辨率，CSS像素大小都不尽相同，因此 视口(viewport) 的大小也就跟设备相关。

  • 在尺寸较大的设备中，在这些设备上，应用显示区域不必定是全屏的，viewport 是浏览器窗口的大小。

  • 在大多数移动设备中，浏览器是全屏的，viewport 是整个屏幕的大小。
  • 在全屏模式下，viewport 是设备屏幕的范围，窗口是浏览器窗口，浏览器窗口大小小于或等于视口的大小，而且文档是这个网站，文档的大小可比 viewport 长或宽。

如何设置文档viewport？

文档viewport能够经过三种方式进行设置：

HTML标签

第一种方式就是在HTML的<head></head>中引入

<meta name="viewport" content="">
复制代码

下面表格来自MDN

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 {
    <group-rule-body>
}
复制代码

描述符：

属性值 描述
min-width 设置viewport的最小宽度
max-width 设置viewport的最大宽度
width 同时设置 min-width 和 max-width
min-height 设置viewport的最小高度
max-height 设置viewport的最大高度
height 同时设置 min-height 和 max-height
zoom 设置初始缩放系数
min-zoom 设置最小缩放系数
max-zoom 设置最大缩放系数
user-zoom 设置用户是能更改缩放系数
orientation 控制文档的方向
viewport-fit 控制非矩形显示屏上文档的显示。

据can_i_use显示，兼容性几乎全线飙红。

image

对于咱们在移动设备上经常使用的viewport设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
复制代码

就能够这么来写

@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），也称直角坐标系，是一种正交坐标系。

下图是数学概念中的平面坐标系：

image

下图是数学概念中的三维直角坐标系：

image

图上信息就不做过多的解释了，有须要详细了解的能够参考zh.wikipedia.org/笛卡尔坐标系

WEB中的坐标系统

上面介绍的是咱们数学概念中的坐标系，在WEB页面中，也有相应的坐标系统。计算法则也相仿，只是它和咱们数学中的概念有点不同，就是原点位于浏览器的左上角。整个浏览器屏幕就是第一象限，表现上只有正值，负值都隐藏了起来。不管是平面坐标仍是三维坐标都是如此，只不过因为浏览器屏幕是个平面，因此三维坐标中的Z轴是贯穿浏览器的。

平面坐标系的坐标值能够看如下图示与DEMO：

image

image 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>平面坐标系</title>
    <style> html, body, div { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .poinerPosition { font-size: 2vw; position: absolute; left: 0; top: 0; } </style>
  </head>
  <body>
    <div id="poinerPosition" class="poinerPosition"></div>
    <script> '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`; }); </script>
  </body>
</html>
复制代码

DEMO地址：krissarea.gitee.io/blog/css/cs…

鱼头注：关于CSS 二维与三维的图像跟动画会在后续的章节进行讲解，有兴趣的能够继续关注本系列。

参考资料

你真的了解css像素嘛？

什么是CSS像素？什么是参考像素？

devicepixelrati

设备像素比devicePixelRatio简单介绍

W3C

分辨率

像素

视网膜显示屏

每英寸像素

每英寸点数

在移动浏览器中使用viewport元标签控制布局

Visual Viewport API

视口概念

VisualViewport

meta

Window.visualViewport

@viewport

[CSS] 淺談 @viewport 與 @media

【Hello CSS】系列

【Hello CSS】是以CSS基础概念为主题的系列文章，旨在帮助你们更深入地了解而且提升CSS在各位开发者心目中的地位。因为鱼头我水平有限，文笔有限，若是各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会很是感谢的；若是经过文章有任何想法或疑问，也但愿各位能积极留言，咱们互相探讨；若是经过本系列文章有所收获，这就让鱼头我喜不自胜了！

若是你也喜欢CSS，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，很是欢迎加鱼头微信好友一块儿探讨，固然，鱼头也很是但愿能跟你一块儿聊生活，聊爱好，谈天说地。 鱼头的微信号是：krisChans95 也能够扫码添加好友，备注“掘金”就行

https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/base/wx-qrcode1.jpg
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程