1. 前端分辨率适配
现在手机屏大小不一，而且屏幕硬件性能也各不相同，一般的UI设计都是基于特定机型画设计搞件的，常见的是基于iPhone6的分辨率设计2倍图，以iPhone6为例，屏幕物理像素宽度是750，网页宽度为375PX。开发中还要根据不同手机留出设计余量，因为不同分辨率的手机显示时会有拉伸位移。
网上也有一些方案，处理高清屏适配方案，但一般也只把DPR适配到2，彩用所有长度单位放大2位，网页整体缩放50%的的做法，比如ant-mobile就支持这种方式，它可以定义一个less常量“@hd”来定义CSS中使用的基础单位大小，但是这种方式在遇到网页实际宽度大于375的设备时，还是不能1：1的还源UI设计稿。
我个人在项目中采用的是更复杂的实现方式，可以实现适配DPR大于2的手机屏，并接近100%的还源UI设计稿。具体的适配技术各家大同小异，这里不再细说，我只给出我自己的适配方案。
同大多数适配方法一样，通过 rem 设计一个基础的大小单位 ，做为整个页面的基础单位，再根据屏幕物理DPR结合屏宽计算这个单位的大小，
基础单位 = 屏幕DPR * 网页宽度 / 375（设计稿基准为375）
网页缩放值 = 1 / 屏幕DPR
比如我的方案是把rem设为10px 再乘以“基础单位”，这样在设置一个设计稿上14号字的时候，就写 1.4rem就可以了。另外编写页面布局时，也用这个计算出来的相对单位，这样可以做到不管什么样的屏幕，UI设计搞都不会因宽度变化而变形。另外，如果使用ant-mobile这样的支持高清方案的UI中间件，直接在配置中把它的LESS常量 “@hd”设置 为 “0.1rem”就可以了。
另外还有一个小的福利，就是在这个方案下，当你想画出“1物理像素”的细边框时，直接用 “1px”，就可以了，因为在这个方案下，1px对应的是一个物理像素。
下面给出我实践中使用的适配代码：(这是直接放在HTML文件中的版本）
//计算屏幕比例并设置html的font-size
/**
将html字号设置为10个设计像素（一个基准系数，即rem为10 设计稿像素）
设计一个缩放系数，以应对可能出现的适配高清屏要求
*/
( function () {
/**初始化方法
* _standard 设计稿对应的分辨率
* base_DPR 设定最小DPR值
*/
function setInitialRem( _standard, base_DPR) {
//取得当前设备DPR
var dpr = window. devicePixelRatio || 1;
//如果设定了默认最小DPR值
if ( base_DPR) {
dpr = dpr >= base_DPR ? dpr : base_DPR;
}
//设定缩放视图比例
var scale = 1 / dpr;
//设直视图缩放比例
document. head. querySelector( 'meta[name="viewport"]'). content = "width=device-width,initial-scale=" + scale + ",minimum-scale=" + scale + ",maximum-scale=" + scale + ",user-scalable=no, shrink-to-fit=no";
//取得当前设备宽度
var device_width = document. documentElement. clientWidth; //window.innerWidth;
//标定原稿设计基准值 当前稿件设计宽度为 iPhone6/6s 375像素
var standard_width = _standard * dpr;
//设定基准单位
var base_value = 10;
//基准系数=设备宽度➗稿件基准宽度✖️设备DPR✖️10
var rem = device_width / standard_width * dpr * base_value;
//设置 REM
document. documentElement. style. fontSize = rem + "px";
}
window. addEventListener( "resize", function () { setInitialRem( 375, 1); });
setInitialRem( 375, 1);
})();
2. UI设计稿IOS和安卓如何适配
方案一
IOS与Android共用一套效果图 1242*2208
IOS与Android常用的尺寸中，最大尺寸的为i6+的尺寸，即1242*2208px
IOS常用尺寸为1242*2208750*1334640*1136640*960
其中750*1334640*1136640*960同为@2x，1242*2208为@3x
所以750*1334640*1136640*960只做一套640*1136就好了
Android常用尺寸为1080*1920720*1280480*800
他们之间相邻是可以整除1.5的，也就是1080除以1.5等于720，720除以1.5等于480
即，这三个尺寸可以等比缩放大小，只做一套1080*1920就可以了。
那么，问题来了。
IOS要做两套尺寸，1242*2208与640*1136
Android要做一套尺寸，1080*1920
这样不就是三套了吗？
其实，i6+的尺寸1242*2208整除1.15就刚好等于1080*1920
也就是说，1242*2208与1080*1920是可以等比缩放的
那么，i6+与Android的尺寸只做一套1242*2208就可以了。
现在就剩下IOS的640*1136
1242*2208可以直接缩放成640*1136吗？
如果要等比缩放肯定不行，因为他们之间不能整除
但是，如果我们把1242*2208的尺寸直接放到PS里等比缩小宽度到640，会发现原本2208的高度变成了1138，也就是比1136多了2px，2px的误差其实无关紧要了，硬着头皮改成1136去！
现在，你会发现，里面的图标，其实1138跟1136的大小都是一样的。
为什么提到图标呢？因为我们的交付物只要一套效果图与五套切图就好了。
一套效果图1242*2208
五套切图12426401080720480
最后，注意缩放后的图标要细调一下。由于转换有误差，共用一套效果图是有一定的风险的，例如UI细节上的风险。开发前，设计师与技术人员要先共同确认此适配方案，全程沟通，及时改正UI方面的问题。
方案二
IOS与Android共用一套效果图750*1334
上面提到，750*1334640*1136640*960同为@2x，所以750跟640用同一套图标，同一套字体就可以了，至于其他的尺寸大小，只要跟着尺寸延伸就没问题了。
750*1334应用到1242*2208，则需要把@2x的图标放大导出成@3x，也就是把字体图标放大1.5倍，其余的，直接放大到1242就行了。
至于Android的版本，我个人的做法是把750*1334直接换算成为1080*1920，因为只有1px之差，我就忽略了。换算出了1080*1920，那么Android的其他尺寸也就好办啦~同样，我们的交付物只要一套效果图与五套切图就好了。
一套效果图750*1334
五套切图12426401080720480
方案三
IOS与Android各做两套效果图
原理跟方案一、二差不多，但为了追求细节上的完美，可以多做一套效果图，即两套效果图
1242*2208与640*1136
1242*2208适配i6+Android三种尺寸
1242*2208整除1.15等于1080*1920
1080*1920整除1.5等于720*1280
720*1280整除1.5等于480*800
640*1136适配i6i5i5s等尺寸
方案四
如果需要更完美，那就需要做三套效果图了
1242*2208640*11361080*1920
还可以再加一套640*960
总之，分开做的越多套效果图，出来的效果就越精细。反之，看起来可以就行了。
3. 视觉设计师怎么与前端配合
前端工程师属于程序员编写代码的，视觉设计师是做设计的通俗讲究是做图的。
前端工程师主要使用dw之类的开发工具编写代码、编程。
视觉设计主要是使用PS、AI、CDR之类的软件进行图片设计。
前端工程师的职责是制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。视觉传达设计是为现代商业服务的艺术，主要包括标志设计、广告设计、包装设计、店内外环境设计、企业形象设计等方面，由于这些设计都是通过视觉形象传达给消费者的，因此称为“视觉传达设计”，它起着沟通企业——商品——消费者桥梁的作用。
重要的还是多沟通吧，让想法能够被前端理解。因为网页和设计稿不一样，有些效果是实现不了的，比如一些文字，颜色，阴影等，需要放弃一些或者取一些比较折中的方案。最好在设计稿上标注好各种尺寸，间距，合格的前端是会注意这些细节的。
4. pc如何自适应布局 pc端如何根据设计稿做自适应
1、在不同分辨率下，页面布局存在不同程度的差异，特别是页面上的表单控件，其宽度默认是固定值width:150px，当分辨率较高时，表格中的空白显得过多，页面布局显得很不协调，在宽屏显示器上尤为明显。
2、内容区采用媒体查询+定宽，在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏。 注意热门市场这里，虽然每一个方块的宽度是随着断点变化的，但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的，但是也可以完美的适应不同的屏幕。
3、然后在css中 有关margin和padding属性直接用百分比来表示 页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看到的效果是令人满意的。
4、一番辛苦做出来的网页，在全屏状态下浏览一切正常。但在改变浏览窗口大小之后，网页带顷散就变得不堪入目，这是个很值得注意的问题。 问题的根源还得从网页的布局说起，在DW中，网页内容的定位一般是通过表格来实现的，解决表格的问题也就成功了大半。
5、在它里面嵌入了另外一个乎腊表格，表格宽度占表格单元的50%，则这个表格的宽度为300，上面说过rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。
6、浏览器的功能设置中，有一个可以自由设置窗口内容字体大小的功能，这样由于不同访问者的设置习惯不同，呈现在他们面前的网页有时也会不不相同。比如你可能本来设计时用的是2号字体，结果由于用户对浏览器的额外设定，变的更大蠢氏了
5. 前端一套代码实现多端适配 有哪些方案
Taro 是京东开源的一套遵循 React 语法规范的多端开发解决方案。通过它，我们只需要书写一次代码，就可以编译出在不同端（微信 / 网络 / 支付宝小程序、H5、React-Native 等）都能运行的代码。如果你接触过 React-Native，那么上手 Taro 将会非常方便。
6. 前端如何实现视觉设计稿
在这篇文章中将和大家探讨一下关于前端在移动端开发如何去实现视觉设计稿。探讨过后，在大家的实际工作中或许能帮助解决一些问题。
一般设计稿是 640px 或者 750px （现在最流行），但是 iPhone 5 不是 320px 宽吗，iPhone 6 不是 375px 宽吗?
这里需要理解一下基础概念： 设备像素 (device pixel)， CSS 像素 (css pixel)以及 设备像素比 (device pixel ratio)。
垂直手机屏幕下，使用 <meta name="viewport" content="width=device-width"/> ，iPhone 5 屏幕物理像素 640 像素，独立像素还是 320 像素，因此， window.devicePixelRatio 等于 2。
比如 iPhone 5，6 使用的是 Retina 视网膜屏幕（2 倍屏），6 Plus 是 3 倍屏，使用 2px × 2px 的 device pixel 代表 1px × 1px 的 css pixel，所以设备像素数为 640 × 1136px （5）， 750 × 1134 （6），而 CSS 逻辑像素数为 320 x 568px （5）， 375 × 667 （6）；5，6 的 window.devicePixelRatio=2，6 Plus 为 3。
H5 适配：rem 方案
rem：是 CSS3 新增的一个相对单位，相对于 html 标签的 font-size 的大小为基础的。而 font-size 的大小可以动态根据手机屏幕宽度document.documentElement.clientWidth 来设置，从而达到自适应屏幕的目的。
我这里找了一下 小米 ， 网易 ， 拉勾网 ， 手淘 以及糯米，大同小异。
设计稿是 720px 的，即 5 英寸屏幕的安卓手机（720 x 1280px）。
对于页面缩放和横竖屏事件进行监听，改变 html 根元素字体 clientWidth/720/100 。
如图是这样计算的 375/(720/100) = 52.0833
iPhone 6 : 375/7.5=50 , 则知道设计稿应该是基于 iPhone 6 来的，所以它的设计稿竖直放时的横向分辨率为 750px，为了计算方便，取一个 100px 的 font-size 为参照，那么 body 元素的宽度就可以设置为 width: 7.5rem ，于是 html 的 font-size=deviceWidth / 7.5 。布局时，设计图标注的尺寸除以 100 得到 css 中的尺寸。并且布局中的 font-size 也可用 rem 单位。
设置html根元素字体为 65.5% ，对应px单位则为 10.48px ，则列表里时间信息字体设置为 1rem = 10.48px ，chrome在 -webkit-text-size-adjust: 100%; 情况下小于 12px 的一律显示为 12px 。
拉勾网页面列表部分是 px 为单位，字体是 rem ，底部bar是使用 百分百 来控制宽高间距。
之前网上讨论的比较多的是
则 1em = 16px * 62.5% = 10px ，em 的初始值为 1em = 16px ，而为了方便计算， 换算一下 10 / 16 （16px 是 Chrome 浏览器默认字体大小）。缺点是进行任何元素设置，都有可能需要知道他父元素的大小，比较繁琐低效。
（1）动态设置 viewport的scale
（2）动态计算 html 的 font-size
（3）布局的时候，各元素的 css 尺寸 = 设计稿标注尺寸/设计稿横向分辨率/10
设计稿是 750 的，所以 html 的 font-size 就是 75，如果某个元素是 150px的宽，换算成 rem 就是 150 / 75 = 2rem。
整个手淘设计师和前端开发的适配协作基本思路是：
手淘推出了一套移动端适配的方案—— Flexible 方案 。
总结来说：
设计稿是 750 的。
优点：简单粗暴，所有 css 尺寸均为设计稿尺寸直接除 2，开发快速简单；
缺点：可能出现一排放不下的情况，需要针对小屏幕如 5 及以下做单独适配
vw 相对于视窗的宽度：视窗宽度是 100vw 。
如果视区宽度是 100vm, 则 1vm 是视区宽度的 1/100, 也就是 1%，类似于 width: 1%。
那 iPhone 6 来说， document.documentElement.clientWidth=375 , 则豆腐块宽度为 375/100*30=112.5px
混合: rem px vw 百分百等单位混用
略，同上糯米WAP
这里假设设计稿 640px，则设置根元素 font-size 为 4.375vw，根据屏幕宽度自适应，在视窗宽度为 320px 的时候，正好是 14px (14 / 320 = 0.04375)。 达到页面默认字体大小 14px 的目的（其他大小也 ok）。好了，现在页面上所有以 rem 为单位的属性值都会随着屏幕的宽度变化而变化，达到自适应的目的。（ 自适应不用 js 动态设置根元素大小 ）
在移动端页面开发中，视觉童鞋一般会用 750px（iPhone 6）来出设计稿，然后要求 FE 童鞋能够做到页面是自适应屏幕的，这种情况下就可以用 rem 或者 vm 等相对单位来做适配，愉快和视觉童鞋一起玩耍啦。
内容转自： 大专栏
7. 前端技术，屏幕适配技术怎么做
屏幕适配有两种方法：
1.把页面做成100%自动，页面随屏幕的大小而变化，屏幕多大页面多大。
2.通过媒体查询来判断屏幕的大小，根据不同大小的屏幕加载不同样式。
8. 【转】一套iOS平台设计稿，搞定界面适配
加上Android生态中纷繁复杂的各种奇葩尺寸，现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路是：
1、选择一种尺寸作为设计和开发基准；
2、定义一套适配规则，自动适配剩下两种尺寸；
3、特殊适配效果给出设计效果。
手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式，再慢慢说明原委。
第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。
第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。
第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。
第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。
为什么选择iPhone 6作为基准尺寸？
当面对大中小三种屏幕需要适配的时候，很容易想到先做好一种屏幕，再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6（750px/375pt）作为基准，基于几个原因：
1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计，到320pt可能元素之间比例就不是那么回事了，比如图片和文字之间视觉比例可能失调。
2、iPhone 6 plus有两种显示模式，标准模式分辨率为1242x2208，放大模式分辨率为1125x2001（即iPhone 6的1.5倍）。可见官方系统里iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的倍率关系。很多情况下这两种尺寸可以用1.5倍直接等比适配。
3、1242x2208这个奇葩的数值乱差颂是苹果官方都不愿意公开宣传的一个分辨率，不便于记忆和计算栅格。640x1136虽然是广泛应用的一个分辨率，但是大屏时代依然以小尺寸哗郑为设计基准显然不合时宜，设计师会停留在小屏的视角做设计。
所以，iPhone6的750x1334是最适合基准尺寸。
只交付一套设计稿，默认用什么规则来适庆逗配？
前文提到适配策略是先选择iPhone 6作为基准设计尺寸，然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话：文字流式，控件弹性，图片等比缩放。
控件弹性指的是，navigation、cell、bar等适配过程中垂直方向上高度不变；水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显示更多内容，发挥大屏幕的优势。
按照上述默认适配规则，大中小三种屏幕显示效果均相同。有时候想在大屏幕显示更多内容，需要设计出特殊适配效果。比如App store首页焦点图，从iPhone 6适配到iPhone 6 plus时焦点图尺寸和排版做了特殊处理。底下应用列表也从一排3+个变成一排4+个，真正实现了大屏幕显示更多内容的理念。这些就需要设计师给出相应设计稿。