视口

视口(viewport) nbsp;nbsp;nbsp;nbsp;视口(viewport)是用来约束网站中最顶级块元素的, 即决定了的大小 PC设备 nbsp;nbsp;nbsp;nbsp;在pc设备上viewport的大小取决于浏览器窗口的大小, 以css像素作为度量单位(pc端 视口(virewport大小与浏览器大小一致)). nbsp;nbsp;nbsp;nbsp;通过以往css的知识, 我们都能理解的大小是会影响到我的网页布局的, 而viewport又决定了的大小, 所以viewport间接的并决定了我的网页布局. 移动设备 nbsp;nbsp;nbsp;nbsp;移动设备的屏幕普遍是比较小的, 但是大部分的网站又都是为PC设备来设计的, 要想让移动设备也可以正常显示网页, 移动设备不得不做一些处理; nbsp;nbsp;nbsp;nbsp;在移动设备上viewport不再受限于浏览器窗口, 而是允许开发人员自由设置viewport的大小, 通常浏览器会设置一个默认大小的viewport, 为了能够正常显示那些转为pc设计的网页, 一般这个值的大小会大于屏幕的尺寸. viewport nbsp;nbsp;nbsp;nbsp;移动设备上有2个viewport(为了方便讲解人为定义的), 分别是layout viewport 和ideal viewport nbsp;nbsp

什么是响应式设计？ iOS 和 Android 的发布，智能手机、平板电脑、智能家电等新设备层出不穷，极大便利了我们的生活，但面对形形色色的终端设备，千差万别的屏幕分辨率，给网页设计带来了新的挑战，我们无法估计用户的终端设备和网络状况，更不可能为每种设备都专门设计一套网站，如何实现 Web UI 在多终端中的适配呢？2010 年 Ethan Marcotte 曾经在 A List Apart 发表过一篇文章"Responsive Web Design"，响应式网页设计提供了一种设计方法，可以使同一网站在智能手机、桌面电脑，以及介于这两者之间的任意设备上完美显示。这种方法能够根据用户的屏幕尺寸，合理地为现有及将来的各种设备提最佳的浏览体验。 http://mediaqueri.es/ 这是一个响应式设计创意收集网站，可以在上面查看到很多响应式设计实例，较多的网站都应用了 Mobile First 设计思想，先针对小视口设备进行设计，然后逐步对大视口设计进行渐进增强支持。 图 1. Froont 响应式设计网站截屏 这也意味着设计思维的转换，不应再执着于布局、线框等的具体大小，而应该考虑如何使用流体元素。与其根据不同设备的大小来设计页面，更着重考虑如何针对内容进行设计。抛弃像素，抛弃固定宽度，先从小屏幕进行设计，然后逐步增强针对大屏幕的设计 当然也需要引导客户

1.媒体查询 针对不同的媒体类型 定制不同的css样式 设备视口：设备屏幕的大小 常见的 320 375 414（iphone） Android：常见的 320 360 480 浏览器视口：在移动端中如果没有做视口处理，浏览器默认视口大小为 980px 在 PC端，浏览器视口和pc设备视口保持一致 常见设计稿？ 设备宽度乘以 2 甚至乘以3，这是因为跟我们屏幕的分辨率(设备像素比)有关 设备像素比： dpr：2，一个物理像素需要两个逻辑像素去填充 如果参考设备是 375*667 那么设计稿得 750*1354 来源： https://www.cnblogs.com/qq1137674424/p/11555301.html

1.什么是视口? 视口简单理解就是可视区域大小我们称之为视口 在PC端，视口大小就是浏览器窗口可视区域的大小（窗口多大，可视区域/视口就多大） 在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980 2.为什么是980而不是其他的值? 因为过去网页的版心都是980 乔布斯为了能够让网页在移动端完美的展示, 所以将iOS手机视口的大小定义为了980 后来谷歌也觉得这是一个非常牛X的方案, 所以Android手机的视口也定义为了980 3.移动端自动将视口宽度设置为980带来的问题——内容被缩小 虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页 但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的 所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小 4.如何保证在移动端不自动缩放网页的尺寸?——视口大小同可视区域大小 通过meta设置视口大小 width=device-width 设置视口宽度等于设备的宽度 initial-scale=1.0 初始缩放比例, 1不缩放 maximum-scale：允许用户缩放到的最大比例 minimum-scale：允许用户缩放到的最小比例 user-scalable：用户是否可以手动缩放，手指缩放 注意点：以上属性有可能在模拟器上无用，需要真机测试 来源： https://blog

移动布局 1. 移动设备 手机 和 ipad 安卓系统 ios 系统 安卓系统 内置浏览器是谷歌 ios 内置 safari 浏览器 他们的内核都是 webkit ，不考虑兼容性，需要考虑的是安卓和 ios 的区别。 2，布局 设备宽度 设备的实际大小 设备的分辨率 厂家给的 页面的大小 设计稿上的大小 浏览器的视口 浏览器自带的用 document.documentElement.clientWidth 查看， 在移动设备上如果不做视口处理一般默认是 980 ， 例子 设备宽是 320 页面宽是 1200 浏览器视口是 980px 三种不统一，我们用移动设备看页面，浏览器的视口会自动缩小，以 100% 完整展示页面，就会变的不清楚，特别挤。我们需要把这三个变的统一。 移动设备宽（ 320 ）和浏览器视口（ 980 ）宽一致 在 head 之间加一个 meta 标签 name= ”viewport” <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 设备宽度和浏览器视口一致时 如果页面宽大于这个数字，就会出现滚动条。 2. 当移动设备和浏览器视口一致时，如果还使用以前的布局，如果页面超过设备宽

