今日完成的任务

       完成任务十 十一

明日完成的事

       进行任务十二

收获

       补一下任务九的深度思考，任务八九用的是bootstrap框架，bootstrap是由twitter开发的web框架，现在更新到了bootstrap4，基于css、html、js、jquary，在未来的bootstrap5中将会放弃jquary。

如何使用bootstrap的栅格系统？

bootstrap的栅格系统是一套响应式、移动优先的网格系统，可以根据网页大小增加减少，系统自动分为12列，我们可以根据页面布局来自由分配列数。

.col- 针对所有设备

.col-sm- 平板 - 屏幕宽度等于或大于 576px

.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)

.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)

.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

这是列数以及匹配的屏幕分辨率，一般是col-number的格式来书写，一般都是先设定container的容器，放置row行，然后再在行中放列。

多个设备的列数可以共存，以适配和种设备。

媒体查询如何使用？

      使用@media （min/max-width:分辨率）,注意使用连续的（min-width：576px）and （max-width：768px）中间的and两边需要有空格。

说了这么多响应式那么他的优缺点是什么呢？

在分辨率不同，设备环境进行一些不同的设计，开发维护成本会低很多。

兼容性好，不过分辨率变化太大的设备显示效果也不好。

方便改动，响应式是针对页面的，可以只改动页面。

缺点也很明显

页面代码多了很多，加载速度会慢很多。

响应式的资源都是一样的，低分辨率的设备下载了大于他要求的资源，浪费流量以及加载速度。

适用的界面类型也很少，比如门户网站就不适用。