伦敦 伦敦00:00:00 纽约 纽约00:00:00 东京 东京00:00:00 北京 北京00:00:00

400-668-6666

html5开发培训

当前位置:主页 > html5开发培训 >
html5开发培训

用html5开发的应用屏幕适配的问题如何解决?

  viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

  所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。

  由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

  然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

  流动布局的含义是,各个区块的位置都是浮动的,不是固定不变的。

  float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

  另外,绝对定位(position: absolute)的使用,也要非常小心。

  同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

  除了布局和文本,自适应网页设计还必须实现图片的自动缩放。

  此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:

  不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。

  千锋教育一直秉承“用良心做教育”的理念,是中国移动互联网研发人才一体化服务的领导品牌,全力打造移动互联网高端研发人才服务平台。公司总部位于北京,目前已在深圳、上海、郑州、广州、大连、武汉、成都成立了分公司。拥有全国最多、最权威的移动互联网教学就业保障团队,做到了毕业学员业内最高薪水,成为学员最信赖的IT培训机构。千锋教育是中关村移动互联网产业联盟副理事长单位,中国软件协会教育培训委员会认证首家一级培训机构,中关村国际孵化软件协会唯一授权中关村移动互联网学院,拥有全国300多所合作高校,2000多家移动互联网方向合作企业,50多个APP上线项目,每年有数十万名学员受益于千锋教育组织的技术研讨会、技术培训课、网络公开课及免费教学视频。

  目前大部分网站已经逐渐尝试使用HTML5进行重构,但基本大多停留使用新的HTML5语义化标签上。对于低版本IE浏览器,兼容新的HTML5标签很容易。而HTML5的新属性用到的不多,通常都是新属性+js兼容法。对于特殊的功能性新标签,国内几乎没有大型网站使用,如video、audio、canvas等。在国内,要是等现代浏览器普及了再开始用HTML5那至少要5年以上,IE6应该还有1年左右就差不多灭绝了,IE8短时间内不会灭绝。建议可以考虑HTML5+兼容性辅助,让现代浏览器显示炫酷效果,老浏览器保证业务正常即可,不一定和HTML5版本样式完全一样,只要最基本功能有就行了。移动端大多是webkit内核,可放心使用HTML5。


点击次数:  更新时间:2019-10-03 10:22   【打印此页】  【关闭
http://arentin.com/html5kaifapeixun/253/