【金秋打卡】第14天 Responsive设计的使用

课程名称：十天精通CSS3

课程章节： Media Queries 与Responsive 设计

主讲老师：大漠

课程内容：

今天学习的内容包括：Responsive设计的含义？Responsive布局技巧的使用？meta标签的使用？

课程收获：

Responsive设计简单的称为RWD，是精心提供各种设备都能浏览网页的一种设计方法，RWD能让你的网页在不同的设备中展现不同的设计风格。Responsive设计最关注的就是根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。

主要断点就是设备宽度的临界点。就是使用主要断点和次要断点，创建媒体查询的条件。而每个断点会对应调用一个样式文件。主要断点加载的不同样式文件直接将影响Web的效果。

Responsive布局中，我们需要注意的是尽量少用无关紧要的div；不要使用内联元素，尽量少用JS或flash，不使用没用的绝对定位和浮动样式，摒弃任何冗余结构和不使用100%设置。可以使用的技巧有使用HTML5 Doctype和相关指南，使用reset重置样式，有语义的核心布局，多使用导航菜单之类元素。

可视区域meta标签中的content有很多属性值，可以参考下面的属性值图。我们需要注意的是在IE6-8中完全是不支持CSS3 Media。为了Web页面适应屏幕的大小，可以通过这个可视区域的meta标签进行重置。

我们可以针对不同的设备设置不同的像素样式，比如有1024px显屏，800px显屏，640px显屏以及iPad横板显屏和iPhone 和 Smartphones等，然后将所有不同的像素样式可以放到同一个css文件中，也方便我们以后的更改。

今天学习了边框的11-4到11-8的4个小结，花费了35分钟，今天主要学习了Responsive设计相关的知识，我们平时在工作中或者项目中，会遇到写公司官网的项目，我们公司官网肯定不能只适用于pc端肯定要进行多端适配，而且最好移动端也可以正常显示，这个时候就可以用到我们这几章学习到的知识，将不同的尺寸都写到不同的media中，这样我们可以根据设计图写出对应的css，从而显示设计图给出的效果。