一种自适应网页设计方法
1，向HTML头部添加视口标记。在HTML文件的开头，视口增加了meta标记，告诉浏览器视口宽度等于屏幕设备的宽度，而不需要初始缩放。代码如下：
复制代码代码如下所示
：
元名称=“视口”内容=“宽度=设备宽度，初始规模= 1”
此代码支持Chrome浏览器上，Firefox，和IE9，但不支持IE8和小于IE8浏览器。2。在CSS文件的结尾，添加了不同屏幕分辨率的规则。例如，使用以下代码，可以使屏幕宽度小于480个像素，例如iPhone等，并且隐藏Web侧栏，并自动调整中央内容栏的宽度。下面的代码是Z-BLOG，和WordPress相关标签名称只需要修改。
复制代码
代码如下：@媒体屏幕（最大设备的宽度：480px）{ # divmain {浮动：无；宽度：汽车；} # divsidebar {显示：无；} } 3；布局宽度使用相对宽度。
网页的整体框架可以使用绝对宽度，但较低的内容框架、侧栏等最好使用相对宽度。
修改不同分辨率的分辨率是很方便的。当然，你可以不使用相对宽度，所以你需要增加“媒体屏幕每个div的宽度（最大设备的宽度：480px）的小屏幕，这实际上是比较麻烦的。4。使用页的相对字体
在HTML页面，不要使用绝对字体（PX），但使用相对字体（EM），大多数的浏览器，通常使用EM = Px／16转换，例如，16px等同为1em。
根据一些内容上面，我向我的博客CSS做了一些修改，可以从iPhone手机浏览网页的体验更好，但有一个问题没有解决，顶部导航栏，导航栏的显示问题，下面的文章是结束了，不知道如何更好的解决这个问题（更新：在用户提示，导航栏divnavbar
在样式中，添加溢出：隐藏；一行可以解决这个问题。使用下面的数字
iPhone访问，修改CSS后
在自适应网页之后，月光博客的主页看起来比原来的分页页面要好得多。
简言之，根据上述四个步骤，它可以简单地将网站修改为适合浏览多个设备的页面。对于通过手机访问网站的用户来说，这的确是件好事。下面是更详细的补充信息：随着3G的普及，越来越多的人使用手机上网。
移动设备不仅仅是桌面设备，也是最常见的接入因特网的终端。因此，Web设计者必须面对一个问题：如何在不同大小的设备上显示相同的Web页面？
手机屏幕相对较小，其宽度一般小于600像素。PC的屏幕宽度通常在1000像素以上（当前主流宽度为1366×768），其中一些像素也达到2000像素。同样的内容，在屏幕大小不同的屏幕上显示出满意的效果并不是一件容易的事。许多网站的解决方案是为不同的设备提供不同的网页，比如提供移动版，或者iPhone / iPad版本。这样可以确保效果，但相当麻烦。同时，它需要维护几个版本。如果一个网站有多个门户条目，这将大大增加架构设计的复杂性。因此，它早就设想，可以一次设计和应用一个页面，以便同一页能够自动适应不同大小的屏幕，并根据屏幕的宽度自动调整布局（布局）。第一，自适应网页设计的概念。2010，Ethan Marcotte提出了“响应式网页设计”，指的是网页设计，可以自动识别屏幕宽度和做出相应的调整。他以福尔摩斯历险记中的六位英雄为例。如果屏幕的宽度大于1300像素，则6张图片排列成一行。
