像素分辨率

viewport 语法介绍 <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] "/> width 控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height 和 width 相对应，指定高度。 initial-scale 初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。 maximum-scale 最大缩放

方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用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肯定是做过适配的，从 代码 也可以证实这一点：

前言 现在手机屏幕分辨率越来越多，但我们的需求比较唯一——最佳视觉。 当用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的布局、文字、图片、按钮等等，因此，rem应运而生。 rem（font size of the root element）是指相对于根元素的字体大小的单位。一旦根节点html 定义的 font-size 变化，那么整个网页中运用到 rem的也会随之变化。加之当前手机淘汰速度较快，当前主流的手机内嵌浏览器内核版本均可以支持rem布局。 开撸 一般移动端的UI设计稿会采用iphone6宽度像素的尺寸作为标准——750，具体理由自行百度下，这里不再过多赘述。竖向一般不用考虑，基本是流布局，非限定一屏高度的话无影响。 本文以750设计稿为例。 第一步：设置初始rem css file: html { font-size : calc( 100 vw/ 7.5 ) ; } 说明： 100vw是设备的宽度，除以7.5可以让1rem的大小在iPhone6下等于100px。 第二部 全局px替换为rem 替换设计稿中的px为rem，注意rem=px/100，即font-size: 12px，需要写成font-size: .12rem，其他宽度、高度、间距等同理。由于rem是相对于根节点元素大小的单位，遂当设备宽度改变时，采用rem布局的大小均会跟随相同比例变化

iOS中各手机的分辨率为： 5.5寸： 1242*2208; 4.7寸： 750*1334; 4.0寸： 640*1136; 3.5寸： 640*960; ipad: 768*1024 ipad pro: 2048*2732 软件的图标有以下需求（注意选中右侧红色框中这一条）： 也就是总共需要29pt、40pt、60pt的图共计6张， 这六张图使用一个叫app iron gear的软件一键生成。这个软件可以在苹果商店免费下载。 先设计出一个1024*1024像素的软件图标的大图的png格式，然后把这个格式拖入到app iron gear中，即可生成需要的六张图。点击右上角的文件夹就可打开生成的图标所在的文件夹，然后倒入Xcode中的图片资源管理中就可以了。 下图是两个详图： 软件同时生成了iPhone、Android、iPad、Watch、Mac上的各种图标，勾选自己需要的即可。打开右上角的文件夹就可以找到生成的图标。 来源： oschina 链接： https://my.oschina.net/u/2660864/blog/667623

普通的显示，接上 MacBook 发现原生的分辨率设置在 2K 显示器上字体很小，换成 1080P 分辨率显示效果又特别模糊。下面介绍MacBook强行开启 HiDPI。 什么是 HiDPI 它使用横纵 2 个物理像素也就是 4 个物理像素来显示 1 个像素区域，结果就是图像的细节得到翻倍、更清晰、边缘更平滑。 拿 13 寸的 MacBook Pro 举例，它的屏幕物理分辨率是 2560 x 1600，所以原生的 HiDPI 分辨率就是 1280x800。更高的一档 1440x900 HiDPI 缩放分辨率，则是虚拟出一个 2880x1800 的分辨率，再进行软缩放输入。所以你能发现苹果的电脑总是有很高的分辨率。 好了，既然你的屏幕是 1080p，本身就没有那么多像素去合成 HiDPI，如果以原生的显示计算，你这屏幕的 1080p 分辨率应该是 960x540，这么低的分辨率你是没法用的。 这个脚本的功能就是虚拟出比你的屏幕物理分辨率更高的假分辨率……如果你要开启 1080p 的 HiDPI 分辨率，就虚拟一个 3840 x 2160 的假分辨率，然后 macOS 会使用 4 个像素来显示 1 个像素区域，也就是和你物理分辨率一样的 1080p 分辨率。 手动配置 HiDPI 本教程测试环境： 笔记本：MacBook Pro (Retina, 15-inch, Mid 2015)

2014-09-12 richardbao @richardbao 现如今 iPhone 在尺寸上终于“百花齐放”了，有点向 Android 世界发展的趋势。至日前 Apple 发布 iPhone 6 和 iPhone 6 Plus 时，iPhone 家族有了如下五种不同的屏幕： 首先是以实际物理尺寸为准的相对大小，如下图绿色所示： 然而由于屏幕的实际像素密度（ppi）不同，如果按实际像素的数量来比较的话，得到的是下面的相对大小，如蓝色所示： 可以看到，第一代屏幕因为是非 Retina 的，虽然物理尺寸和 iPhone 4/4S 一样，但像素数量少得可怜。而最新发布的 iPhone 6 Plus 虽然设备尺寸比 iPhone 6 只是稍大，但实际像素却多了许多，不愧是 401ppi 的屏幕。 但是，这个 401ppi 的屏幕和之前的 326ppi 的 Retina 屏幕相比，大了不少，但又不够大。在 Retina 绘图系数上显得很尴尬。 比如说，我们在这个屏幕上继续使用 @2x 系数的 Retina，那么同样的一张照片应该显示如下： 此时，1080px 对应的逻辑像素是 540 pt @2x。当我们将其调整回真机物理尺寸的时候，会发现 iPhone 6 Plus 上的图反而变小了： 这样会导致一个尴尬的结果：用户拿着一个大屏手机，字却反而比小屏幕手机更小，更看不清楚。因此，@2x

