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

前天正午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机网站有什么区别