发表于: 2021-08-16 00:21:54
1 1082
今天完成的事情:
任务3的代码修改了一下 补充了一点内容
明天计划的事情:任务4
遇到的问题:在手机上展示页面如何自适应
收获:
(补充)
6.如何用photoshop切图?用切图工具进行图片的处理,通过导入保存到本地文件夹就可以使用了。
7.dpi是什么东西?
dpi(每英寸点数)
- 图像每英寸长度内的像素点数。
- DPI(Dots Per Inch,每英寸点数)是一个量度单位,用于点阵数码影像,指每一英寸长度中,取样、可显示或输出点的数目。
- DPI是打印机、鼠标等设备分辨率的度量单位。是衡量打印机打印精度的主要参数之一,一般来说,DPI值越高,表明打印机的打印精度越高。
- DPI是指每英寸的像素,也就是扫描精度。DPI越低,扫描的清晰度越低,由于受网络传输速度的影响,web上使用的图片都是72dpi,但是冲洗照片不能使用这个参数,必须是300dpi或者更高350dpi。
8.关于自适应,屏幕分辨率,图片尺寸
手机分辨率,就是屏幕的像素点
屏幕大小,4.7寸5寸等是指手机屏幕对角线的物理长度
9.如何自适应网页设计?
1、在HTML头部增加viewport标签。
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
2、不使用绝对宽度
在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。
3、流动布局
流动布局(fluid grid) "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
————————————————
评论