屏幕分辨率

学习笔记@逆战班 移动端的布局主要分为四类，分别是流式布局，rem布局，响应式布局和弹性布局。四种布局都能很好的适应手机屏幕分辨率。 1 、流式布局：通过设置viewport可视窗口： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 布局窗口等于可视窗口。这样的布局方式，就是移动web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。流式布局优点是大屏幕下能显示更多内容，充分利用可视空间，使用户能在大分辨率的屏幕下获取更多信息。但是在相对较宽的比例下会有些不协调，屏幕显示的内容可能会不对称。 2、 rem布局 首先，1rem等于html标签的font-size值，rem布局就是通过在不同分辨率下html的font-size值的调节，适配不同的设备进行等比缩放。这时候又引进了一个新的单位“VW”，通过VW、rem、html的font-size值三个单位的转换，达到rem布局。屏幕分成100等份。1%等于1vw，根据iphone6、7、8下屏幕分辨率是375px，可得1vw == 3.75px，100px == 26.666667vw，所以设置html根元素的font-size值为26.666667vw，在iphone6、7、8下同样的100px等于100px，iphone6

3 月，跳不动了？>>> 先来罗列下学习移动页面重构的过程中可能看到过迷糊过放弃过的一些单位： px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi…… 接下来分类给大家介绍下： ① 什么是绝对长度单位？什么是相对长度单位？ ② 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？ ③ 什么是ppi、dpi、dp、dip、sp、px？他们之间的关系是什么？ ④ 什么是mdpi、hdpi、xdpi、xxdpi？如何计算和区分？ 1、什么是绝对长度单位？什么是相对长度单位？ 绝对长度单位：in（inch英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica）。in、cm、mm和实际中的常用单位完全相同。pt是标准印刷上常用的单位，72pt的长度为1英寸。pc也是印刷上用的单位，1pc的长度为12磅。绝对长度单位，虽然理解起来很容易，但是在网页的设计中很少用到。所以我们就忽略它们吧。 2、什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？ 屏幕尺寸： 指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。 屏幕分辨率： 指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960*1080。

原文： https://www.jianshu.com/p/b0253e457031 前言 最近要给项目换几个图片资源外加调整一下UI尺寸细节，发现项目里面使用了有很多类似这种限定屏幕分辨率的配置限定符： 屏幕分辨率配置限定符 乍一看以为是针对特定的屏幕弄的一些特殊资源，似乎用法是当且仅当屏幕像素点数量和限定符一致时就能匹配到，所以里面会放一些针对该分辨率的特殊资源。然而经过一番测试，实际情况并不是我想象的那样，甚至让我产生了更多疑问。 AxB的写法，到底A和B，哪个代表宽度，哪个代表高度？ A和B的单位是dp还是px？ 为什么某些情况下匹配不到我指定的屏幕分辨率目录下的资源？ 目前已公开的情报 文档 遇到这种问题，第一个当然是要查关于配置限定符的 官方文档 ，然而文档里并没有提到AxB这种写法的配置限定符，官方文档里列出了19个配置限定符（截至API 27），按照顺序，它们分别是：MCC和MNC，语言和区域，布局方向，最小dp宽度，可用dp宽度，可用dp高度，屏幕尺寸（值为normal, xlarge等），屏幕纵横比，是否圆形屏幕，UI模式，是否夜间模式，屏幕像素密度（值为hdpi, xhdpi等），触摸屏类型，键盘可用性，主要文本输入法（感觉叫 硬件键盘类型 更准确），导航键可用性，主要非触摸导航方法，平台版本。 完全没有提到屏幕分辨率限定符这种写法

web项目，因要适配不同的屏幕分辨率。调整屏幕分辨率（web开发永远的痛！）。 机器情况：win10,电脑最大支持分辨率1440*900，手贱不小心点到了1600*900，然后喜闻乐见的输入不支持。黑屏过后，屏幕上方就出现了一条黑边，传统解决方法，调整分辨率和按显示器上的auto键都无济于事。 解决方案：显卡设置：图形属性----》显示器-------》在这里面调整分辨率即可。 这里面调整的有效果 来源： https://www.cnblogs.com/miaomiaoquanfa/p/8384712.html

