我们专注的领域 沈阳网站制作 业务咨询热线:13654184893

新闻动态

网站同享页面自适应的办法

前天正午Google进行了一次在线讲座,沈阳网站制作叙说自适应页面计划的概念和办法,保护同一个页面代码,即可使网站在多种阅读设备(从桌面电脑闪现器到智能手机或其他移动商品设备)上具有非常好的阅读体会,这儿我将该讲座内容简明的收拾一下。

1、在HTML头部添加viewport标签

在网站HTML文件的初步,添加viewport meta标签通知阅读器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:

meta name="viewport" content="width=device-width, initial-scale=1"

这段代码支持Chrome、Firefox、IE9以上的阅读器,但不支持IE8以及低于IE8的阅读器。

2、在CSS文件尾部添加关于不一样屏幕分辨率的规则

例如运用如下的代码,能够让屏幕宽度低于480像素的设备(如iPhone等),页面侧栏躲藏中部内容栏宽度自动调度。以下代码关于Z-Blog,WordPress有关css样式的id标签称谓只需修正一下即可。

@media screen and (max-device-width: 480px) { #divMain{ float: none; width:auto; } #divSidebar { display:none; } }

3、计划宽度运用相对宽度

页面整体构造能够运用必定宽度,但往下的内容构造、侧栏等最佳运用相对宽度,这样关于不一样分辨率进行修正就便利。当然也能够不必相对宽度,那就需求在 @media screen and (max-device-width: 480px) 里面添加各个div的关于小屏幕的宽度,实习上更费事。

4、页面运用相对字体

在HTML页面上不要运用必定字体(px),而要运用相对字体(em),两者换算联络是:em = px*16 ,例如16px就等于1em。

根据上面叙说的几点内容,我关于我博客的CSS进行了一些修正,发现能够从iPhone手机阅读到体会愈加的页面,但有一个疑问没有处置,即是顶部导航栏navbar闪现有疑问,换行后被下面的文章盖住了,不晓得如何能非常好地处置这个疑问。

总归,根据上面四步进行修正的话,能够很简略地将一个网站修正为适合多种设备阅读的页面,沈阳网站制作这关于通过手机访问网站的用户来说,的确是一件积德行善。
 

 

了解更多  手机网站跟PC机网站有什么区别

[来源:原创] [作者:52chengyi.cn] [日期:14-09-25] [标签:网站制作,网站,沈阳网站制作,阳网站制作]