客服
自适应网页设计的方法
昨天中午Google进行了一次在线讲座，讲述自适应网页设计的概念和方法，维护同一个网页代码，即可使网站在多种浏览设备（从桌面电脑显示器到智能手机或其他移动产品设备）上具有更好的阅读体验，这里我将该讲座内容简要的整理一下。
1、在HTML头部增加viewport标签。
在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：
<meta name="viewport" content="width=device-width, initial-scale=1" />
这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。绵阳网站建设推荐阅读>>> 代码适配自适应对百度友好——移动化培训长沙视频7，
2、在CSS文件尾部增加针对不同屏幕分辨率的规则。
例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。
@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显示有问题，换行后被下面的文章盖住了，不知道怎样能更好地解决这个问题。绵阳网站建设推荐阅读>>> 网站建设自适应网页的布局特点，
总之，根据上面四步进行修改的话，可以很简单地将一个网站修改为适合多种设备浏览的页面，这对于通过手机访问网站的用户来说，的确是一件好事。
相关文章：
-
绵阳网站建设_绵阳做网站_绵阳网站制作——绵阳网络公司...
-
从企业建站角度讲，最便捷、最适合企业的建站系统莫过于自助建站系统，市场上可供选择的自助建站平台也是一搜一大把。这些自助建站平台采用傻瓜式建站风格，容易上手，操作简单方便...
-
现在想做一个网站成本很低了，买个域名，买个几十块空间，弄个网站建设程序就可以开始你的玩耍了，如果你还想找成本更低的，可以看下面的分享。 如何创建网站一直都是很多朋友想要知...
-
商城网站建设如何将吸引力提升 在信息如此丰富多样的今天，商城网站建设如何才能够在众多的同类当中脱颖而出，获得大众的吸引和青睐呢？这其实是相关网站建设人员一直在思考的一个问...
-
现在越来越多的企业重视网站的运营推广，那怎样推广效果更好呢？绵阳蟠龙网络小编认为没用永恒不变得，而且要根据企业的具体情况选择合适的推广方式才是最好的，如果你又运营推广的...
-
随着互联网的发展，人们每时每刻已经离不开网络，而网站是网络的基本组成部分，可以这么说，网络是由各种各样的网站组成的，当下，网站是每个企业的标配，很多个人都有自己的网站，...
-
网站现在是一个企业的标配，很多没有网站的企业不清楚网站对企业有什么作用，那么今天绵阳蟠龙小编总结一下网站对企业都有哪些好处，希望看完之后您对网站有更深一层的认识。 一、低...
-
现在网站对一个企业越来越重要了，网站不仅是一个公司必备的名片，而且有利于提升企业的品牌形象，低成本扩大公司销售的一个重要渠道，可以将公司的业务和产品推向全国，那么公司想...
-
在互联网发展至今天，网站对于一个企业越来越重要，网站不仅能有效的提升企业品牌知名度，企业形象，也是一个企业的有力的销售渠道，网络营销推广做好了可以做全国的业务，那一个企...
-
随着互联网发展的迅猛，网站建设市场竞争越来越大，鱼龙混杂，出现智能建站、模板建站、定制建站等服务，很多朋友搞不清楚他们的区别，以及定制型网站有什么优势，今天绵阳蟠龙小编...
- 上一篇：DNS劫持漏洞呈上升趋势，请站长关注
- 下一篇：个人备案规范与备案流程