移动布局 　　1，移动设备 手机 和 ipad 　　　　安卓和ios系统 　　　　安卓系统 内置浏览器是谷歌ios内置safari浏览器他们的内核都是webkit，不考虑兼容性，需要考虑的是安卓和ios的区别 　　2.布局 　　　　设备宽度 设备的实际大小 设备的分辨率 厂家给的 　　　　页面的大小 设计稿上的大小 　　　　 浏览器的视口 浏览器自带的用 document.documentElement.clientWidth 查看在移动设备上如果不做处理一般默认是980。 　　　　　　 　　　　例子 设备宽是320页面宽是1200浏览器视口是980px 三种不统一，我们用移动设备看页面，浏览器的视口会自动调节，以100%完整页面 就会变得不清楚 ，特别挤。 　　我们需要把这三个变的统一。 　　　　1.移动设备宽(320)和浏览器视口(980)宽一致 　　在head之间加一个meta标签 name=“viewport” <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 　　　　2.当移动设备和浏览器视口一致时，如果还使用以前的布局，如果页面超过设备宽，超过部分会被截掉。不能使用传统的页面开发模式了

一. 移动布局 　　　　移动设备: 手机 和 ipad 　　　　安卓系统(内置浏览器是谷歌) 和 ios系统(内置Safari浏览器) 它们的内核都是webkit,所以不考虑兼容性,只需要考虑安卓和ios系统的区别 二.布局　 　　设备宽度:设备的实际大小　　 设备的分辨率 是厂家给的 　　页面的大小:　　是设计稿上的大小 　　浏览器的视口:　　浏览器自带的用document.documentElement.clientWidth查看, 在移动设备上如果不做视口处理一般都是默认的980； 　 例子: 设备的宽是320 页面宽是1200 浏览器视口是980px 三者不统一,我们用移动设备看页面,浏览器的视口会自动缩小，以100%完整展示页面,就会变得不清楚，特别挤，我们需要把这三者变统一 　　1.移动设备宽(320)和浏览器视口宽（980）一致 　　　　在head标签之间加一个meta标签 name="viewport" 　　　　　　<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"　/> 　　　　设备宽度和浏览器视口一致时,如果页面宽大于这个数字,就会出现滚动条。 　　2.当移动设备和浏览器视口一致时

1.移动设备 手机和ipad 系统：安卓系统、ios系统 安卓系统：内置浏览器是谷歌 ios系统：内置Safari浏览器，他们的内核是webkit，不考虑兼容性，需要考虑的是安卓和ios的区别 2.布局 布局考虑： 　　设备的实际大小，设备的分辨率，厂家（设计者）给的分辨率 　　页面的大小，设计稿上的大小（设计稿上的大小是多大，开发的页面大小就是多大） 　　浏览器的视口，浏览器自带的document.documentElement.clientWidth,在移动设备上如果不做处理查看一般默认是980 　　eg：设备宽是320px，页面宽是1200px，浏览器视口是980px，三者统一，我们用移动设备看页面，页面的视口会自动缩小，以100%完整的展示页面，但是就会变得不清楚，特别挤，视觉效果极差 　　 解决： 　　需要把这三个变得统一 　　（1）移动设备（320）和浏览器视口（980）一致，在head之间加一个meta标签 name=“viewport” 　　<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1,maximum-scale=1,user-scalable=no" /> 　　移动设备宽度和浏览器视口一致时，如果页面宽度大于整个数字，就会出现滚动条 　　（2

移动布局 1.移动设备有 手机和ipad 安卓系统 ios系统 安卓系统的内置浏览器是谷歌 ios内置 safari浏览器 他们的内核都是web，不考虑兼容性，需要考虑的问题是安卓和ios的区别问题 2.布局(写页面) 要考虑以下几点 设置的宽度 设备的实际大小（设备的分辨率）厂家给的 页面的大小 设计稿上的大小 浏览器的视口（大小）浏览器自带的可以通过用 document.documentElement.clientWidth 查看，在移动设备上如果不做视口处理默认是 980 例子：设备宽是320 页面宽是1200 浏览器视口是980px，三者不统一，我们用移动设备看页面，浏览器视口会自动缩放，以100%完整的展示页面，就会变得不清楚，特别挤。 第一我们需要把这个三个变得统一 1.移动设备宽(320) 要和浏览器视口宽一致 在head之间加一个meta标签 name=‘viewport’ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 设备宽度和浏览器视口一致时，如果页面大于这个数字，就会出现滚动条 2.当移动设备和浏览器视口一致时，如果还使用以前的布局，如果页面超过设备宽，超过的部分会被截掉

【 Unity3D的四种坐标系 】 1、World Space（世界坐标）：我们在场景中添加物体（如：Cube），他们都是以世界坐标显示在场景中的。transform.position可以获得该位置坐标。 2、Screen Space（屏幕坐标）:以像素来定义的，以屏幕的左下角为（0，0）点， 右上角为（Screen.width，Screen.height） ，Z的位置是以相机的世界单位来衡量的。注：鼠标位置坐标属于屏幕坐标， Input.mousePosition 可以获得该位置坐标，手指触摸屏幕也为屏幕坐标， Input.GetTouch(0).position 可以获得单个手指触摸屏幕坐标。 　　Screen.width = Camera.pixelWidth 　　Screen.height = Camera.pixelHeigth 3、ViewPort Space（视口坐标）:视口坐标是标准的和相对于相机的。相机的左下角为（0，0）点，右上角为（1，1）点，Z的位置是以相机的世界单位来衡量的。 4、绘制GUI界面的坐标系：这个坐标系与屏幕坐标系相似，不同的是该坐标系以屏幕的左上角为（0，0）点， 右下角为（Screen.width，Screen.height） 。 【 四种坐标系的转换 】 1、世界坐标→屏幕坐标：camera.WorldToScreenPoint