今天完成的任务：

1.做task10，学习了radio默认标签的修改，修改的方法用了相邻选择器，checked伪类和label标签，方法如下：

/*css*/
label{
    display: flex;
       align-items: center;
}

input[type="radio"]{
    display: none;
}

label span{
    display: inline-block;
       width:1em;
       height: 1em;
       border-radius: 50%;
       background-color: #ccc;
}

input[type="radio"]:checked+span{
    background-color: #1d7ad9;
}

<!--html-->
<!--通过相同的name，使checked只能选定一个-->
    <form>
        <label>
            <input type="radio" name="name"><span></span>a
        </label>
         <label>
            <input type="radio" name="name" checked="checked"><span></span>b
        </label>
         <label>
            <input type="radio" name="name"><span></span>c
        </label>
         <label>
            <input type="radio" name="name"><span></span>c
        </label>
    </form>

demo如左图所示。

2.做响应式的时候，看了响应式字体的问题，在响应式中，一般用em或rem做字体单位。

在桌面设备上，根元素默认字体大小为16px，但其它设备默认就不一定是16px了，因此需要让网页在多个设备上响应，需要设置相对的em和rem单位。而rem单位直接等于根元素字体大小，相较于em减少了换算的麻烦，因此更推荐使用。

在使用rem时，一般需要加上

html{
   font-size: 62.5%;
}

即桌面设备上的10px（62.5%*16px），用十进制便于我们换算和把握尺度，不要忘了在body上再设置字体大小以消除继承的影响：

body{
   font-size: 1.6rem;
}

这种做法在大多数浏览器上有效，但在chrome中会有bug，因为chrome默认最小字体为12px，那么我们设置的62.5%就被解析成了12px，即1rem=12px，差了两个px长度，因此我们需要把html设置为：

html{
   font-size: 625%;
}

相应的，body为：

body{
   font-size: .16rem;
}

这样就不会出现任何问题了，只是换算单位太大了，在使用时一定要注意数清rem的小数。

明天计划的任务：

完成任务10，开始看less/sass框架。

遇到的问题：

无

收获：

对bootstrap响应式理解加深。