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

带着问题去看书学习啦~

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

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

语法：

代码语言：javascript复制

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

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

语法：

代码语言：javascript复制

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

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

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

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

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

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

代码语言：javascript复制

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

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

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

0 人点赞

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