切图注意事项

[LeungKaMing]

PC

1. 一定要注意PC端在不同分辨率下会存在样式问题，所以一定要用工程化的思想去划分每个页面的所有部分。例如：psd看似是一屏过的页面，也要把它划分一头，一尾还有中间部分。

由于本次开发不注意，直接把这张psd一屏切成背景图，导致1280*720分辨率下样式变形，令到表格往下掉。。。
2. 尽量不要设置overflow-y:hidden；可能会由于分辨率引起无法往下滚动查看剩余内容。
3. 高度尽量通过内容来撑开，不要设死。
4. 如果依旧给某个元素设置了固定高度，并且有背景图的话，要考虑不同的分辨率会存在拉伸，导致可能会出现“白条”的缺点 --- 解决方法是给body加上背景色；优点是减少网络请求。

移动端

1. 移动端可以看场合使用overflow-y:hidden; 但注意不同机型下是否有影响
2. 移动端横轴使用百分比，纵轴使用rem或px。
3. 高度尽量通过内容来撑开，不要设死。
4. 如果依旧给某个元素设置了固定高度，并且有背景图的话，要考虑不同的机型会存在拉伸，导致可能iphone6的元素高度300px是显示正常的，但到了iphone5屏幕会收窄，背景有可能就会变成280px，而元素高度还是固定的300px，那么就会出现“白条”的缺点 --- 解决方法是给body加上背景色；优点是减少网络请求。
5. 要是用了图片来代替背景占位的话，只需要给该图片设置固定宽高即可；缺点是会增加网络请求。
6. 移动端如果想要背景图布满整个屏幕，用background-size: 100%;即可，一般background-size: 100% 100%;在正方形的素材才会用（使用后X，Y轴会明显拉伸），注意background-size: cover虽然也可以实现，但是前者在ipad的尺寸下也可以自然铺满，后者是不可以的。
7. 如何切自带PS效果的图标做png(例如：发光、模糊)

• 老步骤
• 然后把所有无关的视图层勾去掉
• 接着选中该两个图层右键转换为智能对象
  
• 最后辅助线选项 => 视图 => 对齐到