在写本文以前，我了解了在维品会和腾迅的朋友、及其企业里边前端开发高手（深哥），针对设计方案稿网页切图的详尽方式，历经比照认证，得到设计方案稿变换网页页面企业规格方式流程。我各自了解下边四个难题：
1. 设计方案稿的企业是啥，一般尺寸是啥？
2. 网页页面长短企业用哪种，px、em、rem，還是混和，假如用rem，html的font-size多少钱？
3. 设计方案稿变换成网页页面长短的方式？
4. 假如做新闻媒体查寻，适合的区段是啥？
PS：她们早已设定viewport
Q A
--朱姐（腾迅）回应
1. 设计方案稿的企业是px，通常为750px。
2. px、rem混和着用，rem的html font-size用16px。
3. 750px的设计方案图以375px量宽度，比如设计方案图里有原素总宽是100px，那麼获得总宽会是 100px/2/16px = 3.125rem。
4. 依据机器设备总宽不一样，设定不一样的html 的font-size，这一区段并没讲过明。
--滨神（维品会）回应
1. 设计方案稿的企业是px，通常为 750px。
2. 限定用rem，rem的html font-size用312.5%（因为默认设置字体样式尺寸是16px，因此最后是16px * 312.5% = 50px）。
3. 750px的设计方案图以375px量宽度，比如设计方案图里有原素总宽是100px，那麼获得总宽会是 100px/2/50px = 1rem。
4. 假如设定固定不动html font-size，那麼就必须弄新闻媒体查寻；假如按不一样机器设备总宽算出各有的font-size，也不用弄新闻媒体查寻。
--深哥（企业高手）回应
1. 设计方案稿的企业是px，通常为1080px。
2. 提议是所有应用rem及百分数的方法，rem的html font-size用100px。
3. 1080px的设计方案图以540px量宽度，比如设计方案图里有原素总宽是100px，那麼获得总宽会是 100px/2/100px = 0.5rem。
4. 按不一样机器设备总宽算出各有的font-size，假如必须适配独特机器设备（比如iPad），才要做新闻媒体查寻。假如在iPad上的实际效果稍大，就需要改动小一点字体样式，通常为76px，便可以跟手机上类似维持一致的实际效果了。
--得到结果
1. 设计方案稿的企业是px（PhotoShop出去自然是这一）。
2. 没有人网页页面长短用em。
3. 原素宽度量取是设计方案图里的1/2。
这三个结果还其实不能得到一个好的计划方案。
假定
以便简单化难题，做一个假定，倘若全球上仅有一种手机上型号规格（正好是iPhone6），那设计方案稿变换的方法是如何样的？
（1）. 有张750px的设计方案稿，iPhone6的机器设备总宽375，取375为量取尺寸。
（2）. 那麼设计方案稿里边100px，在iPhone6显示信息为100px / (750 /375 ) = 50px。
（3）. 要求一个html font-size值 X（比如50px），那rem值便是 (50/X) rem （比如 50px/ 50px = 1rem）
这儿面能够很显著见到，font-size值并沒有要求要用哪一个值，它仅仅一个数量，原素的清晰度尺寸其实不会因为为这一数量有转变（因此上边问了三本人有三个不一样的值，这一切正常的）。也因为大家以375量取尺寸，因此在iPhone6上实际效果是与设计方案稿一致的。此外并不是rem也是能够的（第三步不做），立即用px， 更为简易。
假定毁灭
全球上当受骗然有许多乱七八糟的型号，那怎样在上边的基本上做兼容？
（1）. 倘若用的是px企业，又不做新闻媒体查寻做兼容。那麼将会在一些型号上稍大偏小，可是还可用。往往能够那么干，是由于手机上的机器设备总宽通常为在320-470中间，与375造成的误差实际效果其实不会非常大，自然误差越大差别越大。
（2）. 倘若用的是px企业，新闻媒体查寻做兼容。尽管那么做会兼容型号，让实际效果看上去都类似，可是学起来应当很痛楚，每一个固定不动长短的原素必须写一遍，这会是很要人命的吧。
（3）. 倘若用的是rem企业，没动态测算font-size值，不做新闻媒体查寻。我靠，那我觉得是跟第一种状况一样。
（4）. 倘若用的是rem企业，动态性测算font-size值。测算方法以下：
var baseSize = 50, // 数量 baseWidth = 375, //量赋值尺寸 fontSize = (document.documentElement.clientWidth / baseWidth * baseSize).toFixed(2) ; //这一便是动态性font-size值这儿是我一点沒有说成， 这一测算公式计算是viewport设定initial-scale=1的状况，假如是别的放缩占比，那么就必须乘以这一放缩占比。 比如：（淘宝网移动版） 其viewport：
meta name= viewport content= initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no其fontsize测算方法：
var baseSize = 75, // 数量 baseWidth = 375, //量赋值尺寸 fontSize = (document.documentElement.clientWidth / baseWidth * baseSize * 0.5 ).toFixed(2) ;这儿面重要的是哪个375的基本量赋值，当取375时，网页页面实际效果在机器设备总宽为375就务必显示信息一切正常，这一是很重要的承诺。 （5）. 倘若用的是rem企业，新闻媒体查寻做兼容。 在每个新闻媒体查寻的区段设定适度的font-size，没有什么非常的。 最后计划方案 依据上边的状况，我认为变换的方法能够用下边流程。 （1）. 设计方案稿需有承诺的尺寸（例750px），选择一个手机上的机器设备总宽做量取尺寸值（例375）。 （2）. 限定应用rem，选择一个font-size值做为的数量。 （3）. 测算每一个原素的rem值，开展页面开发设计。 （4）. js测算当今机器设备总宽的fontSize，并设定回html原素上。（兼容流程） （5）. 新闻媒体查寻做为挽救对策，独特机器设备总宽设定独特的font-size。（这步并不是务必的） 留意 （1）. px能够用，可是小心实际效果会稍大或偏小，原素将会还会继续向下掉。 （2）. 页面开发设计时只对于iPhone6（375pt）一种型号，网页页面进行后，才做兼容流程。 （4）. 应用sass或less可让编码写的形象化、简易。 比如：
padding: rem(5) rem(15) 0 rem(15);那样规格全是相匹配的设计方案稿的规格，开发设计工作人员也不用关注里边的完成关键点了。 小结 设计方案稿变换网页页面企业规格，简易做便是 先对于某一型号做，再做兼容。