任务耗时：2019.7.1-2019.7.3耗时三天
官方脑图：
任务总结：
响应式的知识点：
响应式设计主要由组成：流式布局，媒体查询和灵活的媒体类型。
布局方式：
第一部分，流式布局
就是用灵活的网格搭建一个网站布局，它可以动态的调整以适应于任何宽度。网格布局使用相对长度单位，通常是百分比或是em。这些相对长度多用于网格，诸如宽度，间距或是留白等属性。
流式布局不推荐使用固定单位，如px或是英寸。因为屏幕的宽高会随着设备的不同而改变。
仅靠灵活的布局方法是不够的。有时浏览器视口的宽度可能很小，甚至按比例缩放布局也会产生太小而无法有效显示内容的列。具体地说，当布局太小或太大时，文本可能变得难以辨认并且布局可能开始破坏。在这种情况下，媒体查询可用于帮助建立更好的体验。
第二部分，媒体查询
媒体查询是作为目标和包含样式时常见的媒体类型的扩展而构建的。媒体查询提供了为各个浏览器和设备环境指定不同样式的功能，例如视口宽度或设备方向。能够应用独特的目标样式开辟了一个机会的世界，并利用响应式网页设计。
初始化媒体查询
使用媒体查询有两种不同的方法，使用@media现有样式表中的规则，使用规则导入新样式表@import，或链接到HTML文档中的单独样式表。一般来说，建议@media在现有样式表中使用规则以避免任何其他HTTP请求。
html：
<!-- Separate CSS File -->
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">
css：
/* @media Rule */
@media all and (max-width: 1024px) {...}
/* @import Rule */
@import url(styles.css) all and (max-width: 1024px) {...}
媒体类型之后的媒体查询表达式可以包括不同的媒体特征和值，然后将其分配为真或假。当媒体要素和值分配为true时，将应用样式。如果媒体功能和值分配为false，则忽略样式。
媒体查询
@media all and (max-width: 420px) {
section, aside {
float: none;
width: auto;
}
}
评论