为什么 Flex box 跟 Grid box 的是以 start,end 为排列规则, 而不是常规的 top ,right ,bottom 跟 left?
现在各位看官有答案了吗?
因为上一篇中有提到过 CSS 逻辑属性的变革, 从物理概念跳跃到了逻辑概念, 也就是从 top , right , bottom, left 更新为 block,inline,start, end. 由于 Flex box 跟 Grid box 是 CSS3 的布局模式, 所以自然而然会使用更加适应于新时代的语言属性.
上一篇主要介绍了 CSS 的逻辑属性跟盒子模型的基本现状. 本篇则会介绍浏览器的视图与坐标.
关于设备屏幕, 我们应该知道的知识
像素(Pixel)
像素 (pixel) 是影像显示的基本单位, 一个像素通常被视为影像的最小的完整取样. 用来表示一幅影像的像素越多, 结果更接近原始的影像.
我们看看下图, 图中最小的点就是设备的像素.
分辨率(Image resolution)
分辨率 (Image resolution) 日常用语中之分辨率多用于影像的清晰度. 分辨率越高代表影像质量越好, 越能表现出更多的细节.
下图是不同分辨率下的图像显示
每英寸像素(PPI)
每英寸像素(英语: Pixels Per Inch, 缩写: PPI), 又被称为像素密度, 是一个表示打印图像或显示器单位面积上像素数量的指数. 一般用于计量电子设备屏幕的精细程度. 通常情况下, 每英寸像素值越高, 屏幕能显示的图像也越精细. 如上面分辨率的图显示.
视网膜显示屏(Retina Display)
视网膜显示屏 (Retina Display) 是一种由苹果公司设计和委托制造的显示屏. 有研究表明, 人类肉眼能够分辨的最高 PPI 是 300PPI, 所以超过 PPI 超过 300 的往往被称为 Retina 显示屏, 这个概念是不对的, Retina 显示屏指的是在人体正常使用距离下, 无法用肉眼看到屏幕像素的显示屏.
下图为显示了 "地图" 二字的 Retina 显示屏
每英寸点数(DPI)
DPI(英语: Dots Per Inch, 每英寸点数)是一个量度单位, 用于点阵数位影像, 意思是指每一英寸长度中, 取样或可显示或输出点的数目. 如: 打印机输出可达 600DPI 的分辨率, 表示打印机可以在每一平方英寸的面积中可以输出 600X600=360000 个输出点.
下图为喷墨打印机以较低质量在约 0.25 平方英寸的范围内按 150 dpi 打印的效果的特写
设备独立像素(DIP, DP)
设备独立像素 (Device Independent Pixels,DIP, 又称设备无关像素) 是一种物理测量单位, 基于计算机控制的坐标系统和抽象像素(虚拟像素), 是定义 UI 布局时使用的虚拟像素单位.
设备像素比(DPR)
设备像素比 (DPR) 是设备上物理像素和 DIP 的比例. 公式如下:
Windows.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 的 < head></head > 中引入 < meta name="viewport">
<meta name="viewport" content="">
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>
- }
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法(详细的前端项目实战教学视频, PDF)
描述符:
据 can_i_use 显示, 兼容性几乎全线飙红.
对于我们在移动设备上常用的 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
首先我们看 Windows.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 像素值. }
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法(详细的前端项目实战教学视频, PDF)
坐标系统
通过上述对设备屏幕跟视口的介绍, 我们应该可以对电子设备中的浏览器显示情况有了基本的了解. 那么接下来我们来了解一下浏览器中的坐标系系统.
迪卡尔坐标系
早在初中开始, 我们就开始接触一个非常重要的概念 -- 笛卡尔坐标系. 在数学里, 笛卡尔坐标系(英语: Cartesian coordinate system), 也称直角坐标系, 是一种正交坐标系.
下图是数学概念中的平面坐标系:
下图是数学概念中的三维直角坐标系:
图上信息就不作过多的解释了, 有需要详细了解的可以参考 https://zh.wikipedia.org / 笛卡尔坐标系
Web 中的坐标系统
上面介绍的是我们数学概念中的坐标系, 在 Web 页面中, 也有相应的坐标系统. 计算法则也相仿, 只是它和我们数学中的概念有点不一样, 就是原点位于浏览器的左上角. 整个浏览器屏幕就是第一象限, 表现上只有正值, 负值都隐藏了起来. 无论是平面坐标还是三维坐标都是如此, 只不过由于浏览器屏幕是个平面, 所以三维坐标中的 Z 轴是贯穿浏览器的.
平面坐标系的坐标值可以看以下图示与 DEMO:
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法(详细的前端项目实战教学视频, PDF)
<!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'; Windows.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>
来源: http://www.jianshu.com/p/4d87e772e1ba