公司主页遇到一些问题

        我做的项目是公司的官网,因为是自己一个人做的,感慨颇多,对于项目中的很多知识点还需巩固,不过也学到了很多新的知识点。


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;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 5,824评论 2 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,802评论 1 45
  • 一、使用真实手机测试未发布网页的方法 方法① 在虚拟机中搭建xampp,将文件通过FTP传到虚拟机,在一个局域网中...
    fastwe阅读 743评论 0 0
  • 假如风来过阅读 221评论 0 1