第11章 手机响应式开发（下）

带着问题去看书学习啦~

HTML5＋CSS3＋JavaScript Web 前端开发案例教程（慕课版）【不推荐】，微信读书中找到的学习Web前端书籍，第11章开始啦，完结了！耶(＾－＾)V

习题

11-1 简单描述什么是响应式组件。

在响应式网页设计中，将常用的页面功能（如图片集、列表、菜单和表格等）编码实现后共同封装在一起，从而便于日后的使用和维护。

11-2 实现响应式图片的方法有哪些？

语法：

<picture>
 <source srcset="1.jpg" media="(max-width: 800px)" />
 <img src="2.jpg">
</picture>

<picture>标签又包含<source>标签和<img>标签。其中<source>标签可以针对不同屏幕尺寸，显示不同的图片。上述代码表示，当屏幕的宽度小于800px时，网页将显示1.jpg图片，否则，将显示<img>标签中的2.jpg图片。

• 使用<picture>标签，可以做到不是简单地响应设备大小，而是可以根据屏幕的尺寸调整图片的宽高。

语法：

@media screen and (min-width: 800px) {
  css样式代码
}

当屏幕的宽度大于800px时，将应用大括号内的CSS样式代码。

支持media关键字的浏览器及其版本：

支持media关键字的浏览器及其版本

• 使用CSS图片，利用媒体查询的技术，使用CSS中的media关键字，针对不同的屏幕宽度定义不同的样式，从而控制图片的显示。

11-3 实现响应式布局时，<meta>标签的作用是什么？

<meta> 标签用于描述页面内容，关键词，作者，最新修订时间以及其它元信息。

https://man.ilovefishc.com/pageHTML5/meta.html

11-4 常见的实现响应式表格的方法有哪几种？

• 1. 隐藏表格中的列 指在移动端中，隐藏表格中不重要的列，从而达到适配移动端的显示效果。实现技术，主要是应用CSS中媒体查询的media关键字，当检测到移动设备时，根据设备的宽度，将不重要的列，设置为display:none。
• 1. 滚动显示表格中的列 指采用滚动条的方式，滚动查看手机端看不到的信息列。实现技术，主要是应用CSS中媒体查询的media关键字，检测屏幕的宽度，同时，改变表格的样式，将表格的表头从横向排列变成纵向排列。
• 1. 转换表格中的列 指在移动端中，彻底改变表格的样式，使其不再有表格的形态，以列表的样式进行显示。仍使用CSS媒体查询中的media关键字实现技术，检测屏幕的宽度，然后利用CSS技术，重新改造，让表格变成列表，CSS的神奇强大功能在这里得以体现。

11-5 请写出在CSS3中通过媒体查询来判断当前屏幕宽度是否大于1024px且小于1280px的代码。

@media screen and (min-width: 1024px) and (max-width: 1080px){
 ...
}

其他

已经是本书的最后一篇了，当然书中还有一章，主要就是实践一个项目而已。项目实践吧，自己系统点学一下基础，模仿比较好的网站写个框架，也是一种很不错的方式。接下来就要开始其他的学习内容啦。真的不推荐此书噢，不过也算总结下来学到一点东西，对一些知识点加深了点印象，可以啦！继续加油。^_^

然后呢，说下最后一个章节吧，主要学会自己画一些网站的功能结构，项目分包结构，熟悉熟悉，还比较有用的点。同样的东西放一个包中，或者按业务分包也比较清晰。这样项目更易于维护。