做过wap站、做过siteApp、做过第三方，也做过独立APP，现在又做了个自适应的模板。所谓“响应式网页设计(Responsive Web Design)”也就是自适应，就是可以自动识别屏幕宽度、并做出相应调整的网页设计。就是输入本站域名，手机、平板、PC端显示的效果不同的，但是URL确是相同的。
响应式网站，利于SEO(统一了URL)，利于用户体验，也利于用户分享，如下图所示：
(图为iphone显示效果)
(图为ipad显示效果，注意导航的变化)
(图为安卓手机微信上显示效果)
(PC版的直接就是现在这个界面了)
这是怎么做的呢" alt="响应式网页设计的快速教程（适合个人站点）" />
<div id="nav">
<#CACHE_INCLUDE_NAVBAR#>
</div>
移动端导航：
<nav id="navs-wrap">
<div id="logos"><h1><a href="<#ZC_BLOG_HOST#>" title="<#ZC_BLOG_TITLE#>"><#ZC_BLOG_TITLE#></a></h1></div>
<ul id="navs" class="menu"><#CACHE_INCLUDE_FUNCTION28#></ul>
</nav>
请注意HTML源文件里的一个判断语句：
<
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
在head里加入这条元标签，那移动浏览器中页面将以原始大小显示，并不能缩放。不让浏览器缩放目的是保证网页能自适应屏幕的完整性，避免网页混乱。
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
le - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
那么问题来了，如何让浏览器判断设备尺寸呢" alt="响应式网页设计的快速教程（适合个人站点）" />设计师必读的15个优秀响应式网页设计教程
查看更多关于【css教程】的文章
