今天完成的事情：

今天最主要的就是重新写了任务八的修真院首页任务，用boorstrap写了大致的页面样式，基本达到了自己想要的效果，如下图

响应式没做，明天主要做下响应式。整理下响应式方面的知识。

网页布局方式

1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。

2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。

3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。

4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。

注：以上几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使用的。

响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样，我们利用媒体查询可以检测到屏幕的尺寸（主要检测宽度），并设置不同的CSS样式，就可以实现响应式的布局。

响应式开发的原理：媒体查询：

查询媒介，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

2、设计方法：媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

优点：适应pc和移动端，如果足够耐心，效果完美

缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

下面是一段典型的响应式

html {

    font-size: 16px;

}

@media screen and (min-width: 375px) {

    html {

        /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */

        font-size: calc(100% + 2 * (100vw - 375px) / 39);

        font-size: calc(16px + 2 * (100vw - 375px) / 39);

    }

}

@media screen and (min-width: 414px) {

    html {

        /* 414px-1000px每100像素宽字体增加1px(18px-22px) */

        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);

        font-size: calc(18px + 4 * (100vw - 414px) / 586);

    }

}

@media screen and (min-width: 600px) {

    html {

        /* 600px-1000px每100像素宽字体增加1px(20px-24px) */

        font-size: calc(125% + 4 * (100vw - 600px) / 400);

        font-size: calc(20px + 4 * (100vw - 600px) / 400);

    }

}

@media screen and (min-width: 1000px) {

    html {

        /* 1000px往后是每100像素0.5px增加 */

        font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);

        font-size: calc(22px + 6 * (100vw - 1000px) / 1000);

    }

}

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

明天计划的事情：

做下响应式。整理下响应式方面的知识

遇到的问题：

一点都花在bootstrap上了，用的还不熟练

收获：