发表于: 2018-05-19 22:46:38
1 653
今天完成的事情:
1.自适应原计划选择获取设备宽度,用百分比写。
设计稿是640px,切出来的图在320上要除以2,先用PScc 获取@0.5的小图,再写成页面。
考虑了一下,小像素的图放大会模糊,改用最大像素的图往小图适配。
2.@meta 可以将设备屏幕分段,再设置不同的html font-size
看到一段腾讯的示范代码
https://www.zhihu.com/question/44405442/answer/97297588
我把宽320px 字体大小100px沿用,其余分段按比例算,修改了数字
问题是这段代码中的min-width:640和max-width:640的分段边界点重合,640px的点算哪段?
F12调试后发现 属于max-width那段,也就是按132px来做,不符合设计意图,计算也不方便
设置了等于640px的属性max-device-widtn,还是没有改变
最后从淘宝页面中获得启发,把max-width-1,这样上限就会被划分到下一段中去,调试发现正好font-size 200px
https://www.cnblogs.com/well-nice/p/5509589.html
3.height 508.094px 和设计图的1009px不一样(1136px去掉手机状态栏)
改成1009/200rem 即可
4.其余图片、字体尺寸均按比例用rem做单位计算
5.为了margin 计算方便,避免和别的元素重复,每个margin都测量top和left,
明天要做的事:
task3 task4
评论