发表于: 2020-01-30 23:43:43

1 1126


今日完成的事情


优化代码,修改一些细节问题


ps精准切图多倍图

  1.编辑-->首选项-->增效工具-->启用生成器 勾选

  2.文件-->生成-->图像资源  打钩

  3. 在图层名称后输入后缀如.png .jpg即可在psd文件目录下生成的文件夹里生成切图

   图层名前加200%   名后空格加@2x生成二倍图

(貌似前面只加200%也可生成,后面的空格@2x大概查了下应该是命名规范,都这么用)


理解了ppi,明白小屏幕可以使用多倍图提升图片的清晰图,使用媒体查询功能为各尺寸阶段屏幕设置不同倍数的图片


了解了媒体查询常用的几个宽度分界点

  ≤767px    手机
  ≥768px    平板
  ≥992px    电脑
  ≥1200px  大显示器


将左上角返回键使用纯css实现,减少图片响应请求


遇到的问题

中心主体部分左右外边距使用百分比为单位,当窗口过大或过小会引起布局异常

解决办法

加入min-width及max-width处理


遇到的问题

代码如此时,小屏幕手机上依然显示二倍图

原因

媒体查询需注意书写顺序,注意满足条件

解决办法


明日计划的事


着手task4


收获


初步对媒体查询响应式布局有一定的理解


对伪类::before和::after的应用更熟练了一些


(域名备案我也是佛了,什么时候才能用域名啊 39.107.221.29


返回列表 返回列表
评论

    分享到