视口

原文地址： http://www.333cn.com/shejizixun/201839/43495_145847.html 写在前面 近年来，随着科学技术的发展，终端的分辨率越来越多，响应式的设计氤氲而生。然而，作为设计师，你是否遇到过这样的情况：当你设计响应式网站的时候，由于不了解其规范及实现原理，而根据自己的理解设计出了一套设计稿。然而，当这份设计稿放到开发面前时，却发现很多你考虑得很美好的设计方案难以被开发，最终无法还原设计稿的效果。 本文围绕响应式的设计方法来写，重点简述流式网格、元素切换、响应式样式。看完本文，有助于你设计出兼容性更强，对开发友好的响应式设计。对缩短项目的开发周期，降低项目的开发、维护成本，推动项目落地有一定的帮助。 首先，我们先来了解几个概念。这几个概念有涉及到设计，也有涉及到开发。当然，我们的目的不是学习开发技术，而是通过对这些概念的了解，更好的掌握响应式设计的方法。 1. 响应式布局 响应式布局是Ethan Marcotte在2010年提出的概念。他认为，一个网站能够兼容多个终端 (指不同分辨率，不同Dpi的显示设备) ，而不是为每一个终端做一个特定的版本 ，这样的网站布局方式即称为响应式布局。 由于科技的迅速发展，终端设备的分辨率越来越多样化，响应式布局正是为此而生，其目的是确保一个页面在所有终端上都能呈现出令人满意的效果。

一、前言 根据前面写的 你不知道的CSS单位，进行了一种响应式布局的思考。 视口布局的优点：宽度和高度全部自动适应！再加上rem布局的字体适应，可以完美解决各种屏幕适配问题！ 二、正文 1、vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。（解决宽高自动适配） <meta name="viewport" content="width=device-width,initial-scale=1.0"> 2、rem布局-解决字体适配（此布局在weex中无法识别） rem布局原理：根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。 @media only screen and (max-width: 1600px) and (min-width: 1280px){ html{ font-size: 14px; } } @media only screen and (max-width: 1280px) and (min-width: 960px){ html{ font-size: 12px; } } @media only screen and (max-width: 960px){ html{ font-size: 10px; } } 3、vw、vh、rem的使用 <template> <div class="box"> </div> <

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/> 　 、 width=device-width ：表示宽度是设备屏幕的宽度 initial-scale=1.0：表示初始的缩放比例 minimum-scale=0.5：表示最小的缩放比例 maximum-scale=2.0：表示最大的缩放比例 user-scalable=yes：表示用户是否可以调整缩放比例 如果是想要一打开网页，自动以原始比例显示，并且不允许用户修改的话，则是： <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no"/> ps：将比例都改为1,即可。 layout viewport ：布局视口（layout viewport）：是分概念，当你没有设定那行著名代码的时候，厂商除了规定标准分辨率，还要给自己的手机设一个最大分辨率。想象一下，假如没有那行代码

viewport是什么? 一般来说，在移动浏览器上页面渲染是在一个叫viewport的页面绘制区域内。 手机浏览器把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 layout viewport：是网页的所有内容，他可以全部或者部分展示给用户。 visual viewport：是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。 viewport和屏幕的真实尺寸并不是对应的，如在Safari Mobile中viewport默认宽度（320px）是屏幕真实尺寸（640px）的一半，这里不管是用window.innerHeight还是window.screen.width拿到的都是320px。 当然我们可以通过meta设置改变viewport的比例，如initial-scale=.5就可以让viewport和屏幕一致的尺寸，这个比例在不同的手机上并不一定是2倍关系，特别是Android手机。而且改变viewport比例后可能会导致后续制作中出现一系列问题。另外Android系统中可以在viewport设置target-densitydpi=device

