发表于: 2017-03-09 22:46:48
2 667
今天完成的事情:
重写了task3,了解了media,将样式表改成外联,定义font-size改变rem;
看了html表单属性;
明天计划的事情:
开始看html5;
开始尝试task4;
学习git;
遇到的问题:
git上传失败,原因未明,待尝试;
media使用失败,已解决;
收获:
关于media,首先是在link中使用,
<link rel="stylesheet" type="text/css" href="mystyle.css"media="screen and (min-width: px)" />
结果media并没有出现预期中的效果,后尝试
@media screen and (min-width: 400px)
然而依然失败,百度了下发现虽然有问类似问题的,但是……说的都是media怎么用,属性值什么的,改来改去发现并没有区别,如min-width/min-device-width
最后我盯着人家写的代码,突然想到,换个位置?于是改成了
<link href="mystyle.css" rel="stylesheet" type="text/css"
media="screen and (min-width: px)" />
将href的位置放到了最前面,结果成功了……上次我f12改w3cschool动画页面,里面有的元素属性值完全不按它自己写的顺序来,我还以为属性值顺序是不做规定的……
除此之外,一开始尝试了将div的背景直接设置成图片,也就是返回和logo之类,但最后发现大小难以控制(也许可以用%来控制,但一开始不是那么想的,就没往那改),然后改成了用img元素,初设用px,后改成rem,通过font-size,配合media根据不同的页面宽度来加载不同的css,但最后发现一个曾经忘了在哪看见的一个问题,chrom貌似rem只能设置到最小12px……这导致了最初的想法,通过只改
html {
font-size: 62.5%
}
来进行适配页面的计划失败了,最终复制黏贴and改img的width大小,设置了small.css和big.css两个css,
评论