北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京web前端培训 html的布局方法与兼容性的思考

时间: 来源:火星人

我们在进行网页布局的时候,有着多种布局方法,而我们要根据开发的兼容性要求和网页效果使用不同的布局。要在什么样的情况使用何种布局呢,今天就为大家介绍一下我的观点。


常用的布局大概分为以下几种:


固定尺寸布局(单位:px)
百分比布局(单位:%)
rem布局(单位:rem)
flexbox布局(自适应布局)
media响应式布局(复合单位,多为px+%)
栅格布局(类名控制布局,类似media+百分比布局)


而在我们的开发中对浏览器兼容的要求大概分为以下几种:


兼容低至ie6的所有浏览器包括移动端(简直斯巴达,现在几乎没有这种程度的)
兼容ie8与手机端(最常见,但据今年八月份的调查ie8的使用率仅为4。16%,淘汰已经是大势所趋)
兼容ie10/11与手机端(ie8之后的趋势)
不考虑ie,全力支持chrome/mozlla与手机端(常见于技术人员交流社区/博客,此类人员基本上不用ie)
仅支持手机端,用浏览器浏览会提示手机扫码浏览(一些面向客户全部为手机用户的企业)


现在让我们来看看各种布局方式与兼容模式的相性吧

首先请允许我放弃ie6的兼容,本人功力尚浅没法操控ie6这等神器(这种要求一般出现在国企之类的陈旧机构,遇上这等要求还是找机会跳槽吧,ie6在2001年八月份问世,距今已有进十五年高龄,我们应该把它放在回忆里……)

然后是兼容ie8与手机端,这种情况一般使用固定尺寸与百分比结合的mdeia响应式布局,要写的代码比较多,也有用栅格布局的,一般用bootstarp实现

兼容ie10与手机端就好一些了,在固定尺寸与百分比结合的mdeia响应式布局的基础上,还可以使用rem布局,rem布局是现在面向手机端最好的布局,比百分比更易用

不考虑ie的话跟兼容ie10区别不大,在浏览器端可以使用flex布局,google和mozlla对flex的支持还是很好的

flex布局现在的兼容性还不太好,但是等个平台的兼容性好起来的时候它不会输于rem布局。因为它除了对字体的支持没有rem优秀其他都胜于rem

如果只需要支持移动端端的话只是用rem布局就好了,rem是现在最优秀的移动端布局方式没有之一,但是ie8不支持rem属性这点有点遗憾

以上就是我对浏览器布局方面的思考,布局的方法除了我提到的这些还有一些基于javascrip的,但限于篇幅有限恕我无法再做介绍了

关键词:北京web前端培训,北京前端开发,web前端培训

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号