发表于: 2017-04-08 21:02:15
0 646
今天完成的事情:
这几天补了补js知识,用node js koa2框架搭了最基础的静态页面,放到了服务器上。
完成task7,基本上不变形
明天计划的事情:
初步完成task8
遇到的问题:
我的第一个页面(选择版本的页面)为了保证不出现竖向滚动条,用vh控制的header,footer等高度
但是其他的页面,在电脑端屏幕上,用vw感觉不是很友好- -
收获:
学会了字体大小的弹性改变(第二个页面用了)
用calc计算字体大小,不会生硬的从16px跳到20px,而是随着宽度改变。
用%保证兼容性,后面字体用rem布局
@media screen and (min-width: 375px) {
html {
font-size: calc(100% + 2 * (100vw - 375px) / 39);
}
}
@media screen and (min-width: 414px) {
html {
font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
}
}
@media screen and (min-width: 600px) {
html {
font-size: calc(125% + 4 * (100vw - 600px) / 400);
}
}
@media screen and (min-width: 1000px) {
html {
font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
}
}
2.什么是浮动?有哪些清除浮动的方法?
浮动会脱离文本流,一个空的div,clear:both可以清除浮动
3.rgba和opacity的透明效果有什么不同?display和visiblity有什么区别?
opacity 是整体透明,rgba才可以满足本次task7里的设计要求(只有背景变色)
4.描述下z-index和叠加上下文是如何形成的?
数字越大越靠前,只有在绝对定位时可以使用
5.如果是在手机上查看投票页,没有hover效果时应该怎么办?
经过百度,发现有touchstart等方法,具体需要js实现。
评论