阿里P7移动互联网架构师进阶视频（每日更新中）免费学习请点击： https://space.bilibili.com/474380680 本篇文章将推荐一种非常好用的Android屏幕适配: 更新：由于该适配方案越来越多人使用，也有很多人遇到不太理解的问题。所以为了大家更好的使用，我将文章很多内容更新了，老用户可以重新看下整篇文章。主要更新的内容是使用方法跟以前不同了，以前是不改变最小宽度基准值，根据 UI 图来计算布局中设置的值。现在改成最小宽度基准值与设计图一致，然后设计图标注多少 dp 就写多少 dp，非常方便。还整理了评论区比较多人问到的问题作统一回答。 前言 网上关于屏幕适配的文章已经铺天盖地了，为什么我还要讲？因为网上现在基本都是使用 屏幕分辨率限定符 进行适配，即每种屏幕分辨率的设备需要定义一套 dimens.xml 文件。由于不同分辨率的设备太多了，而且有些设备还有虚拟按键（例如华为手机），这样就还需要每个有虚拟按键的设备加多一套 dimens.xml 文件，再加上平板那些你会发现 dimens.xml 文件所占的体积已经超过2M了！这绝对不是我们想要的。 我这里要讲的是使用 sw<N>dp限定符，即 smallestWidth（最小宽度） 限定符 来进行适配，使用这种方式只需要少量 dimens.xml 文件即可达到适配，而且根本不用考虑虚拟按键的问题

一、这是篇经验分享 就算不是果粉也应该知道，iPad2与new iPad的重大区别之一就是显示屏的分辨率。new iPad显示屏被称之为“视网膜显示屏”，其 设备分辨比 （之前有详细介绍， 点击这里 查看）是iPad2的两倍。 – iPad mini也是普通分辨比。 iPad2与new iPad同时显示一个页面，宽度都是1024像素的，那差别在什么地方呢？——就在于new iPad每个像素点实际上有4倍的普通像素点，如下示意(© smashingmagazine)： 我们使用CSS设置的像素值(px)属于普通像素点，或者称之为标准像素点。 因此，一张200×200尺寸的图片，我们设置如下CSS: img { width: 200px; height: 200px; } 在iPad2或Mini iPad中就是很正常显示的图片；但是，在New iPad中，1个CSS像素点实际上有4个位图像素点，1个分成4个，显然不够分啊，只能颜色 近似选取 ，于是，图片感觉就是模糊的(© smashingmagazine)！ 因此，要想让视网膜屏幕下的图片高清晰显示，我们需要的图片的原始大小不能是200×200像素，而需要2倍高宽，即400×400像素，CSS像素限制依然是： img { width: 200px; height: 200px; } 此时，视网膜屏幕下图片就显示OK了

像素 PIXEL 图片的基本单位 像素非常小 图片是成千上万的像素组成 显示/屏幕分辨率 （DPI 屏幕分辨率） 图像分辨率 （PPI） 1920*1080是像素点长度1920个像素点 X1080个像素点 分辨率： 帧：1秒60帧 【转】分辨率、帧率和码率三者之间的关系 原贴地址：https://blog.csdn.net/lipengshiwo/article/details/53169235 帧率：FPS（每秒钟要多少帧画面）； 以及Gop（表示多少秒一个I帧） 码率：编码器每秒编出的数据大小，单位是kbps，比如800kbps代表编码器每秒产生800kb（或100KB）的数据。 分辨率：单位英寸中所包含的像素点数； VGA：Video Graphics Array（视频图像分辨率） 三者的对应直播质量的影响因素： 帧率：影响画面流畅度，与画面流畅度成正比：帧率越大，画面越流畅；帧率越小，画面越有跳动感。如果码率为变量，则帧率也会影响体积，帧率越高，每秒钟经过的画面越多，需要的码率也越高，体积也越大。帧率就是在1秒钟时间里传输的图片的帧数，也可以理解为图形处理器每秒钟能够刷新几次。 分辨率：影响图像大小，与图像大小成正比：分辨率越高，图像越大；分辨率越低，图像越小。 清晰度 在码率一定的情况下，分辨率与清晰度成反比关系：分辨率越高，图像越不清晰，分辨率越低，图像越清晰。

说明位图,矢量图,像素,分辨率，PPI,DPI？ 显示全部 关注者 28 被浏览 7,031 关注问题 写回答 ​邀请回答 ​添加评论 ​分享 ​ 2 个回答 默认排序 刘凯 21 人赞同了该回答 位图：位图图像（bitmap）, 亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。只要有足够多的不同色彩的像素，就可以制作出色彩丰富的图象，逼真地表现自然界的景象。缩放和旋转容易失真，同时文件容量较大。bmp，jpg，gif，png。便携式网络图形（Portable Network Graphics，PNG）是一种无损压缩的位图图形格式，截图首选png格式。 矢量图像：由数学向量组成，文件容量较小，在进行放大、缩小或旋转等操作时图象不会失真，缺点是不易制作色彩变化太多的图象。 像素：像素，又称画素，为图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意。像素表示图形尺寸的大小。不同设备显示效果相同。这里的“相同”是指像素数不会变，比如指定UI长度是100px，那不管分辨率是多少UI长度都是100px。也正是因为如此才造成了UI在小分辨率设备上被放大而失真