我做的项目是公司的官网,因为是自己一个人做的,感慨颇多,对于项目中的很多知识点还需巩固,不过也学到了很多新的知识点。
1.失效的 position:fixed;
nav导航栏要固定,可是我设置的position:fixed,却不起作用,我当时也没有仔细考虑是什么原因导致,只是把所有的包含的div删除了,只让一个nav存在,最后功能实现了,今天再看这个项目,感觉应该把他弄懂。
原因是父级元素设置了 css3的属性transform,使得失去了标准流,所以在于transform上;
2.响应式布局,关于媒体查询,关于rem的计算
用响应式设计,首先一定要引视口文件<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
rem是一种相对长度单位,参考的基准是标签定义的font-size。(而且面试也经常不会问到,关于rem的计算,你是怎么计算的),我们设置浏览器的默认html的font-size,这几样我们就不用计算了(这是自己总结的常用的一些字体尺寸)
html{font-size:12px;}
@media(min-width:320px){html{font-size:14.2222px;}}
@media(min-width:360px){html{font-size:16px;}}
@media(min-width:375px){html{font-size:16.6667px;}}
@media(min-width:412px){html{font-size:18.2857px;}}
@media(min-width:480px){html{font-size:21.3333px;}}
@media(min-width:640px){html{font-size:28.4444px;}}
@media(min-width:720px){html{font-size:32px;}}
@media(min-width:768px){html{font-size:34.1333px;}}
@media(min-width:1440px){html{font-size:64px;}}
3.表单的设计
关于表单的设计,以前没怎么设计过,项目中用,突然遇到好多问题:
textare的不让用户拉伸, resize:none;
texxxtarea兼容问题:div嵌套的textarea,可以给div设置这四个属性:
1,font-size:0px;
2,line-height:0px;
3,display:block;
4,在textarea中设置vertical-align:top;