手机自适应网页代码需要注意的几个问题

Visual design

多年专业品牌网络营销

专注战略性品牌推广，有效提升品牌竞争力

手机自适应网页代码需要注意的几个问题

来源: | 作者:szhuhang | 发布时间: 2145天前 | 3155 次浏览 | 分享到:

现在手机网站基本上成为了企业的标配，随着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;};
不外，有条件的话，最好还是遵照不合巨细的屏幕，加载不合分辨率的图片。有很多体式格局可以或许做到这一条，服务器端和用户端都可以实现。
第四，不要设置绝对宽度，由于网页会遵照屏幕宽度调整结构，所以不能操纵绝对宽度的结构，也不能操纵具有绝对宽度的元素。这一条非常重要。

上一篇： ui设计跟web设计的界限与区别

下一篇：布局跟色彩在网站设计中的重要性分析