视口

简述 坐标系统是由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也支持坐标转换，例如：旋转、缩放。 简述 渲染 逻辑表示 锯齿绘制 抗锯齿绘制 坐标转换 窗口-视口转换 渲染 逻辑表示 一个图形图元的大小（宽度和高度）总是对应于它的数学模型，忽略绘制时画笔的宽度： 锯齿绘制 绘制的时候

　　什么是移动WEB开发，我个人理解就是，将网页更好的显示在移动端的一些设置。 移动布局 　　一，移动设备 :手机 和ipad 　　　　安卓系统ios系统 　　　　安卓系统：内置浏览器是谷歌，ios内置safari浏览器，他们的内核都是webkit,不考虑兼容性，需要考虑的是安卓和ios的区别。 　　二，布局 　　　　设备宽度： 指设备的实际大小，设备的分辨率是厂家给的。 　　　　页面的大小：是设计稿上的大小。 　　　　浏览器的视口：浏览器自带的用document.documentElement.clientWidth查看，在移动设备上如果不做视口处理一般默认是980 　　列子： 　　　　设备宽是320，页面宽是1200，浏览器视口是980px 三种不统一，我们用移动设备看页面，浏览器的视口会自动缩小，以100%完整展示页面，就会变的不清楚，特别挤，我们需要把这三个变的统一。 1，移动设备宽（320）和浏览器视口（980）宽一致 在head之间加一个meta标签name="viewport" 设备宽度和浏览器视口一致时，如果页面宽大于这个数字就会出现滚动条。 2，当移动设备和浏览器视口一致时，如果还使用以前的布局，如果页面超过设备宽，超过的部分会被截掉。不能使用传统的开发模式了。 　　 来源： https://www.cnblogs.com/only--love/p

前端基础 一、HTTP,HTML,浏览器 1、说一下 http 和 https https 的 SSL 加密是在传输层实现的。 (1)http 和 https 的基本概念: http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器 端请求和应答的标准(TCP)，用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以 使浏览器更加高效，使网络传输减少。 HTTP 是一个基于 TCP/IP 通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)HTTP 是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。 它于 1990 年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在 WWW 中使用的是 HTTP/1、0 的第六版，HTTP/1、1 的规范化工作正在进行之中，而且 HTTP-NG(Next Generation of HTTP)的建议已经提出。HTTP 协议工作于客户端-服务端架构为上。浏览器作为 HTTP 客户端通过 URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送 响应信息。 https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。

响应式网站概念 弹性网格布局 弹性图片 媒体查询 响应式网站优点 减少工作量 节省时间 网站代码只需要一份 多出来的只是js脚本和css样式 每个设备都能得到正确的设计 搜索优化 响应式网站缺点 加在更多的样式和脚本 设计比较难精准的定位和控制 老版本浏览器兼容性不好 需要掌握技术 浏览器兼容 IE 火狐 谷歌 欧朋 360 媒体查询 width ：视口宽度 height：视口高度 device-width ：设备屏幕的宽度 device-height：设备屏幕的高度 orientation：检查设备处于横向还是纵向 aspect-ratio：基于视口宽度和高度的宽高比 如16/9 或4/3 color：每种颜色的位数 bits 如min-color：16位，8位 resolution：检测屏幕或打印机的分辨率如min-resolution：300dpi 以上属性都可以加min-或max-前缀 viewport视口 width ：视口宽度 device-width ：设备屏幕的宽度 桌面浏览器 只有一个视口就是浏览器显示内容的区域 手机浏览器 布局视口 虚拟宽度不变960以上 可视视口 不可设置修改，用户可以缩放 理想视口 布局视口在一个设备上的最佳尺寸 让网页自动适应电脑手机屏幕代码 <meta name="viewport" content="width=device

视口单位(Viewport units) 什么是视口？ 在PC端，视口指的是在PC端，指的是浏览器的可视区域； 而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，PC端指的是浏览器的可视区域；移动端指的就是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百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。 比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。 vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。 vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。 来源： CSDN 作者： 神奇大叔 链接： https://blog

