适配（移动端+web端）

移动端

什么是手机适配？

手机适配：设计狮制做效果图，程序猿把效果图应用到不一样的手机，对不一样的屏幕进行界面调整的过程，确保界面不变形，呈现效果图的位置、尺寸、比例。

1、屏幕尺寸、屏幕分辨率、屏幕像素密度

• 屏幕尺寸：指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米，常见的屏幕尺寸有2.四、2.八、3.五、3.七、4.二、5.0、5.五、6.0等。因此6.0的手机 6*2.54 = 15.24 厘米。
• 屏幕分辨率：指在横纵向上的像素点数，单位是px，1px=1个像素点。通常纵向像素 * 横向像素来表示一个手机的分辨率，如1960 * 1080。（这里的1像素指的是物理设备的1个像素点）。好比（iphone6 750 * 1337） （iphone6plus 1960 * 1080）
• 屏幕像素密度/像素密度/屏幕密度：：屏幕上每英寸能够显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕分辨率有关。

2、物理像素，CSS像素

• 设备像素/物理像素：（分辨率）买手机的时候有一个nxm的分辨率，那是屏幕的nxm个呈像的点，一个点（小方格）为一个物理像素。它是屏幕能显示的最小粒度。设备像素也被称为物理像素，他是显示设备中一个最微小的物理部件。每一个像素能够根据操做系统设置本身的颜色和亮度。任何设备的物理像素的数量都是固定的。
• CSS像素：CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（肯定）Web页面上的内容。它是为web开发者创造的，在CSS或者JavaScript中使用的一个抽象的层。通常状况下，CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”。在一个标准的显示密度下（普通屏），一个CSS像素对应着一个设备像素。
• CSS像素与物理像素的关系：一个width为200px的元素，它占据了200个CSS像素，但200个CSS像素占据多少个物理像素取决于屏幕的特性（是不是高密度，即像素比）和用户的缩放行为。在苹果的视网膜屏幕中，视网膜的像素密度是普通屏幕的两倍，这个元素就跨越了400个设备像素，若是用户放大，它将跨越更多的设备像素。固然如今好多手机的像素比变得愈来愈大，好比我以前用的魅族手机和如今用的iphone 8 plus都已经达到了3，因此这个元素正常状况下就跨越了600个设备像素。
• 设备独立像素：设备独立像素（也叫密度无关像素），能够认为是计算机坐标系中的一个点，这个点表明一个能够由程序使用的虚拟像素（好比：CSS像素），而后由相关系统转换为物理像素。
• 位图像素：一个位图像素是栅格图像（如：png，jpg，gif等）最小的数据单元，至少1个位图像素对应1个物理像素，图片才能获得完美清晰的展现。

对于Web开发者而言：咱们使用的每个CSS和JavaScript定义的像素本质上表明的都是CSS像素，咱们在开发过程当中并不在乎一个CSS像素到底跨越了多少个设备像素。咱们将这个依赖于屏幕特性和用户缩放程度的复杂计算交给了浏览器。

3、像素比

• 像素比：它的官方的定义为：设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素/独立像素（window.devicePixelRatio）

  

  iphone5

  

  iphone6 plus

4、视口

• 布局视口：在PC端上，布局视口等于浏览器窗口的宽度。
• 视觉视口：视觉视口是用户正在看到的区域。用户能够缩放来操做视觉视口，而不影响视觉视口的宽度。视觉视口决定了用户看到了什么。

5、UI界面设计和适配尺寸规范（iphone5 iphone6 iphone6Plus）

若是以iphone5s 为基准设计稿，适配iphone6 或者是iphone 6 plus的方法和技巧。

当旧的iPhone 5程序运行在iPhone 6上面，假如没有通过适配。旧程序自动等比放大，铺满新手机，旧程序也能够正常运行。这种方案可算是自动适配。但由于旧程序拉伸了，总体看起来有点虚，也不能更好利用大屏空间。

一套设计稿适配的前提：设计稿必须为矢量的。图片除外。好比图标，线、点、颜色块等元素都是矢量或者形状。

分为两步走：

若是是一些常规界面：好比以文字、列表为主的界面，大部分是指布局相对简单的界面。不用设计师怎么切图的界面，这些基本可让ios程序员完成适配便可。显示效果也不会太差。

若是是一些定制界面：此时设计师应该手动为大屏幕从新调整设计。另外设计一些大图或者是大的图标，以知足适配iphone6.或者iphone plus

前提是大家的ios程序员须要了解苹果公司的一个工具：Auto Layout

Auto Layout （Auto Layout Guide: Introduction），能够理解成 iOS 上的 CSS，若是设计师用 Auto Layout 提供的排版语言描述出 UI 布局，那不一样尺寸的 iPhone 只要同一份设计稿就能够了。

总之：适配iPhone 6/6Plus UI界面设计的要点：

一、针对iphone6 能够用高度不变，横向拉伸。或者等比拉伸

二、全矢量做图。

三、定制界面或图片位图必须额外制做大图。

四、工具栏、状态栏、导航栏的高度规范和设计字体大小等均以2:3的比例放大便可。

五、iphone的5/5S/6/6P的屏幕比例为9：16，因此比例这个问题如今不是很大，但因 Plus增长横版显示，因此建议对于一些用户量较高的软件进行重绘。

