像素分辨率

移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 ... 上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等。 本文将从移动端适配的基础概念出发，探究移动端适配各种问题的解决方案和实现原理。 一、英寸 一般用英寸描述屏幕的物理大小，如电脑显示器的17、22，手机显示器的4.8、5.7等使用的单位都是英寸。 英寸和厘米的换算：1英寸 = 2.54 厘米 二、物理像素 2.1 像素 像素即一个小方块，它具有特定的位置和颜色。 图片、电子屏幕（手机、电脑）就是由无数个具有特定颜色和特定位置的小方块拼接而成。 像素可以作为图片或电子屏幕的最小组成单位。 2.2 物理像素 到电商网站购买手机，都会看一看手机的参数，以apple的官网上对手机分辨率的描述为例： iPhone XS Max 和 iPhone SE的分辨率分别为2688 x 1242和1136 x 640。表示手机分别在垂直和水平上所具有的像素点数。 这里描述的就是屏幕实际的物理像素，即一个屏幕具体由多少个像素点组成。 屏幕从工厂出来那天起

机器视觉入门知识总结 一、机器视觉系统 工业相机类型： 按照输出信号类型的不同分为模拟相机和数字相机两种。而数字相机按照接口标准不同，可以分为1394相机、USB相机、CameraLink相机以及Gige相机四种。其中CameraLink接口相机能够解决大数据量传送问题；Gige接口相机能够解决长距离、快速传输问题；而1394相机和USB接口相机具有简单易用、性价比高等特点； 镜头接口类型： C接口、CS接口、U接口等； 光源类型： 环形光源、背光源、同轴光源、条形光源、点光源、球积分光源等； 二、如何选择相机？ 1 、根据应用的不同分别选用 CCD 或 CMOS 相机 CCD工业相机主要应用在运动物体的图像提取，当然随着CMOS技术的发展，很多贴片机也在选用CMOS工业相机。用在视觉自动检查的方案或行业中一般用CCD工业相机比较多。CMOS工业相机由成本低，功耗低也应用越来越广泛。 2 、分辨率的选择 　　根据系统需求来选择分辨率大小。首先考虑待观察或待测量物体的精度，根据精度选择分辨率。相机像素精度=单方向视野范围大小/相机单方向分辨率。则相机单方向分辨率=单方向视野范围大小/理论精度。若单视野为5mm长，理论精度为0.02mm，则单方向分辨率=5/0.02=250。然而为增加系统稳定性，不会只用一个像素单位对应一个测量/观察精度值，一般可以选择倍数4或更高

某天某小编利用上班时间在“吃鸡”（玩绝地逃生），用着最牛X的超级小钢炮游戏配置（i7-7700K+GTX 1080 Ti），按道理来说4K画质下起码流畅才是，可总觉得一卡一顿的，游戏体验十分糟糕，最后连“鸡”都吃不成。检查驱动、显卡设置都没有问题，某小编一时间犯了难，难道真的是技不如人？ 经过高人指点，终于发现了端倪，在游戏显示选项中，我们赫然发现4K分辨率下屏幕刷新了最高只有30帧，原来是我们用的视频输出接口线有问题！HDMI 1.4线材先天条件决定其最高仅支持3840 x 2160@30Hz或4096×2160@24Hz。换而言之，某小编用错线材了，要想体验完美的4K@60Hz还需DisplayPort 1.4/HDMI 2.0的线。那么HDMI、DVI、DisplayPort不同版本线材又一一对应什么样的分辨率和功能呢？我们将一一为你解答。 VGA的历史 VGA接口的历史可谓是悠久，诞生于1987年，发明者正正是蓝色巨人IBM，采用模拟信号的视频标准。VGA接口共有15针，分成3排，每排5个孔，用于传输红、绿、蓝三色模拟信号以及行场同步信号(水平和垂直信号)。 大部分都知道VGA分辨率指的就是640×480，但并不清楚其实VGA接口其实能支持输出1080P以上分辨率的图像，但是为什么它被淘汰了呢？ 原因很简单，因为VGA是模拟接口，传输的还是模拟信号，首先抗干扰能力差

1、多源图像-多视角 超分辨率图像复原综述_真印良品_新浪博客 http://blog.sina.com.cn/s/blog_91991d6501018cjr.html 从多幅LR图像中得到HR图像： 信息，这样就不能为HR图像的复原提供新的信息。如果每幅LR图像彼此之间都是不同的亚像素平移，那么它们彼此之间就不会相互包含，在这种情况下，每一幅LR图像都会为HR图像的复原提供一些不同的信息。为了得到同一场景的不同侧面，必须通过一帧接一帧的多场景或者视频序列的相关的场景运动。我们可以通过一台照相机的多次拍摄或者在不同地点的多台照相机获取多个场景，例如在轨道卫星一类可控制的图像应用中，这种场景运动是能够实现的；对于局部对象移动或者震荡一类的不可控制的图像应用也是同样能实现的。如果这些场景运动是已知的或者是在亚像素精度范围了可估计的，同时如果我们能够合成这些HR图像，那么SR图像复原是可以实现的。 多帧超分辨率的概念。左侧的网格表示具有子像素对齐的相同场景的LR图像，因此可以通过将补充信息与SR方法融合来获取HR图像（右侧的网格）。 图像超分辨率：技术，应用和未来 - 简书 https://www.jianshu.com/p/a36a333e8200 2、多来源 多源图像超分辨率重建研究 http://www.wanfangdata.com.cn/details/detail.do?

