视口

前言 这次想聊聊移动开发相关的事。是的，你没有看错，一句话就可以开始你的移动前端开发。 你心里一定在想，什么话这么酷，能够瞬间带入到移动前端开发的世界。 但其实它一点也不新奇，不复杂。 viewport简介 没错，就是viewport特性，一个移动专属的Meta值，用于定义视口的各种行为。 该特性最先由Apple引入，用于解决移动端的页面展示问题，后续被越来越多的厂商跟进。 举个简单的例子来讲为什么会需要它： 我们知道用户大规模使用手机等移动设备来进行网页浏览器，其实得益于智能手持设备的兴起，也就是近几年的事。（还记得不久前的几年，满大街都还是诺基亚的天下么？） 这时有一个很现实的问题摆在了厂商面前，用户并不能很好地通过手机等设备访问网页，因为屏幕太小。 layout viewport Apple也发现了这个问题，并且适时的出现，它提出了一个方案用来解决这个问题。在iOS Safari中定义了一个viewport meta标签，用来创建一个虚拟的布局视口（layout viewport），而这个视口的分辨率接近于PC显示器，Apple将其定义为980px（其他厂商各有不同①）。 这就很好的解决了早期的页面在手机上显示的问题，由于两者之间的宽度趋近，CSS只需要像在PC上那样渲染页面就行，原有的页面结构不会被破坏。 ①的描述大致如下，数值不一定持续准确，厂商可能更改

准备工作： 两个像素：设备像素+css像素 设备像素： 绝对单位，设备像素即设备的物理像素，对于每个设备来说，其设备像素是固定的，它是每个设备能控制显示的最小单位。通常我们所说的1920x1080像素分别率就用的是设备像素。 css像素： 适用于web编程，是前端开发在描述css样式时经常用到的像素单位。比如，设置某个div的宽度为width：200px，这个就是css像素，是一种抽象概念，实际上并不存在。 页面的缩放： 当用户放大或者缩小页面时，改变的是css像素，而设备像素不会发生改变 如：页面中一个div，它的宽度是200px，当用户操作页面，放大两倍，此时一个css像素的面变成了4个设备像素的面积：宽放大2倍x高放大两倍 页面缩放比例（zoom level）= screen.width / window.innerWidth (一般情况下可以这么计算) 设备像素比（DPR）： 在页面缩放比为1的情况下，设备像素比（DPR） = 设备像素个数 / 视觉视口css像素个数(device-width) 对于不同的设备来说设备像素比是不一样的。在早期iphone的DPR值是等于1的，但是后来引入了高密度屏幕，即为了更清晰的展示画面，在有限的设备空间内引入了更多的设备像素。所以后来iphone设备的DPR就改变了，值一般为2 场景再现： 移动端需求：给你一个750px的设计稿

从我工作以来，开发的一直都是移动端的页面，只有偶尔去开发几个PC端的页面，现在是一个移动端的时代，移动先行已经深入骨髓，作为一个web前端开发，如果你还在为如何开发移动端页面而迷茫，或者你还在为开发出了一个在你手机上“完美”的移动页面而沾沾自喜却不知移动的世界有多“残酷”的时候，那你应该看看这篇文章了。希望这能给你帮助，同时也能给我帮助，有不合理的地方，欢迎评论支持，必将改正。 这里是基础，你了解否？ 一、像素 - 什么是像素 像素是web页面布局的基础，那么到底什么才是一个像素呢？ 像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。 这是像素的概念，实际上，在web前端开发领域，像素有以下两层含义： 设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。 CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。 如下图，是在缩放比例为1，即scale = 1的情况下，设备像素和CSS像素示意图 设备像素和CSS像素 图示 现在你已经了解了，原来像素对于web前端开发来讲有这样的两层含义，那么你有没有再深入的考虑这样一个问题，当我给一个元素设置了 width: 200px; 这条样式的时候，到底放生了什么事情？ 你可能会说：“废话！元素的宽度是200px呗。”；对，并没有什么问题，但是这个200px指的是什么呢？因为我们知道

从我工作以来，开发的一直都是移动端的页面，只有偶尔去开发几个PC端的页面，现在是一个移动端的时代，移动先行已经深入骨髓，作为一个web前端开发，如果你还在为如何开发移动端页面而迷茫，或者你还在为开发出了一个在你手机上“完美”的移动页面而沾沾自喜却不知移动的世界有多“残酷”的时候，那你应该看看这篇文章了。希望这能给你帮助，同时也能给我帮助，有不合理的地方，欢迎评论支持，必将改正。 这里是基础，你了解否？ 一、像素 - 什么是像素 像素是web页面布局的基础，那么到底什么才是一个像素呢？ 像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。 这是像素的概念，实际上，在web前端开发领域，像素有以下两层含义： 设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。 CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。 如下图，是在缩放比例为1，即scale = 1的情况下，设备像素和CSS像素示意图 设备像素和CSS像素 现在你已经了解了，原来像素对于web前端开发来讲有这样的两层含义，那么你有没有再深入的考虑这样一个问题，当我给一个元素设置了 width: 200px; 这条样式的时候，到底放生了什么事情？ 你可能会说：“废话！元素的宽度是200px呗。”；对，并没有什么问题，但是这个200px指的是什么呢？因为我们知道

1. 什么是视口？ 在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 2. 视口单位vw，vh 视口单位中的“视口”，桌面端指的是浏览器的可视区域(不包括工具栏和按钮的网页浏览器)；移动端指的就是Viewport中的Layout Viewport。 根据CSS3规范，视口单位主要包括以下4个： 1. vw：1vw等于视口宽度的1%。 2. vh：1vh等于视口高度的1%。 3. vmin：选取vw和vh中最小的那个。 4. vmax：选取vw和vh中最大的那个。 vh and vw： 相对于视口的高度和宽度 ，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。 3. calc()的使用 calc(expression) 是css3的一个新增的功能，用来指定元素的长度。 calc()能给border、margin、pading、font-size和width等属性设置动态值，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)” calc()使用通用的数学运算规则，但是也提供更智能的功能： 使用“+”、“-”、“*” 和

