发表于： 2016-07-25 23:41:46
1 1497
今天完成的事情：
1.重写了task1、task3
2.修改了下所有任务的部分自适应问题
3.结束了task10、11
明天计划的事情：
1.完成task12
2.css收尾
遇到的问题：
Q：task中不同程度的出现些自适应及响应式的布局问题，修改起来还是蛮伤脑筋.
A:1.询问其它学员，请教师兄
2.重新回看了遍自适应及响应式相关内容，之前还是有漏看，或许是忘记了，稍微整理了些自适应的内容，
自适应条件：
1.不适用绝对宽度
（由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。
也就是css不能使用像素（px）宽度（width）
只能使用百分比（%）宽度（width）或者（auto）
2.相对字体的大小
不能使用绝对字体大小（px），只能使用相对大小（em或rem）
3.流动布局
使用浮动（float），避免了水平方向上的益处和水平滚动条的出现
4.使用绝对定位(position:absolute)应谨慎，一般用于特定不变的位置
5.选择性加载CSS
除了用html标签加载css文件，还可以在现有css文件中实现加载
<link rel="stylesheet" type="text/css"
media="screen and(max/min-deviece-width:xxpx)"
href="xx.css"/>
(上面的意思就是：如果屏幕的宽度小于/大于 多少像素就加载xx.css文件)
<link rel="stylesheet" type="text/css"
media="screen and(max/min-deviece-width:xxpx)and(min/max-deviece-width:xxpx)"
href="xx.css"/>
6.css的@media规则
同一个css文件中，也可以根据不同的屏幕分辨率，选择应用不同的css规则。
@media screen and (max-device-width: xxpx) {
}
7.图片的自适应
img { max-width: 100%;}orimg, object { max-width: 100%;}（针对嵌入网页的视频）
收获：概念反复看，总会有新的收获。
返回列表
评论