方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用 rem 1. 简单问题简单解决 我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边 这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： 这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4： 这是6： · 6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从 代码 也可以证实这一点：

视频格式可以分为适合本地播放的本地影像视频和适合在网络中播放的网络流媒体影像视频两大类。尽管后者 在播放的稳定性和播放画面质量上可能没有前者优秀，但网络流媒体影像视频的广泛传播性使之正被广泛应用于视 频点播、网络演示、远程教育、网络视频广告等等互联网信息服务领域。 注：原始的视频数据可以理解为通过摄像头等驱动获取的没有经过编码的数据，市面上 usb 摄像头输出格式常见的 有：RGB24、YUV2、YV2（这些都是没有编码的原始数据），MJPEG（经过编码的数据）。摄像头捕捉的数据也是 可以设置的，比如 windows 下用 cap 来设置。 MPEG/MPG/DAT MPEG（运动图像专家组）是 Motion Picture Experts Group 的缩写。这类格式包括了 MPEG-1,MPEG-2 和 MPEG-4 在内的多种视频格式。MPEG-1 相信是大家接触得最多的了，因为其正在被广泛地应用在 VCD 的制作和一些视频 片段下载的网络应用上面，大部分的 VCD 都是用 MPEG1 格式压缩的( 刻录软件自动将 MPEG1 转换为 DAT 格 式 ) ，使用 MPEG-1 的压缩算法，可以把一部 120 分钟长的电影压缩到 1.2 GB 左右大小。MPEG-2 则是应用在 DVD 的制作，同时在一些 HDTV（高清晰电视广播）和一些高要求视频编辑、处理上面也有相当多的应用

线阵相机 　　主要应用于工业、医疗、科研与安全领域的图象处理。 在机器视觉领域中，线阵相机是一类特殊的视觉机器。与面阵相机相比，它的传感器只有一行感光元素，因此使高扫描频率和高分辨率成为可能。线阵相机的典型应用领域是检测连续的材料，例如金属、塑料、纸和纤维等。被检测的物体通常匀速运动 , 利用一台或多台相机对其逐行连续扫描 , 以达到对其整个表面均匀检测。可以对其图象一行一行进行处理 , 或者对由多行组成的面阵图象进行处理。另外线阵相机非常适合测量场合，这要归功于传感器的高分辨率 , 它可以准确测量到微米。 　　1，线阵相机，机顾名思义是呈“线”状的。虽然也是二维图象，但极长，几K的长度，而宽度却只有几个象素的而已。一般上只在两种情况下使用这种相机：一、被测视野为细长的带状，多用于滚筒上检测的问题。二、需要极大的视野或极高的精度。 　　2，在第二种情况下（需要极大的视野或极高的精度），就需要用激发装置多次激发相机，进行多次拍照，再将所拍下的多幅“条”形图象，合并成一张巨大的图。因此，用线阵型相机，必须用可以支持线阵型相机的采集卡。 线阵型相机价格贵，而且在大的视野或高的精度检测情况下，其检测速度也慢－－一般相机的图象是 400K～1M，而合并后的图象有几个M这么大，速度自然就慢了。慢功出细活嘛。由于以上这两个原因，线阵相机只用在极特殊的情况下。 　　面阵相机 　

相信大家在面试的过程中总会被问到如何处理自适应这样的相关问题，自适应其实就是根据视口的大小或者说用户平台的不同呈现出不同或相同的样式，有这么几种方案： 使用flexbox弹性布局的方法 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用 rem ---------------------------分------------割------------------------------------- 淘宝rem的例子 看看淘宝在不同分辨率下，呈现的效果： 淘宝的效果跟网易的效果其实是类似的，随着分辨率的变化，页面元素的尺寸和间距都相应变化，这是因为淘宝的尺寸也是使用了rem的原因。在介绍它的做法之前，先来了解一点关于viewport的知识，通常我们采用如下代码设置viewport: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。这个device-width的计算公式为： 设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率

以下内容到分割线前是引用前端大牛的文章，方便大家理解博主内容 ）： 从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决 我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边 这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： 这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4： 这是6： via 6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从 代码 也可以证实这一点：原文来自：http:/

第一种、参考网易的 （我现在用这个多） https://www.cnblogs.com/well-nice/p/5509589.html 1 var deviceWidth = document.documentElement.clientWidth; 2 if(deviceWidth > 750) { deviceWidth = 750; } 3 document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px'; 备注：body要加个样式：width:7.5rem 这是针对设计图为750的，如果是640，就/640 （1）先拿设计稿竖着的横向分辨率除以100得到body元素的宽度： 1 如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem 2 如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem （2）布局时，设计图标注的尺寸除以100得到css中的尺寸，比如下图： 播放器高度为210px，写样式的时候css应该这么写：height: 2.1rem。之所以取一个100作为参照，就是为了这里计算rem的方便！ （3）在dom ready以后，通过以下代码设置html的font-size: 1