发表于： 2019-06-09 22:49:00
1 776
今天完成的事情
媒体查询第一个页面：改到了页尾部分，过程也是曲曲折折，最近两天运用媒体查询有时候失效，苦苦找不到问题，百度许久之后得以解决。之后在添加媒体查询中也有时候得不到自己想要的效果，因为在制作第一个页面的时候没有考虑到响应式。所以在最后修改第一个页面问题多多。
媒体查询@media不生效的原因
第一种错误：格式书写错误and后面必须有空格例如下面代码；
@media screen and (max-width:500px){ }第二种错误：样式冲突；@media查询代码的样式被后面的css所覆盖。
注意：建议在书写css的过程中，@media查询带的css写在后面，以免这样避免被前面的css覆盖
第三种错误：css本身出了问题导致css不生效
注意：这是一种很常见的错误，例如块元素浮动导致父级元素没有高度；此时给父元素加背景颜色发现没有生效，实际上是css导致的错误，而没有显示。
例如css选择的优先级也会导致对其中一种生效另外一种不生效，等等css错误导致的问题也非常多，就不一 一列举了。
第四种错误：meta属性viewport属性，这个虽然基本常识，应该也会有人漏掉。
<meta name="viewport" content="width=device-width, initial-scale=1" />
明天计划的事情
学习flex，改完第一个页面。
遇到的问题
1.比如一个长方形box中有四个元素，使用flex排序，卡住如何利用媒体查询到一定分辨率变成两行，最后四行（不会一个一个元素的换）。
解决想法：之前在flex+媒体查询的例子中看到，可利用flex：1 1 *% 、order: <1> 、媒体查询实现，也没见例子设置宽高。感觉要去了解了解
收获
对媒体查询运用加深，对flex项目属性写法不熟悉
返回列表
评论