发表于: 2021-06-01 23:44:35

1 984


今天完成的事情:

对媒体查询进行了学习。

1,媒体查询用法

@media 媒体查询包含一个可选的媒体类型和,满足CSS3规范的条件下,包含零个或多个表达式,这些表达式描述了媒体特征,最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型,并且所有的表达式的值都是true,那么该媒体查询的结果为true.


 (1)500px-800px之间的设备 @media screen and (min-width: 500px) and (max-width: 800px) { ... }

  (2)最小宽度500  @media screen and (min-width: 500px){... }

  (3)在非打印设备下 @media not print and (max-width: 1200px)


2,常见媒体尺寸

@media screen and (min-width:1200px)

@media screen and (min-width:992px)

@media screen and (min-width:768px)

@media screen and (min-width:480px)

在设置时,需要注意先后顺序,不然后面的会覆盖前面的样式。





明天计划的事情:

1,对媒体查询加深理解


2,对开始着手做task9






遇到的问题:

1,前面做任务,一直用的都是像素px,对于em与renm不是很理解。找了不少知识点,不过还是不明白


2,任务8里的职业列表,鼠标悬浮出现的页面与原表格有一点出入,没找到原因。把代码拿出去,重新建立页面打开,又100%重合。。。


3,做任务总是走弯路,比如task8该用bootstrap,结果纯粹用css代码做,等做完发现不对,又套用栅格系统做,等做完后又发现不对,因为没有套用bootstrap里现成的样式。弯路有100条,让我走了99条,真是无语。。。


4,任务卡太久,日报都不知咋写了,从简吧





收获:

1,做任务,一定要思路正确,用最正确的方法


2,学习了媒体查询,知道了基本的用法









返回列表 返回列表
评论

    分享到