OpenGL视点变换，模型变换，投影变换，视口变换详解 http://blog.csdn.net/yhb5566/article/details/7714319 作者：luck_net | 出处：博客园 | 2012/2/22 14:46:49 | 阅读112次 OpenGL通过相机模拟、可以实现计算机图形学中最基本的三维变换，即几何变换、投影变换、裁剪变换、视口变换等，同时，OpenGL还实现了矩阵堆栈等。理解掌握了有关坐标变换的opengl图片内容，就算真正走进了精彩地三维世界。 一、OpenGL中的三维物体的显示 （一）坐标系统 在现实世界中，所有的物体都具有三维特征，但计算机本身只能处理数字，显示二维的图形，将三维物体及二维数据联系在一起的唯一纽带就是坐标。 为了使被显示的三维物体数字化，要在被显示的物体所在的空间中定义一个坐标系。这个坐标系的长度单位和坐标轴的方向要适合对被显示物体的描述，这个坐标系称为世界坐标系。世界坐标系是始终固定不变的。 OpenGL还定义了局部坐标系的概念，所谓局部坐标系，也就是坐标系以物体的中心为坐标原点，物体的旋转或平移等操作都是围绕局部坐标系进行的，这时，当物体模型进行旋转或平移等操作时，局部坐标系也执行相应的旋转或平移操作。需要注意的是，如果对物体模型进行缩放操作，则局部坐标系也要进行相应的缩放，如果缩放比例在案各坐标轴上不同

媒体查询 媒体查询只支持IE9+、chrome、ff等浏览器，IE8以下的浏览器可以下载引用 respond.js ，如下写法： 写法： <!--[if lt IE 9]> 　　　　<script src="respond.js"></script> <![endif]--> 媒体查询能检测哪些属性 ： 1.width 视口宽度 2.height 视口高度 3.device-width 渲染表面的宽度（对我们来说就是设备屏幕的宽度） 4.device-height 渲染表面的高度（对我们来说就是设备屏幕的高度） 5.orientation 检查设备处于横向还是纵向 6.aspect-ration 基于视口宽度和高度的宽高比 一个16:9比例的显示屏可以这样定义：aspect-ration:16/9; 7.device-aspect-ration 基于设备渲染平面的宽高比 8.color 每种颜色的位数 例如 min-color:16 会检查设备是否拥有16位颜色 9.color-index 设备颜色索引表中的颜色数。值必须是非负整数 10.monochrome 检查单色帧缓冲区中每像素所使用的位数 ， 值必须是非负整数 11.resolution 用来检测屏幕或打印机的分辨率，例如：min-resolution:300dpi, 还可以接受每厘米像素点数的度量值，例如，min

》开始入手第一部分知识点 关于viewport(视口)的了解 视口就是浏览器中用于显示网页的区域，PC端，视口的宽度等于浏览器窗口的宽度。而在移动端，视口又分为布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)。 那什么是布局视口( layout viewport）？ 视口与浏览器屏幕不相关联，CSS布局会根据他来计算，并被他约束，为了容纳为桌面浏览器设计的网站，移动设备默认的布局视口宽度远大于屏幕的宽度，其大小与设备有关。 通过document.documentElement.clientWidth/Height可得到布局视口的尺寸 什么是视觉视口( visual viewport) ？ 用户看到的网站区域，即用户看到网页区域内CSS像素的数量（注意, 是网站区域，不要和屏幕区域混淆了） 屏幕通过手势放大时，用户可看到的网站区域相对减小，此时视觉视口也在减小 通过window.innerWidth/Height可得到视觉视口的尺寸 什么是理想视口( ideal viewport)？ 为浏览器定义的可完美适配移动端的视口，可认为是设备视口宽度 只有当为页面添加meta视口标签时，理想视口才会生效，如下： //这一行代码告诉浏览器，布局视口的宽度应该与理想视口的宽度一致 <meta name="device

四、移动适配 文章目录 四、移动适配 移动端适配 viewpoint视口 媒体查询 参考文章 移动端适配 移动端Web页面，即常说的H5页面、手机页面、webview页面； 手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑安卓/IOS的各种尺寸设备上的兼容，针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备； 移动端适配的目的：在不同尺寸的手机设备上，页面“相对性的达到合理的展示”或者“保持统一效果的等比缩放”； viewpoint视口 visual viewport：可见视口，即屏幕宽度； layout viewport：布局视口，即DOM宽度； idea viewport：理想适口，使布局视口就是可见视口； visual viewport = layout viewport * scale 获取屏幕宽度（visual viewport）的尺寸：window. innerWidth/Height 获取DOM宽度（layout viewport）的尺寸：document. documentElement. clientWidth/Height 移动设备默认的 viewport 是 layout viewport，而我们想要的是 idea viewpoint，我们通过使用 meta 标签来实现我们想要的效果。 meta viewport

vh viewpoint height ,视窗高度,1vh=视窗高度的1%,即相对于视口的高度。视口被均分为100单位的vh vw 与vh对应的还有vw, viewpoint width ，视窗宽度，1vw=视窗宽度的1%,即相对于视口的宽度。视口被均分为100单位的vw 顺便拓展一下其他比较常用的相对长度 1. rem :根元素（html）的 font-size 2. em :它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则 2em == 32px； 3. % :相对于父元素 来源： https://www.cnblogs.com/why98/p/12228430.html