手机自适应网页代码需要注意的几个问题
来源: | 作者:szhuhang | 发布时间: 1209天前 | 2138 次浏览 | 分享到:
    现在手机网站基本上成为了企业的标配,随着4G的到来,手机流量的费用越来月底,很多企业都转为了手机上来办公,所以一个手机站点成为了很多企业必须要解决的事情,互航科技这几天就专门采用了H5的元素来编写代码,可以是应用各大尺寸屏幕,今天就给大家讲讲自适应网站需要注意的几个问题,
第一,宽度上的自动调节起首,网页代码的头部,加入一行viewport元标签。viewport网页默许的宽度和高度,上面这行代码的意义是网页宽度默认等于屏幕宽度(width=device-width原始缩放比例(initial-scale=1为1.0即网页初始大小占屏幕面积的100%,关于viewport属性,真正在构兵挪动web开辟是才遇到一把的pc布局都是流动的960px1000px这类。如下图就是采用自适应宽度的编写方式,

第二,字体的设置方面字体也不能操纵绝对巨细(px而只能操纵相对巨细(embodi{
font:normal100%Helvetica,下面的代码指定,字体巨细是页面默认巨细的100%即16像素。h1{font-size:1.5em; }而后,h1巨细是默认巨细的1.5倍,即24像素(24/16=1.5small{font-size:0.875em;}small元素的巨细是默认巨细的0.875倍。
第三,图片代码的编写除了布局和文本,"自适应网页设想"还必须实现图片的自动缩放。
这只要一行CSS代码:img{max-width:100%;}这行代码对于大多数嵌入网页的视频也有效,所以可以或许写成:img,object{max-width:100%;}
老版本的IE不支持max-width所以只好写成:img{width:100%;}别的,window平台缩放图片时,可以或许出现图像失真景象。这时候,可以或许尝试利用IE专有饬令:img{-ms-interpolation-mode:bicubic;}或,EthanMarcottimgSizer.jaddLoadEvfunction{varimg=document.getElementByIdx_x"content".getElementsByTagName_r"img";imgSizer.colimg;};
不外,有条件的话,最好还是遵照不合巨细的屏幕,加载不合分辨率的图片。有很多体式格局可以或许做到这一条,服务器端和用户端都可以实现。
第四,不要设置绝对宽度由于网页会遵照屏幕宽度调整结构,所以不能操纵绝对宽度的结构,也不能操纵具有绝对宽度的元素。这一条非常重要。