您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 企业文化 > 网页自适应的实现方法
网页自适应的实现方法(网页分辨率不同以及手机和电脑网页的切换)在2014年,大部分人都要求网站能自适应各种设备,即维护同一个网页代码,即可使网站在多种浏览设备(从桌面电脑显示器到智能手机或其他移动产品设备)上具有更好的阅读体验,我们立达美德网络公司将方法简单地整理了一下。1、在HTML头部增加viewport标签在网站HTML文件的开头,增加viewportmeta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:spanstyle=margin:0px;padding:0px;font-family:Geneva,Arial,Helvetica,sans-serif;background-color:rgb(246,244,233);metaname=viewportcontent=width=device-width,initial-scale=1这段代码支持Chrome、Firefox、IE9以上的浏览器,但不支持IE8以及低于IE8的浏览器。2、在CSS文件尾部增加针对不同屏幕分辨率的规则例如使用如下的代码,可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog,WordPress相关css样式的id标签名称只需修改一下即可。@mediascreenand(max-device-width:480px){#divMain{float:none;width:auto;}#divSidebar{display:none;}}3、布局宽度使用相对宽度网页总体框架可以使用绝对宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度,那就需要在@mediascreenand(max-device-width:480px)里面增加各个div的针对小屏幕的宽度,实际上更麻烦。4、页面使用相对字体在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),两者换算关系是:em=px*16,例如16px就等于1em。总之,根据上面四步进行修改的话,可以很简单地将一个网站修改为适合多种设备浏览的页面,这对于通过手机访问网站的用户来说,的确是一件好事。
本文标题:网页自适应的实现方法
链接地址:https://www.777doc.com/doc-2073095 .html