发表于: 2018-10-21 20:38:31

2 788


今天完成的事情:

自适应:

第一步:在网页代码的头部,加入一行viewport元标签

<meta name="viewport" content="width=device-width, initial-scale=1" />


第二步:(注意)不使用绝对宽度,字体大小

第三步:(注意)字体大小

字体大小是页面默认大小的100%,即16像素

字体不要使用绝对大小"PX",要使用相对大小“REM”

html{font-size:62.5%;}

body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }

第四步:流动布局

  1. .left{ width:30%; float:left}
  2. .right{ width:70%; float:right;}

"自适应网页设计"还必须实现图片的自动缩放



img, object {max-width: 100%;}

单位

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

 

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。


EM特点 

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

我们在写CSS的时候,需要注意两点:

1. body选择器中声明Font-size=62.5%;

2. 将你的原来的px数值除以10,然后换上em作为单位;

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

rem特点 

        rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。





任务总结:

任务名称= task3

成果连接:https://miboweixin.github.io/weixin/rw3/fudong.html

任务耗时:2018.10.12-2018.13无延期

个人脑图                                                                



任务总结:

任务无延期正常完成任务

1.可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图。所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图;现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高。另一方面,CC版本可通过脚本执行全自动切图,这样完全解放了切图人员的双手。

PX特点:

1. IE无法调整那些使用px作为单位的字体大小;

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

 

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

 

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。


明天计划的事情:完成任务总结



遇到的问题:github不清楚



收获:


返回列表 返回列表
评论

    分享到