发表于： 2017-04-14 23:35:36
2 575
今天完成的事情：
task8-1所需的时间比我想象的要长，花了很多时间在响应式测试和细节修改上。
学会了媒体查询，在使用媒体查询进行响应式开发前，需加上：
<name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
媒体查询的基本样式如下：
@media screen and (min-width:960px) and (max-width:1200px){
body{background:yellow;}
}
规定了媒体的样式和宽度区间，css代码写在中间。
若有公共的未使用媒体查询的代码，需将其放在最前方以免其覆盖媒体查询的css代码。
一般情况下可省略“screen”
明天计划的任务：
继续完成task8-1，熟悉响应式栅格开发。
遇到的问题：
我用border-radius写了一个圆，并设置了固定的宽高，然后用flex将其与文字对其，结果发现圆被文字挤扁了，后来通过给圆再嵌套一层div的方法解决，不知道有更好的方法吗？
收获：
半成品展示：http://59.110.174.154/task/task8/index.html#
返回列表
评论