今天完成的事:
1.完成了任务六,并提交审核
2.深度学习了雪碧图的大小调节
3.学会了下拉框的制作
4.开始了任务七,完成了第一个页面的布局
明天的计划:
1.任务七进行中
2.有空进行任务五六的深度思考
收获:
1.学会了怎么做模拟下拉框,并且运用了hover效果
2.掌握了雪碧图的使用,学会了如何根据网页调整雪碧图的相应大小
3.早上又探究了一次 响应式和自适应的区别
自适应与响应式的区别
自适应是为了解决如何才能在不同大小的设备上呈现同样的网页,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整网页内容大小。但是无论怎样,他们主体的内容和布局是没有变的。
自适应还是暴露出一个问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上查看,内容过于拥挤,响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计,布局和展示的内容可能会有所变动。
响应式布局被大家熟知的一个重要原因就是 twitter 开源了 bootstrap。
相比自适应网站,响应式网站省去了很多的控件,同时也省去了不少建立和维护的功夫。响应式布局就是一种流体,在按百分比缩放时也能相当的流畅。
使用响应式设计,你要记住所以的布局。这当然可能会使过程混乱,并且使设计更加复杂。这就意味着你应该专注于中等分辨率的视图,然后再用media querie调整为更低或更高的分辨率。 所以通常的做法是,在一个新的项目中使用响应式设计,在后期的改造中使用自适应设计。
自适应可用于改造现有的网站使其更好地适应移动端。这使你的设计可控制和开发多个特定的视图。你开发视图的数量完全取决于你,你的公司和全面的预算。然而,它也提供了一定量的控件(例如在内容和布局上),如此你便无须使用响应式设计。但当你设计多种分辨率时你会发现,在改变窗口大小的时候将会“跳出”布局。
从技术的角度来说:
响应式:不管用什么设备访问时,都是服务器把数据先给浏览器,脚本和CSS进行自动检测设备屏幕大小,来确定布局的显示内容,并且一直通过本地脚本在监听设备大小的变化,随时做出样式变化(直接检测+调整)
自适应:当用户发起访问请求时,夹带了本地设备的信息,服务器根据此判断来调整HTML+CSS+JS文件,再返回给浏览器(先检测后调整)
一张图看清不同:
响应式:网页的内容和布局随着屏幕大小变化而变化
自适应:网页的内容只是进行了宽度的自适应,如果设备太小,很多内容就会堆积在一起看不清;如果屏幕过大就会过于分散

遇到的问题:
1.昨天遗留的关于雪碧图的大小问题,今天在师兄指导下理解了,我起初以为,雪碧图里面的各种小图片只能用原图大小,并且我也自己尝试了用background-size属性来调整,但是失败了,因为没理解雪碧图和background-size之间的关系。
原本雪碧图在CSS内需要用width height + position来确定小logo,而background-size其实是用来控制整个雪碧图的大小,假如我把原尺寸的雪碧图宽高设为200% 或者 把宽高数据放大一倍,再对需要引用的logo的width height的属性放大一倍,最后还要调整原来position的数据,那么出来的小图片的大小就可以放大一倍,而不会把周围的图片露出来。想缩小一倍亦可这样操作 【图】

主要用到的参数:
width
hieght
background: url
background-position
backround-size
注意:
不能用rem做单位,原图给的px不用单位转化,一转化就炸了
2.我昨天遇到的问题,在手机端浏览正常,但是到了电脑端就不正常了,异常的大,今天在各位师兄的帮助下,终于找到了问题的根源所在!! 是我的谷歌浏览器浏览被放大了!
浏览器被放大,我以为是自适应出了问题

被缩回100%正常显示

评论