切图方式

• 切片工具
• 参考线，拉线框住，所需图片被断开是应进行切片的删除合并，在存储界面将图片缩小，把整个图片选中，导出保存。
• 新建透明图片，将设计图上的某些图层图标拖到透明图片上，在图像菜单选择裁剪，得到透明底的图片，存储为 web 所用格式。
• 选择Ps 脚本，选择图层导出到文件
• 雪碧图，还没试过；但是可以结合 CSS Sprites Generator 一起使用，方便快捷。
• 蓝湖，Photoshop版本要求为cc2015 以上，我是 ps cs6，所以放弃了……

PX，EM，REM

• 1em = 16px 相对于当前对象内文本的字体尺寸（或浏览器的默认字体尺寸）。

• 1rem = 16px 相对于 HTML 根元素。对于需要适配各种移动设备的，可以使用rem。

• 如下声明后 1em = 10px

  body {  font-size: 62.5%;
  }

想法

• 切图得到的图片越少越好，这样加载网页才不会太慢，这是为什么要把多张透明底图片合并为一张雪碧图的原因。
• 能用 html 和 css 整出来的图就不要用图片。
• 一开始对各个 div 布局时，没有思路，都整成 float 属性，结果不对劲。一些地方直接用 margin 就能对 div 进行布局了。对于一左一右的可以用 float + margin-left(right)。
• 我切下来的图片在网页上显示很大，我不知道是要自己用 PS 把图片改小还是用 CSS 控制图片尺寸，最后还是用 CSS 控制图片的宽高了。为了让图片按比例缩小，应该将 width 或者 height 其中一个设置为 auto。
• 关于在不同设备上的显示，好像 vs code 的 html 默认模板就带有 <meta name="viewport" content="width=device-width, initial-scale=1.0">，我也就没深究了~
• 为了让相同的文字在不同设备上显示的大小差不多，要用 rem？这个我不太清楚。窗口变得很大时，我的字就很小了，窗口变化不大的话文字大小还行。
• 

之前配置的 tomcat，明天还是再配置下服务器上的 nginx，再看下如何处理不同 dpi 下的图片，看看媒体查询的方法是什么。