码农一枚，前后端都做，都不专业，请问前端如何实现1:1实现，想了解以下几方面
1、字体、颜色、间距、尺寸如果把握
2、浏览器兼容、如何兼顾低版本浏览器但是不丢失过多效果
3、js css img 的框架结构
4、js css命名如果规范统一

字体、颜色、间距、尺寸如果把握：
一般专业的设计师做图的时候会非常注意这些，他们会有自己的一套设计风格，尽管是在单个页面下，每个地方的字体、颜色、间距、尺寸都不是随意设定的，这些在你开发的时候应该能感受的到，这时要想高度还原其实并不是难事。
如果你遇到一个不怎样的设计师，那么最好的办法就是早点和她沟通，因为她们不懂技术，最终做的图可能不怎么规范，可能会导致切图不好切（无论是你切还是她切），导出2倍图发现有问题（可能会有毛边或者全部给的都是错图），整体风格不统一（包括颜色、间距、尺寸），这些都会对你的开发带来很大的困扰，
浏览器兼容、如何兼顾低版本浏览器但是不丢失过多效果：
不知道你所说的不丢失过多效果是指什么，如果是想在一些过时浏览器下显示现代浏览器的一些圆角，CSS3动画之类的，那么真的完全没有必要，但要保证基本的页面布局不要乱套除了IE8以下的应该不是问题。
js css img 的框架结构：
这个你应该指的是开发的时候吧，其实这个和团队有很大的关系，只要共同约束好就好了，如果是你一个人开发的话最好保证每个项目都是一样的结构，不要这个项目的结构是（js,css,img），另外一个又是（scripts,styles,images）。
普通Web开发的话可以参考：
h5bp/html5-boilerplate · GitHub
yeoman/generator-webapp · GitHub
yeoman/generator-gulp-webapp · GitHub
js css命名如何规范统一：
总的原则是：样式和行为的命名要区分开来，具体还是要团队制定一个规范。
给两个参考：
CSS Guidelines (2.1.3)
airbnb/javascript · GitHub

你需要的是一套前端框架。
一个好的设计师，会主动与你一起制定标准，或者使用你的标准来设计。
这个标准，就是前端框架。
字体、颜色、间距、尺寸、颜色、动态效果，都预先制定在框架里面了。
设计师能从框架里面直接把想要的东西拖出来。组合成为设计稿。
前端开发同时也能从框架里面将需要的代码拖出来，组合为产品。
你们共同制定了框架之后，工作流程就变成这个样子：
设计师在草图上用手画出了一个框，然后旁边拉了一个箭头写上：“这里要一个蓝色的大号按钮，链接到首页”
然后你看到草图，在记事本里面写下：
<a class="btn btn-large btn-blue" href="/index"> 返回首页</a>
这里，btn（按钮基本样式） btn-large（大号按钮的尺寸） btn-blue（按钮的颜色） 就是你们之前商量好的按钮的样式，以及命名规范。
这样一起工作一段时间之后，就会变成这样：
设计师和前端一起讨论、绘制草图，设计师和前端一起写代码，一起调试、一起那啥那啥。
设计师开始使用代码设计新奇的按钮样式，并且卸载了Photoshop（开玩笑的），前端开始专注于javascript实现各种交互功能，并且开始研究如何和后端默契配合。
在我们团队，交互设计师和UI设计师之间，使用手绘流程草图交流，UI设计师和前端开发使用手绘界面草图交流，前端开发和后端开发使用手绘逻辑草图交流。
每个月要用好多好多的笔 〒▽〒哭······
Photoshop这种拖慢工作效率的软件，我重装系统之后一直没装。
哦··我其实是一个设（qian）计（duan）。
·························································································
一个好的UI设计师，一定能看懂html以及css
一个好的UI设计师，不会喜欢使用Photoshop来给你输出设计稿，并要求你要完全一样。
一个好的前端，一定懂设计。
..................................................................................................................
另外：客户或者用户，根本不在意你的成品与设计稿有几个像素的差距，甚至大多数的客户或者用户，根本不在意你界面有多漂亮多艺术感十足，人家要的是清晰明确的表达，简单明了的阅读，秒开的速度，以及一万年不崩溃的可靠。
一个只能把界面做漂亮的设计师，所做的事情，根本┻━┻（╰(｀□′)╯（┻━┻不重要！

站在设计师的角度
，在设计之初，需要和技术沟通，了解后端技术实现的大致逻辑。
，如果只做设计层面，不做前端开发，至少对前端技术的熟悉程度不能低于对后端技术的了解。
，在越来越扁平化、轻设计的趋势下，对前端设计的方法和思路其实有一些创造性的东西可以尝试。比如我们团队目前直接从高保真的原型图进入前端开发（跳过设计图，额外做一些少量的元素设计）
，设计稿本身要高保真，不要认为开发同学可以心领神会你的意图。
站在技术角度
可能问题会稍微多点，编码思维和设计思维，有时不太容易跳出来。不过时时想着技术为产品服务，应该能发现不少问题。

别扯了，自己技术不行或者嫌麻烦就直接说。为什么一定要用框架，还是自己图省事儿。web前端用编译器直接写H5很难吗，都给你标注文件了，照着去盒模型外挂css样式js就好了。不要因为用不了框架，需要全手写工程量大就让设计背锅！！！