以下图所示：

给app设计师9点建议

• 一、之后的应用程序，都使用AutoLayout, 不要再用绝对定位。

• 二、使用相似网页的方式来设计界面。

• 三、设计师好，程序员也好，尽可能使用点这个单位进行思考，而不要使用像素。好比，你须要作44 x 66个点的按钮，2x模式，就乘以2, 3x模式就乘以3。这样的思考方式能够大体估计到真实的物理长度。44个点，就是手机上导航栏，工具栏的高度。假如用像素思考，容易使得作出的图片过大或者太小。

• 四、非矢量素材，就能够作尺寸最大的，以后再进行缩小。好比你须要兼容3x的屏幕，就直接作最高那种图片。

• 五、而当使用Flash之类的矢量工具来作素材的时候，应该直接作点那个尺寸。好比44 x 66个点的按钮。就创建一个44 x 66的场景。以后再导出成2倍图，3倍图，由于矢量放大不失真。不要创建一个3x的场景，导出成大图片，再进行缩小，这样就容易失真。更理想的是直接使用矢量图。

• 六、假如是那种导航栏，工具栏之类的背景图，须要横跨整个屏幕。能够只切一小块，让程序拉伸，拉伸方式是保持两边的像素不动，只拉伸最中间的一列像素。须要拉伸的话，横方向就不要出现一些渐变色。

• 七、按钮的点击区域，不该该少于44像素，就算按钮的图片看起来比较小，也应该使得点按钮周围的透明区也有反应。

• 八、能够按照你当前最方便测试机子的型号来作一些主要预览图，效果图。好比你手头有iPhone 5，能够按照iPhone 5的尺寸，320 x 568个点，须要兼容iPhone 6 Plus，就使用3x的模式。这样方便将图片放进手机里面看实际的效果。有多个测试机，就选较大的，以后再进行一些细调。假如支持iPhone 6 Plus的横屏模式，须要另外处理。

• 九、上面说的是应用的处理方式，游戏会有些特殊。如今不少游戏，按照1136 x 768的像素尺寸来设计场景，这样能够同时兼容iPad和iPhone，并只使用一份图。iPad 1x模式下尺寸是1024 x 768像素，iPhone 6在2x模式下，是1136 * 640。这种尺寸，能够简单将场景居中显示，各自将场景拉伸到最大。

web端

目前咱们pc项目的设计稿尺寸是宽度1920，高度最小是1080。

适配目标：

• 1.在不一样分辨率的电脑上，网页能够正常显示

• 2.放大或者缩小屏幕，网页能够正常显示

对于宽度的适配：

首先设置html,body{width:100%;overflow-x:hidden;} 而后咱们能够把页面分解为背景层和内容层，对于背景层，咱们通常都要求彻底铺开，对于内容层咱们保证咱们的内容都封装在盒子内，而后margin:0 auto;保持居中显示，盒子里面的内容，咱们再另外调整 （内容区定宽，在达到某个断点以后更改内容区的宽度，并把某个内容显示/隐藏）

对于高度的适配：

通常状况下，页面都比较高，咱们经过给每一个模块设置具体的高度值来作页面，而后页面会出现导航条，咱们能够拉动导航条来浏览，可是有的页面的需求是主体内容直接在不一样的浏览器上都能完整显示，不经过导航条来浏览

如何作？

一、百分比的应用

百分比的应用在于主视角的定位和缩放，百分比的取值以原设计稿的尺寸为标准。什么意思呢？举个栗子，一个元素在原设计稿里，量出来距离顶部是 200px，若是写死多是top:200px 或者margin-top:200px,如今要转成百分比，那么这个值可能就是23.3%。这个值怎么算？若是设计稿是 1080，200/1080=18.51%这样计算出来百分比的值。

可是，有个地方要注意，流体布局下，百分比的值是根据父层计算的；absolute布局的元素是根据最近的relative父层计算的；fixed布局的元素是根据window的可视区域计算的。

因此，若是要达到适配的效果，不仅是当前元素须要用百分比值，其参考计算的元素也是要动态变化的。

另外还有一个就是图片缩放的问题，pc不少主视角都是切图的，可是pc不能直接用background-size。在pc咱们能够直接经过img标签来插入图片，经过设置 img宽度为100%，高度auto，而后让它根据父层来等比缩放来实现。

二、js监测

须要js主要有两个缘由：

上面说了，百分比是要有父层作参照物的，那么若是父层都用百分比，那就是最终是根据window来参照的，由于pc绝大部分都是宽屏设备，并且他们的比例是不一致的，咱们来计算下(190是减去浏览器工具条、window桌面条、咱们页面通用顶条)：

设计稿：1920/(1080-190) = 2.16

14寸普通笔记本：1366/(768-190) = 2.36

因此，咱们不能宽高都100%按照屏幕尺寸来计算。另外考虑到主要是高度对pc页面的主视角影响比较大，咱们须要借助js来计算肯定一个最小高度临界值（固然这个能够用css的min-height来实现）；

另一个是，经过js判断最小高度临界值，再加上这个最小临界值的class，为了处理那些特殊的布局或者百分比没法彻底解决适配的元素，好比字体的相关布局