body的背景 背景background-color：默认border-box 画布canvas 一块区域 背景background-color的画布的特点：（画布大于等于视口） 最小宽度视口宽度 最小高度视口高度 html元素的背景： 覆盖画布 body元素的背景颜色（推荐） 如果html元素有背景颜色，body背景颜色正常覆盖边框盒，否则，body背景颜色覆盖画布 画布设置背景图片（总结就相对html元素） 背景图宽度的百分比是相对于视口window.innerWidth 背景图的高度百分比相对于html元素的height（网页高度） 背景图的横向位置百分比，预设值，相对视口 背景图的纵向位置百分比，预设值，相对html的height(网页高度) 例子： html{ padding:10px; } body { width:1200px; border: 4px dashed red; background: url('../img/201801.png') no-repeat; background-size:50% 50%;//背景图width=视口宽度*50%；背景图高度height=html高度*50%； background-position:right 10px bottom 10px;//相对视口右边10px,相对html下边缘10px } 来源： https:/

Qt坐标系转换过程的个人理解 QT坐标系转换机制的个人理解 对于一个给定的绘图设备，在绘图时有两个坐标系：物理坐标系，逻辑坐标系。物理坐标系是一个真实的坐标系，在QT中，其原点处于绘图设备的左上角，其单位长度为绘图设备上一像素长度，其X轴向右增长，Y轴向下增长。而逻辑坐标系是一个抽象的坐标系，其原点、单位长度没有实际意义，其X轴向右增长，Y轴向下增长。 绘图时，图像绘制在逻辑坐标系上，再通过窗口——视口映射，世界转换将逻辑坐标系映射到物理坐标系上。进而把绘制在逻辑坐标系上的图像映射到物理坐标系上。 注意：在个人理解中，是先进行窗口——视口映射，再进行世界转换。（但文档中描述是先进行世界转换，再进行窗口——视口映射，这点想不通。如果不先通过窗口——视口映射将抽象的逻辑坐标系具体化，对其进行世界转换有什么意义？将逻辑坐标系具体化意思是确定逻辑坐标系的原点与单位长度）。 首先进行窗口（window）——视口（viewport）转换： 首先需要了解的是：窗口基于逻辑坐标系，视口基于物理坐标系。使用以下两个函数可以得到一个基于逻辑坐标系的窗口矩形，与一个基于物理坐标系的视口矩形。 void QPainter::setWindow ( int x, int y, int width, int height ) void QPainter::setViewport ( int x, int y,

1 ．实验目的： 理解掌握OpenGL程序的投影变换，能正确使用投影变换函数，实现正投影与透视投影。 2 ．实验内容： （1） 使用图a中的尺寸绘制小桌，三维效果图见图b。要求绘制小桌各部件时只能使用函数glutSolidCube()和变换函数，不能使用函数glVertex()等直接指定顶点位置； （2）添加键盘按键或右键菜单控制实现小桌效果图在正投影和透视投影模式间的切换；在此基础上，考虑一点透视、两点透视、三点透视三类效果图的显示。 3 ．实验原理： OpenGL通过相机模拟、可以实现 计算机 图形学中最基本的三维变换，即几何变换、投影变换、视口变换等，同时，OpenGL还实现了矩阵堆栈等。理解掌握了有关坐标变换的内容，就算真正走进了精彩地三维世界。 一、OpenGL中的三维物体的显示 （一）坐标 系统 在现实世界中，所有的物体都具有三维特征，但计算机本身只能处理数字，显示二维的图形，将三维物体及二维 数据 联系在一起的唯一纽带就是坐标。 为了使被显示的三维物体数字化，要在被显示的物体所在的 空间 中定义一个坐标系。这个坐标系的长度单位和坐标轴的方向要适合对被显示物体的描述，这个坐标系称为世界坐标系。世界坐标系是始终固定不变的。 OpenGL还定义了局部坐标系的概念，所谓局部坐标系，也就是坐标系以物体的中心为坐标原点，物体的旋转或平移等操作都是围绕局部坐标系进行的，这时

移动布局基础 浏览器现状 pc端常见浏览器：360,谷歌，火狐，qq，百度，搜狗，IE浏览器 移动端常见浏览器：UC,QQ,哦朋，百度，360，谷歌，搜狗，猎豹等等 国内的uc和QQ，百度手机浏览器都是根据Webkit修改过来的内核，国内尚无自助研发的内核，就像国内的手机操作系统都是Android修改开发的一样 总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可 手机屏幕现状 移动端设备屏幕尺寸非常多，碎片化严重 Android设备有多种分辨率：480x800,480x854,540x960,720x1280,1080x1920等，还是2k,4k屏等 近年来iphone的碎片化也加剧了，其设备的主要分辨率有:640x960,640x1136,750x1334,1242x2208等 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px 移动端调试方法 Chome DevTools（谷歌浏览器）的魔你手机调试 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器 使用外网服务器，直接IP或域名访问 总结 移动端浏览器我们主要对webkit内核进行兼容 我们现在开发的移动端主要针对手机端开发 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一 学会用谷歌浏览器模拟手机界面以及调试 视口 视口（viewport）就是浏览器显示页面内容的屏幕区域

这是关于移动端适配的第一篇文章，这篇文章主要介绍 视口以及和视口有关的meta标签 的使用。 不管三七二十一，我们先新建一个页面： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这不是一个demo</title> <style type="text/css"> *{margin: 0; padding: 0;} div{height: 100px; background: red;} </style> </head> <body> <div></div> </body> </html> 在谷歌浏览器下，我们可以看到不同手机的适配情况： 可以看出，不管是i5/i6/i6plus下，div的宽度都为980px，这个980是什么值，为什么它好像和移动设备无关？ 其实这个980所表示的就是 布局视口 。 布局视口layout viewport ：就是移动设备上用来装载我们的网页的那一块区域。浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把布局视口宽度设置地很大，一般在 768px ~ 1024px之间。不同的设备有不同的宽度。最常见的宽度是980。下图是不同设备下布局视口的大小。 布局视口有980像素，可是我们的屏幕很小，按理说应该会有滚动条才是，可实际上并没有。这就需要归功于另一个视口

技术指南 > H5同层播放器接入规范 H5同层播放器接入规范 x5-video-player-type 启用H5同层播放器 通过video属性“x5-video-player-type”声明启用同层H5播放器 同层页面内播放是标准的视频播放形态，在video标签中添加x5-video-player-type：h5-page属性来控制网页内部同层播放，可以在视频上方显示html元素。 示例: https://tencentx5.github.io/x5/video_page_samelayer.htm 详情可以参考: https://docs.qq.com/doc/DTUxGdWZic0RLR29B x5-video-player-fullscreen全屏方式 视频播放时将会进入到全屏模式 如果不申明此属性，页面得到视口区域为原始视口大小(视频未播放前)，比如在微信里，会有一个常驻的标题栏，如果不声明此属性，这个标题栏高度不会给页面，播放时会平均分为两块（上下黑块） 注： 声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听resize 事件来实现 <video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/> 需要监听窗口大小变化(resize