这里我们先谈第一个问题坐标矩阵变化实现布局自适应。 选取基准尺寸 通常你需要选择一个基准的屏幕尺寸，象现在开发的应用也需要跨平台在iOS(iPhone/iPad)/Android都可以运行，我这边选取的是iphone4的屏幕尺寸: 480 * 320. 设计师设计的GUI的素材时就是按照这个尺寸来设计。但是紧接着的问题是如何保证它在其他不同尺寸/分辨率的平台上运行时不会出现各种诡异的位置大小错乱了。 举一个实际的例子来更好描述这个问题，比如我们的游戏是水平方向的， 然后游戏进行中间的暂停界面中，有三个角落有按钮或着标签，屏幕中间有一个按钮，如下图所示： 很简单的代码： void OnGUI() { GUI.Box(new Rect(15 , 10, 83, 49), bg_score); GUI.Box(new Rect(372, 10, 98, 44), bg_time); if (GUI.Button(new Rect(5, 280, 67, 41), bt_pause)) { //pause the scene } } 伸缩居中 在Unity中我们将Game窗口的模式选择为iPhone Wide(480x320)， 然后运行游戏， 木有什么问题。 紧接着尝试运行在iPhone 4G Wide(960x640)， 你就会发现问题了，整个格局错乱了，并没有有比例的伸缩

笔记本屏幕分辨率多少比较合适，台式机屏幕分辨率多少合适。下面是比较常用的各个尺寸的屏幕分辨率设置。 屏幕尺寸是指笔记本屏幕对角线的尺寸，一般用英寸来表示。常见的笔记 笔记本屏幕分辨率多少比较合适，台式机屏幕分辨率多少合适。下面是比较常用的各个尺寸的屏幕分辨率设置。 　　 　　屏幕尺寸是指笔记本屏幕对角线的尺寸，一般用英寸来表示。常见的笔记本屏幕尺寸有：12.1英寸、13.3英寸；14英寸和15英寸。 　　屏幕的尺寸可以从一定程度上决定了它的重量。对于追求移动性的超轻薄机型，大都采用的是14英寸以下的液晶屏，而14英寸和15英寸则是一些同时注重性能与便携性的机型最常见的屏幕尺寸。例如现在主流的学生机。而定位为台式机替代品的大型笔记本通常采用15.4和15.6英寸，还有些电脑采用了17.3英寸的屏幕。 　　如果想要震撼的视觉效果，大屏幕当然是首选，但这样也降低了笔记本的便携性。所以选择一款适合自己的笔记本，屏幕尺寸也是很重要的。 　　在各个尺寸的屏幕中，还分不同的屏幕比例，常见的屏幕笔记有16:9和16:10。 　　笔记本各个尺寸所对应的分辨率如下： 　　12.1寸 1280*800 　　13.3寸 1024*600或1280*800 　　14.1寸 1366*768 　　15.4寸 1280*800或1440*900 　　15.6寸 1600*900 台式机显示器最佳分辨率： www

对于前端开发工程师来说，对于网页设计中，进行相应的布局，其布置的方式多种多样，对于不同的情况有不同的处理方法，但是很多设计师并不了解这些情况，接下来，小编带领大家了解 网页布局设计 五种方式。 一、静态布局 在传统的网页设计中，网页上所有元素的大小都是px。 1. 布局特征 无论浏览器的确切大小如何，页面的布局始终与第一次编写代码时相同。常规的PC站点是静态布局的，具有最小宽度，因此，如果宽度小于此值，则显示滚动条，如果宽度大于此值，则显示内容居中和背景。这种设计在PC上很常见。 2. 设计方法 PC:中心布局，所有样式使用绝对宽度/高度(px)，设计一个布局，在屏幕的宽度和高度已经调整，使用水平和垂直滚动条检查覆盖部分; 移动设备:建立一个单独的移动网站，设计一个单独的布局，并使用一个不同的域名，如wap。或者m。 优点:这种布局对设计师和CSS作者来说都是最简单的，并且没有兼容性问题。 缺点:很明显你不能改变用户的屏幕尺寸。目前，大多数门户网站、大多数企业PC广告网站都采用了这种布局。固定像素大小的web页面是匹配固定像素大小的显示的最简单方法。然而，这种方法不是一种完全兼容的方式来创建未来的web页面。我们需要一些方法来适应未知的设备。 二、流式布局 液体版面(也称为“流体”)的特点是页面元素的宽度根据屏幕分辨率进行调整，但总体版面不变。代表性围栏系统(网格系统)。 例如

1. 名词理解 屏幕尺寸(screen size) 　　 屏幕尺寸(screen size) ，是屏幕的对角线长度，一般讲的大小单位都是英寸。 DPI (dots per inch) 　　dpi 是（英文Dots Per Inch）（每英寸所打印的点数）的缩写，是打印机、鼠标等设备分辨率的单位。国际上都是计算 一平方英寸面积内像素的多少 。这是衡量 打印机打印精度 的主要参数之一，一般来说， 该值越大，表明打印机的打印精度越高 。如果对于扫描设备，dpi越大，则采样点越高，扫描的图片越清晰。 　　可以理解为 像素的密度 ，即单位面长度上的所打印点的数量。 PPI (pixels per inch) 　　PPI (pixels per inch)（每英寸的像素数量）的缩写 像素(Pixel) （1）对于数字图像来说　 　　简单的说，我们通常所说的像素，就是CCD/CMOS上光电感应元件的数量，一个感光元件经过感光，光电信号转换，A/D转换等步骤以后，在输出的照片上就形成一个点，我们如果把影像放大数倍，会发现这些连续色调其实是由许多色彩相近的小方点所组成，这些小方点就是构成影像的最小单位 “像素”（Pixel） 。如果这些感光点的是彩色像素点，把一个数字图像方法到一定程度，可以看到一个个像素点，如下图所示： 　　 （2）对于硬件显示设备来说 　　对于计算机的屏幕设备而言，像素

一、静态布局（static layout） 　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点 　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。 2、设计方法 　　 PC： 居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 　　 移动设备： 另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。 优点 ：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。 缺点 ：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。 二、流式布局（Liquid Layout） 　　流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。 　　网页中主要的划分区域的 尺寸使用百分数

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