发表于: 2017-03-09 22:46:48

2 666



今天完成的事情:


重写了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,



返回列表 返回列表
评论

    分享到