发表于： 2018-11-15 21:56:57

1 916

今天完成的事情：将任务8修改成任务9

明天计划的事情：继续解决问题

遇到的问题：1.顶部图标模糊

解决方法：重新切图选用png格式

2.顶部在屏幕宽度576~767px时布局变化

解决方法： -@media only screen and (max-width: 575px){...}

@media only screen and (max-width: 767px){...}

-@media only screen and (min-width: 576px) {...}

@media only screen and (min-width: 768px) {...}

3.中部图片和文字屏幕在576~986px时挤在一起

收获：（通过今天的学习，学到了什么知识）

Bootstrap4 轮播轮播是一个循环的幻灯片

以下实例创建了一个简单的图片轮播效果：

实例

</ul>

<h3>第一张图片描述标题</h3>

</div>

</div>

</div>

</a>

</a>

</div>

响应式设计主要有三部分组成：流式布局，媒体查询和灵活的媒体类型。

流式布局，就是用灵活的网格搭建一个网站布局，它可以动态的调整以适应于任何宽度。网格布局使用相对长度单位，通常是百分比或是em。

媒体查询是对媒体类型的一个扩展，因为经常发现目标设备自带样式，他为特定的浏览器和设备提供特殊的样式。能够为目标设备提供有针对性的样式，在响应式设计中发挥作用。

初始化媒体查询

有好几种方式使用媒体查询，在现有样式表中使用@media规则，或是在一个新样式表里使用@import规则，或是用link标签给html文档引用一个单独的样式表。通常推荐在现有样式表中使用@media规则

每个媒体查询可以包含一个或多个媒体类型。常见的媒体类型有所有(all)，屏幕（screen），打印（print），电视（tv）和盲文（braille）。Html5中又添加了新的媒体类型，甚至包含3d眼镜（3d-glasses）。一个没有特别声明媒体类型的媒体查询，默认媒体类型是屏幕（screen）。

媒体查询中的逻辑运算符

媒体查询中的逻辑运算符，帮助建立强大的表达式。在媒体查询中有三个不同的逻辑运算符，分别是与(and)，非（not）和唯一（only）。

在媒体查询中使用与逻辑运算符，容许添加额外的条件，以确保浏览器或是设备同时满足a，b，c条件等等。多个媒体查询可以用逗号分开，作为一个筛选条件。下面的例子就是选择满足宽度在800到1024之间的所有设备。

@media all and (min-width: 800px) and (max-width: 1024px) {...}

在查询中的非逻辑运算符，表示除了满足查询条件设备的所有设备都适用。在这个例子表达式，就是应用于任何设备除了彩屏的，黑白屏或是单色屏幕都适用。

@media not screen and (color) {...}

唯一的逻辑运算符是一个新运算符，不识别html4算法的用户代理，所以隐藏设备或是浏览器不支持的媒体查询样式。下面表达式只匹配屏幕方向是竖屏，能够渲染的媒体查询的用户代理。

@media only screen and (orientation: portrait) {...}

忽略一个媒体类型

当同时使用非和唯一逻辑运算符，媒体类型就会失效，这种情况下媒体类型是默认的所有设备。