发表于: 2017-07-28 05:10:37
2 668
今天完成的事情:完成了任务4,了解并应用了px、em、rem:
px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的,使用px作为单位的字体大小IE调整不了,比较固定。
em:同样也是长度单位,不过em的值也不是固定的,会根据父级继承文字大小。所有浏览器默认字体高都是16px,未经调整都是1em=16px,所以为了简化字体大小的换算,前辈们给出了:font-size=62.5%(在body选择器声明),这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
rem:也是相对单位(root em,根em),通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。任务4涉及手机端查看界面,所以代码都用的rem,而rem相对px来说,主要是针对群体来挑选使用,除了IE8及更早版本外,所有浏览器都支持rem。不支持的浏览器用:
p {font-size:14px; font-size:.875rem;}
来使浏览器忽略这些用rem作字体大小的设定。
明天计划的事情:开始着手任务5.
遇到的问题:开始头痛在表单左边图片的定位,后来发现表单可以添加背景图片,再把背景图片写成循环0次,就能轻松解决。
收获:对于任务4一开始的构思,觉得是把最上一栏的注册返回框想成一个盒子,然后定义盒子中的三段文字,发现并不能达到想要的效果。后来发现注册和关闭原本是按钮,那么用header分别定义头部两个按钮,再用text-align:center中间的文字就行了。表单左边的小图标,后来参考了资料,发现使用
background: url("图片地址")no-repeat 0 center;
就能轻松设置,no-repeat 0 center就是背景图片循环0次。
评论