3 月，跳不动了？>>> 参考文档：Safari Web Content Guide 首先要弄清楚 三个视口 的概念，分别是：视觉视口、布局视口、理想视口 ##1.视觉视口 就是指用户的可见视野。 ##2.布局视口 或许你不知道'布局视口'这个概念，但是在移动端页面中，你肯定用过下面这行代码。这行代码的作用就是设置布局视口。 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 布局视口主要是针对移动端而言，对于pc端而言，布局视口和视觉视口是一个概念。为什么移动端会分开这两个概念呢？ 移动端的浏览器在显示一个没有针对移动端特殊设计的pc端网页时，如果布局视口还是采用视觉视口，那么空间严重不够。 下图是将一个宽度为980px的网页显示在布局视口分别为320px和980px的浏览器中。在布局视口为980px时，网页刚好显示完整，而在布局视口为320px时(比如在iPhone5下，布局视口采用视觉视口的大小)，只有灰色的方块部分能够显示出来，其他部分均需要用户移动网页才能看见。真是糟糕的体验。 会将网页缩小，方便移动端用户查看。这就是通过改变布局视口实现的，大多数浏览器会把这个视口设置为980px。你可以通过chrome的模拟器查看。

视口viewport 1、在桌面端的浏览器的宽度有肯能是很大的，如果设置了一个很大的值，那么在移动端中的浏览器显示的时候会有横向移动的拖拽条，为了避免出现这样的横向拖拽条，我们每次都要页面的宽度就是移动设备浏览器的宽度 2、移动设备的浏览器（或App中的webview）好比是相框，viewport就是相框中的画，如果画与相框一样大是不是很完美？ 3、快捷键：meta：vp + tab，使用了meta可以将视口调整到与设备大小一样 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 3、参数解释 name：声明属性是viewport属性 content：属性具体设置的值 width：宽度，一般是设备宽度device-width height：高度，一般不设置让其自动撑大 initial-scale：视口默认的缩放比例 一般默认设置的是1.0 user-scalable：设置是否支持缩放 一般设置的是 no、false、0 maximum-scale：最大的所放值 1.0 minimum-scale：最小的所放值 1.0 移动端样式 1、点击高亮效果：移动端默认点击会附带高亮效果，可以将此效果变成透明 a, button,

rem 我们首先介绍下和我们熟悉的很相似的货。 em 被定义为相对于当前对象内文本的字体大小。如果你给body小哥设置了font-size字体大小， 那么body小哥的任何子元素的1em就是等于body设置的font-size。 body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px } 你看，这里div的字体大小是1.2em。解释来说，就是他从body那里继承的字体大小（这里是14px）的1.2倍，结果就是16.8px。 但是，如果你用em一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢？在下面这一小段代码里我们应用了和上面一样一样的CSS， 每一个div都从它上一级父元素继承了字体大小，并且逐渐得增加。 例子 虽然在某些地方这正是我们想要的，但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时候嘛，我们就可以使用 rem 了。‘r’是“root”的缩写，意思就是1rem等于根元素的字体大小；大部分情况下，根元素就是元素了。 html { font-size: 14px; } div { font-size: 1.2rem; } 这样在上面的那三个嵌套的div的字体大小都是 1.2*14px = 16.8px 了。 适用于网格布局 Rems

简述 坐标系统是由QPainter类控制的，再加上QPaintDevice和QPaintEngine类，就形成了Qt的绘图体系。 QPainter：用于执行绘图操作。 QPaintDevice：二维空间的抽象层，可以使用QPainter在它上面进行绘制。 QPaintEngine：提供了统一的接口，用于QPainter在不同的设备上进行绘制。 QPaintDevice类是可以被绘制的对象的基类，它的绘图功能由QWidget、QImage、QPixmap、QPicture和QOpenGLPaintDevice继承。默认坐标系统位于设备的左上角，即坐标原点(0, 0)。X轴由左向右增加，Y轴由上向下增加。在基于像素的设备上（比如：显示器），坐标的默认单位是1像素；在打印机上则是1点（1/72 英寸）。 QPainter逻辑坐标与QPaintDevice物理坐标的映射，由QPainter的变换矩阵（transformation matrix）、视口（viewport）和窗口（window）完成。默认情况下，物理坐标与逻辑坐标系统是重合的，QPainter也支持坐标转换，例如：旋转、缩放。 简述 渲染 逻辑表示 锯齿绘制 抗锯齿绘制 坐标转换 窗口-视口转换 更多参考 渲染 逻辑表示 一个图形图元的大小（宽度和高度）总是对应于它的数学模型，忽略绘制时画笔的宽度： 锯齿绘制 绘制的时候

px % em （ font-size的值就是 1em，如果自身没有设置font-size，则去找父元素的；常用于 text-indent:2em 来缩进两个字符 ） rem（html的font-size的大小，就是1rem ；rem是相对于根元素<html>，即rem继承的是html的font-size，不是body！！！） vw （100vw表示视口宽度的1%） 由于兼容性的问题，vw vh 这种视口单位用的不是很多 在PC端的开发工具中，模拟移动端最小字体规定是12px，小于12px的统一按照12px来 目前在移动端，rem是主流 案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"> <title>Document</title> <link rel="stylesheet" href="font/iconfont.css"> <style> *{margin:0;padding:0;box-sizing:border-box;} body{background