发表于： 2018-05-31 23:30:04
1 519
2018.5.31
今天完成的事情:
1.完成任务二并提交任务二
2.学习了viewport和px的相关知识
3.下载了ps,学习了ps的基本命令,学会了如何截图并保存为web所用格式
明天计划的事情:
1.完成任务一的深度思考
2.继续任务三
遇到的问题:
ps没有使用过,基本命令和切图全靠百度
收获:
1.在css中使用的px单位是相对长度
屏幕像素密度与屏幕分辨率以及屏幕尺寸的关系:勾股定理计算出屏幕对角线的像素点数,再用对角线的像素点数除以屏幕尺寸
2.viewport的设定<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
(1).如果在不设置viewport的情况下,就按照各个厂商默认的width来了
正常的手机默认width设定的是980
(2).如果设定了viewport的情况下,如果width="device-width",width与手机的横向像素点数有关系,也就是屏幕分辨率中的横向分辨率来了
首先要按照像素密度(ppi)
如果ppi在160附近,device-width=横向分辨率，
如果ppi在320附近,device-width=横向分辨率/2，
如果ppi在480附近,device-width=横向分辨率/3
这个值决定能显示的网页大小
其实设不设定viewport就是决定了把屏幕分成多少px,不设就是980px,设了就与横向分辨率以及像素密度来确定多少px
但是手机本身的物理分辨率不同,不同的横向像素点数对图片显示的效果不一样,也就是屏幕分辨率的不同会直接影响显示效果.比如320px宽的图片在iphone3gs上完美呈现,在iphone4上就会显得模糊(因为同样的1px在4上面占用了2px的物理像素).所以,就产生了二部图或者三倍图的概念
3.ps的使用总结
(1).放大美工图：ctrl+++
(2).缩小美工图：ctrl---
(3).拖动美工图：按住“空格键”不放
切图就是像刻刀一样的图标,在切图是需要把图片放大再切,否则会出现没切完整的情况,切完后点击文件,点击存储为WEB所用格式
返回列表
评论