移动端设计尺寸基础知识
作者：佚名　来源：可乐橙　时间： 标签：
初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。
首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720xx1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x34, 。
不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。
要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。
所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。
Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。
倍率与逻辑像素
再用iPhone 3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。
在现实中，这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。
在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。
由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。
Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。
如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率：
ldpi [0.75倍]
mdpi [1倍]
hdpi [1.5倍]
xhdpi [2倍]
xxhdpi [3倍]
xxxhdpi [4倍]
各型号iPhone的倍率比较简单，我们后面会讲到。那么Android手机那么多，具体怎么分？哪些手机是几倍的倍率呢？我们先看一张表，这是友盟2014年10月到2015年03月的数据：
就目前市场状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在1年内都还有一定的参考意义：
ldpi 如今已绝迹，不用考虑
mdpi [320x480]（市场份额不足5%，新手机不会有这种倍率，屏幕通常都特别小）
hdpi [480x800、480x854、540x960]（早年的低端机，屏幕在3.5英寸档位；如今的低端机，屏幕在4.7-5.0英寸档位）
xhdpi [720x1280]（早年的中端机，屏幕在4.7-5.0英寸档位；如今的中低端机，屏幕在5.0-5.5英寸档位）
xxhdpi []（早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上）
xxxhdpi []（极少数2K屏手机，比如Google Nexus 6）
自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。
不过需要注意的是，Android设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480x800和，它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320x533和360x640。很显然，后者更宽更高，能显示更多内容。所以，即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致。
不难发现，真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。
单位之间的换算关系随倍率变化：
1倍：1pt=1dp=1px（mdpi、iPhone 3gs）
1.5倍：1pt=1dp=1.5px（hdpi）
2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）
3倍：1pt=1dp=3px（xxhdpi、iPhone 6）
4倍：1pt=1dp=4px（xxxhdpi）
单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为，有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。
无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说&底部标签栏的高度是96像素，我是按照xhdpi做的&这样的话了。
移动端页面的绝对单位仍然是px，至少代码里这么写，但它的道理也和app一样。由于像素密度是设备本身的固有属性，它会影响到设备中的所有应用，包括浏览器。前端技术可以善加利用设备的像素密度，只需一行代码，浏览器便会使用app的显示方式来渲染页面。根据像素密度，按相应倍率缩放。
可以通过这个测试页面&&来看看你的移动设备屏幕宽度，这是逻辑像素宽度。
以iPhone 5s为例，屏幕的分辨率是640x1136，倍率是2。浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。
大家最关心的还是实际运用，画布该怎么设置。我们就iOS、Android、Web三个平台来分别梳理一下。不过在这之前，我要为使用PS进行设计的朋友介绍一个小技巧。
之前我说过，我们要以逻辑像素尺寸来思考界面。体现到设计过程中，就是要把单位设置成逻辑像素。打开PS的首选项&&单位与标尺界面，把尺寸和文字单位都改成点（Point）。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。当然，各平台单位名称还是要记住的。这里我们用的只是它的原理，不用在意名称。
要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。为什么是这两个数字？
首先说300，这和人眼的分辨能力有关。由于1英寸是固定长度，每1英寸有多少个像素点决定了画质清晰程度。之前说过，这就是像素密度，也就是DPI。DPI达到300以上，其细腻程度就会给人真实感，像真实世界中的物件。相反，DPI只有10的话，在你一个食指指节大小的长度内只有10个像素，这明显就是马赛克了。所以印刷品要设成300，才能保证清晰。
再说72，这有一定的历史原因。最早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72。PS中把图像DPI也设成72，就能保证屏幕上显示的尺寸和打印尺寸相同，便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准，这套规则就这么沿用下来。
现在回到正题，我们怎么通过DPI来调节倍率？既然屏幕本身的分辨率是72，DPI设成72刚好是1倍尺寸，那设成72的两倍就是倍率为2的屏幕了，就这么简单。
下面来看看3个平台各自的画布设置：
iPhone的屏幕尺寸各不相同，我说的是逻辑像素尺寸，这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone，就要选择逻辑像素折中的机型。
从市场占有率数据来看，目前最多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320x568。上升势头最猛，未来有望登上第一的是iPhone 6的屏幕。倍率为2，逻辑像素375x667。
按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone 4s，大一点的6 plus也不会过于空旷。
不过在切图的时候要注意，由于iPhone 6 plus的3倍图是由2倍图放大而来，所以位图要注意保证清晰。
都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了：360x640，就看你设成几倍了。想以xhdpi为准，就把DPI设成72x2=144。想以xxhdpi为准，就把DPI设成72x3=216。
对于那些比较老的低端机，宽度是480px的那批，画面确实会小一些，显示内容会更少。稍微留意一下，重要内容尽量保持在界面中上部分。
当然，这些机型不出一年就会被边缘化，基本淘汰。现在能运转的也是当作功能机在用，软件多了必卡无疑，用户体验无从谈起。不作考虑也是OK的。
手机端网页就没有统一标准了，比较流行的做法是按照iPhone 5的尺寸来设计。倍率2，逻辑像素320x568。
这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，图片不是特别清晰。
如果追求图片质量，愿意牺牲加载速度，那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸，倍率3，逻辑像素414x736。
移动端的尺寸比PC端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。
【设计之家 原创文章 投稿邮箱：】标签：至少1个，最多5个
一个新的项目复用了一些老页面，老页面是使用375px方案进行移动端适配的，meta[viewport]使用的是&meta name="viewport" content="width=375, user-scalabe=no"&，而新页面使用的是flexible.js伸缩方案，动态生成meta[viewport]&meta name="viewport" content="initial-scale=[num], user-scalabe=no"&如何在老页面使用px布局的前提下，新页面使用rem布局，组件也使用rem布局，并且组件可以兼容老页面和新页面是本文的结果。首先会介绍375px方案和rem方案的实现原理。
&meta name="viewport" content="width=375, user-scalabe=no"&
375px方案的页面开发过程对新人非常的友好，利用页面的布局视口（layout viewport）为固定值375px，和移动端浏览器窗口的自动缩放功能（视觉视口==布局视口），可以很好的在大部分移动设备上展示375px宽度的内容。
具体的开发前提是设计师给到一份750px宽的设计稿，前端同学根据ps量的像素的50%进行css书写。若一个banner宽度量的为750px，在css中编写为width: 375px。至于为什么是2倍的设计稿，可以参考这篇文章，可以找到答案。
375px方案相对于把meta[viewport]中的width属性设置成device-width,然后通过媒体查询写几套css规则来说已经是非常方便了。把所有不同屏幕尺寸的手机的布局视口（layout viewport）设置成一个固定的值375px，无需考虑其他屏幕尺寸的情况。
但375px方案的实现原理在某些安卓原生浏览器上有兼容问题，会产生一个重要bug --- 在某些安卓原生浏览器或webview中会出现视觉视口小于布局视口的情况。直观的显示就是页面会出现左右滑动。如下图：
而在上文也提到了375px方案得以实现就是依靠浏览器的原生能力 --- 迫使视觉视口等于布局视口。我们将这种情况下的document.documentElement.clientWidth(布局视口)与window.innerWidth(视觉视口)打印看看。
浏览器的缩放效果没有实现，至于为什么，先看两条关于缩放的总结公式/经验。
一、meta标签内没有设置initial-scale的情况
浏览器计算出的缩放值 = layout viewport width（布局视口） / ideal viewport width（理想视口）
visual viewport width（视觉视口） = 浏览器计算出的缩放值 * ideal viewport width （理想视口）
layout viewport width === visual viewport width // true
经过上述计算会将视觉视口会等于布局视口，布局上的所有内容都会出现在手机屏幕上。出现之前提到的bug的问题出在计算视觉视口上，浏览器会将所有计算出的缩放值都默认等于1，所以不管我们将布局视口设置能375还是其他任意值，视觉视口永远会是1 * ideal viewport width （理想视口）。ps：此款安卓机型的理想视口等于360.
二、meta标签内设置了initial-scale的值的情况
visual viewport width（视觉视口） = initial-scale（meta 标签内设置的初始缩放值） * ideal viewport width（理想视口又称设备独立像素）
layout viewport width = visual viewport width
解释：第二条总结经验正是rem伸缩方案flexiblejs的核心思想，设置了initial-scale后浏览器会计算出视觉视口，继而将布局视口的值自动设置成视觉视口的值。达到在屏幕上完整呈现布局上的内容。
但是在同样的安卓原生浏览器上，不管我们将initial-scale设置成多少，浏览器都默认值为1。所以视觉视口和布局视口永远都等于1 * ideal viewport width这个问题的hack办法在flexible.js里也有所体现。
375px方案就解释到这里，至于为何是375而不是其他的值比如360、320等，可以参考以及， 在后篇文章中也有介绍3种视口的一些概念。
rem方案的目标也是用一套相同的度量标准适配所有屏幕大小的移动设备，在不同屏下进行正确的缩放。假设10rem宽在iphone5上是屏幕宽的一半，那么10rem在iphone6、iphone6plus、三星note等等机型上都显示为屏幕宽的一半。
我们知道rem所对应的px值是基于html标签上的font-size值进行换算的。若
font-size: 20
10rem === 200px //true
为了适配缩放所有设备，就要写个脚本动态设置html的fontSize值。同时要对页面的布局视口（layout viewport）和设计稿做一个划分约定，这里就约定这个值为10。（理论上可以任何值）
由以上两幅图可以知道，设计稿的一个区块对应1rem，布局视口的一个区块也对应1rem。而每个机型的布局视口该如何确定，flexible.js利用了上面提到的公式：
visual viewport width（视觉视口） = initial-scale（meta 标签内设置的初始缩放值） * ideal viewport width（理想视口又称设备独立像素）
浏览器自动将 layout viewport width = visual viewport width
之前也提到了initial-scale不为1的情况下部分安卓机型有bug，所以这里可以将initial-scale规定设置成1。
拿iphone6为例：理想视口为375px，经计算布局视口和视觉视口都等于375，html的fontSize等于37.5px。若设计稿量的是10个区块大小，那么在编写css时就写10rem，对应的width等于37。5 * 10 = 375px正好布满整个布局视口。
在flexible.js中对iphone设备的initial-scale值进行动态设置。
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelR
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio &= 3 && (!dpr || dpr &= 3)) {
} else if (devicePixelRatio &= 2 && (!dpr || dpr &= 2)){
// 其他设备下，仍旧使用1倍的方案
scale = 1 / // initial-scale
此处将initial-scale根据dpr动态设置是为了解决retina屏下border: 1px问题。而将安卓设备的dpr全部设置成1就是hack了之前提到的initial-scale在部分安卓机子上只能为1的bug。
回到border: 1px问题，有些设计师在750px的设计稿中设计了一条1px的边框线，而这个1px的边框线在各机型上最好的效果实际是占设备物理像素的1px。
拿iphone5和初代iphone为例：若设置initial-scale=1，那么布局视口为320px，但是iphone5的物理像素宽为640px，那就代表了1个css像素包含了4个物理像素（2x2）。而初代iphone的布局视口和物理像素都为320px如图：
在两者手机上显示的效果1px是一模一样的，但是iphone5包含着4倍的物理像素，就取上下高度而言，在iphone5上只用编写border: 0.5px就可以了。
但是部分机型对于0.5是不识别的，会直接赋值0。而我们想要做的就是令border的宽等于1个物理像素。我们可以这样做，根据window.devicePixelRatio属性动态缩放layout viewport，使之与屏幕的物理像素相同。这样我们只用在css里编写border: 1px，对应的就是物理像素的1px，border：1问题完美解决。
两种方案如何兼容
首先要考虑到组件也用rem进行布局，并且组件要在px布局和rem布局中都能兼容。那么就要全局head引入flexible.js的js脚本。
在375px布局方案里meta[viewport]已经设置，那么在flexible脚本中就要进行判断，已经设置viewport的就沿用，不动态创建meta[viewport]。
组件的rem布局要依赖html标签的font-size值，在新页面rem布局中已经实现。而在375px布局中，flexiblejs根据固定layout viewport值-- 375进行计算，那么所有屏幕尺寸下的页面html标签font-size值都为37.5px。
还有一个问题，在375px布局中，全局css环境中设置了
html, body {
font-size: 100%
而所有的浏览器实现默认字体大小为16px，所以在老页面中有些字没有设置大小，默认是16px，引入了flexible后html上的font-size为37.5px,body标签上的字体大小就会变成37.5 * 100% = 37.5px,而没有设置字体大小的字体就会变成37.5px，需要在flexible.js中设置针对这种情况。
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 16 + 'px';
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 16 + 'px';
}, false);
最后的结果就是：
全局引入flexible.js文件。
375px布局的老页面上html标签的font-size固定为37.5px。body上的font-size固定为16px。
rem布局的新页面上html标签的font-size随不同机型而不同。
组件编写一律按照rem布局，设计稿为750px，兼容新老页面。
对我以上的理解有疑问和意见的欢迎找我私聊~
1 收藏&&|&&12
你可能感兴趣的文章
4 收藏，1.1k
19 收藏，680
1 收藏，246
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
技术专栏，帮你记录编程中的点滴，提升你对技术的理解收藏感兴趣的文章，丰富自己的知识库
明天提醒我
我要该，理由是：推荐这篇日记的豆列
&&&&&&&&&&&&发布者: mobileui
刚开始接触移动页面重构，是不是很迷惑应该按照多大的尺寸制作？320、640还是720？按照640的设计稿重构完页面，是不是还需要写其他尺寸来适配不同的屏幕大小？—— 这源于对viewport和的不了解。
已经重构了好多移动页面，但是对为什么要按照640的大小来设计页面，不清楚答案。给元素赋予固定的值，但是奇怪的是在不同的手机里看起来都差不多大小，不需要另外去适配，真是太爽了。为什么？不知道耶。——这源于对viewport和px的不了解。
先来罗列下学习移动页面重构的过程中可能看到过迷糊过放弃过的一些单位：
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磅。绝对长度单位，虽然理解起来很容易，但是在网页的设计中很少用到。所以我们就忽略它们吧。
相对长度单位：是网页设计中使用最多的长度单位，包括px、em、rem等。
2、什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？
屏幕尺寸：指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。
屏幕分辨率：指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如。（这里的1像素值得是物理设备的1个像素点）
屏幕像素密度：屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。
最明显的就是iPhone 3GS和iPhone 4的区别。屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。
计算像素密度的公式：
勾股定理算出对角线的分辨率：√(?)≈2203px
对角线分辨率除以屏幕尺寸：0dpi。
3、什么是ppi、dpi、dp、dip、sp、px？
ppi：pixels per inch，屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。
dpi：dots per inch，最初用于衡量打印物上每英寸的点数密度，就是打印机可以在一英寸内打多少个点。当dpi的概念用在计算机屏幕上时，就称之为ppi。ppi和dpi是同一个概念，Android比较喜欢使用dpi，IOS比较喜欢使用ppi。
dp、dip：dp和dip都是Density Independent Pixels的缩写，密度独立像素，可以想象成是一个物理尺寸，使同样的设置在不同手机上显示的效果看起来是一样的。
在Android中，规定以160dpi为基准，1dp=1px。如果密度是320dpi，则1dp=2px，以此类推。
Android和IOS都会通过转换系数让控件适应屏幕的尺寸。一个按钮给了44*44dp的大小，在160dpi密度的时候，按钮就是44*44px大小；在320dpi密度的时候，按钮就是88*88px的大小。不需要我们去书写多套尺寸。
sp：scale independent pixels，用法与dp类似，是专门用来定义文字大小的，受用户android设备字体设置的影响。
px：就是通常所说的像素，使网页设计中使用最多的长度单位。将显示器分成非常细小的方格，每个方格就是一个像素。（网页重构中使用的px和屏幕分辨率的px不一定是一样的大小。）
4、什么是mdpi、hdpi、xdpi、xxdpi？
Google官方指定按照下列标准区分不同设备的dpi：
苹果的区分则更为简单：非高清屏、高清屏、超高清屏。
从数值上看，苹果和安卓有这样的对应关系：
单位介绍完了。总结下如何使我们更好的理解自己的工作。我们重构移动页面的时候使用px其实跟安卓开发中使用dp是一样的，有个背后的系数会帮我们把数值适配到这款手机的大小。而这个系数就是上图的1x、2x、3x……这个系数怎么来？是依靠分辨率和屏幕尺寸计算到的屏幕像素密度，再看屏幕像素密度属于哪个系数等级。
以上是单位的介绍，下面再来认识个重要的知识点。
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，窗口可大于或小于手机的可视区域，一般手机默认viewport大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移和缩放来看网页的其他部分。
部分机型默认viewport大小：
我们可能会这样设置viewport：
每个设置对应的是：
这个页面背景图是作为背景给了background-size:100%;的，所以整好铺满整个屏幕，大小看起来很适合。而上面的元素使用固定的px值来赋予大小的，例如左上角的人头给了width:100height100%;。为什么两者分别是这样子显示的？
网页重构时使用的单位px，就是通常所说的像素，是网页设计中使用最多的长度单位。将显示器分成非常细小的方格，每个方格就是一个像素（这和我们理解的屏幕分辨率的1920px*1080px的px是不同的）。不同设置下，方格的大小不一样。
例如iPhone4S如果不设置viewport，他就会默认是980px，就像把屏幕分成980份（不是屏幕分辨率的640px哦！）。如果设置一个元素为100px*100px，看起来就是屏幕的100/980，可能如下图所示：
例如iPhone4S如果设置viewport width=device-width，他就会是320px，就像把屏幕分成320份（不是屏幕分辨率的640px哦！）。如果设置一个元素为100px*100px，看起来就是屏幕的100/320，可能如下图所示：
未设置viewport，弹出来的都是设备的默认宽度，基本是980px，除了最后一台三星老爷机是800px。
设置了viewport，width=device-width，弹出来的是设置好的宽度，375px、360px、320px。为什么是这个大小？这就要用到上面讲的知识点了。
iPhone6的屏幕分辨率是px，ppi是326，所以系数是2x。那device-width就等于750/2=375px。
红米1s的屏幕分辨率是px，ppi是312，所以系数是2x。那device-width就等于720/2=360px。
页面里的红色块给的是200*200px，在几个设备看起来好像差不多大的样子。
（上图左边是三星note4，右图是红米1s）
三星note4的屏幕分辨率是px，ppi是515，所以系数是4x。那device-width就等于px，和小米的divice-width一样大小。但是看起来左边的红色块明显大于右边，因为左边的设备大啊，虽然两者都是分成360份，但是明显左边的1份比右边的1份大。
以上解释了为什么给元素赋予固定的像素值，给字体16px的大小，在大部分手机里居然能看起来差不多大小，也明白了我们并不需要写其他尺寸来适配不同的屏幕大小。不知道我这样拐弯的解释大家能明白不？
对于应该按照多大的尺寸来设计移动网页，这个看设计师喜欢，640是以前的主流，因为好多设计师用的是iPhone4S、5S。现在在慢慢转向750，因为iPhone升级成6了。不管哪种尺寸的设计稿，重构都可以用一套方法制作好页面，如果是背景平铺（background-size:100%）、上面的元素px设置大小的话，没问题，能顺利适配其他手机的。如果是固定整体大小重构，再利用js判断屏幕大小进行页面缩放，也没问题，能顺利适配其他手机的。重要的前提是要设置好正确的viewport。
原文地址：
, , , , , ,
向您推荐：
@Echo 由于iOS 和 Material Design的组件体系有些不一样，所以关于组件的分类体系我会分iOS篇和Android篇来讲解，本篇文章为iOS 篇。
对于大部分入门设计师及中级设&
如果你关注过一些取得大成就的人，总会在他的成长故事中发现很多传奇的经历，比如少年时代的天赋异禀，或是30、40岁的大器晚成，为了做好某件事的废寝忘食等等…然后摸摸自己的胸脯说，他们是天才，我只是个普通&
WWDC 2017 Keynote 结束没几天，相信很多对 UI 设计有兴趣的朋友应该很好奇 iOS 11 详细的设计变动有哪些，但是自己的手机又不方便装开发者版本，所以就让我替各位踩雷吧。
UI设计涉及的内容非常广泛，包括PC端界面设计，移动端APP界面设计，甚至游戏，原画等。对于初学UI设计的人而言，可能对UI具体是做什么，或者自己是否能顺利转行胜任这样的岗位存在一定的顾虑，我们如何一&
其实菜心和大家一样都经历过阶段性迷茫，但我可以把自己经历的一些浅薄经验分享给大家，希望能有所启发。
经历的过程如下：
想学的太多
坚持与突破&
@Micu设计你是美工？还是设计师？你是合格的设计师吗？
设计工作中最基础的修图会吗？找素材拼图会吗？
如果这最基础都不会，能称自己是设计师吗？能漫天要价吗？
如果有点职业道德，先学&
从2011年开始接触APP，到现在为止也做了几个了，发现了一个共同点就是和每一个技术搭档切图的时候，会遇到不同的问题，因为技术的水平高低有限，所以他们要求你给切图的时候也会不一样，针对切图后来&
周陟 （@UCDChina 深圳负责人、交互设计专业委员会（@IxDC）部长） ：我发现一个问题，大部分刚入行或者经验不多的设计师在碰到问题的时候都喜欢”索取”，最好有个现成的东西放那儿给他供&
移动app开发中多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6，&
初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者&
金属质感保险柜图标设计
许多人可能认为搜索框不需要设计; 毕竟这只是两个简单的元素。然而，在内容繁杂的网站中，搜索框通常是最常用的设计元素。当用户遇到相对复杂据谷歌昨日发布的报告显示，中国城市居民35%已拥有智能手机，普及率及新用户比例均是世界最高的地区之一。报告是由谷歌和IPSOS Research(益普索)联合
事先声明，这不是广告。就是一个简约的Photoshop教程，适合练手，制作其它图标也是类似的思路。融会贯通，您可以将任何物体扁平化成小巧可爱的移动端的设计教育我们要设计得小，如今，可穿戴设备则使我们的设计愈发的小。手表的设计或许听起来吓人，但只要回到设计理论的本源，你就能做
网易UEDC – 王强：图表设计的过程实则是将数据进行可视化表达的过程，其研究的对象源头是数据，然而...
饿了么UED-伞哥：在日常的UI设计工作中，文本作为最重要的信息载体之一，其能否被用户清晰识别显得尤...
html5的发布让移动端web增添了很多新的能力，这些能力给我们带来了很多新的玩法，不知你知道了多少...
莫贝网（）移动设备界面设计专业网站。为UI设计师提供手机界面设计，移动应用界面设计，平板电脑界面设计，导航界面设计等手持移动设备，移动终端界面设计相关知识的收集分享，共同学习的网站。
关注微博：