2014-01-28 14:49:14

现在越来越多的人通过手机来上网，手机由于屏幕尺寸的原因，当浏览为PC端浏览器设计的网页的时候，往往会出现各种各样的问题。 糊涂僧的这个小博客也一样，为了让本站在手机端也表现的较好，所以今天用上了响应式web设计的思路，对本站进行了改造，现在在手机上浏览本站能够得到较好的体验。

一、问题

现在越来越多的人通过手机来上网，手机由于屏幕尺寸的原因，当浏览为PC端浏览器设计的网页的时候，往往会出现各种各样的问题。 糊涂僧的这个小博客也一样，为了让本站在手机端也表现的较好，所以今天用上了响应式web设计的思路，对本站进行了改造，现在在手机上浏览本站能够得到较好的体验。 我们先来看一下效果，看看应用响应式设计前后，在手机上浏览本站的样子： 之前的样子，是把网站按比例缩小了，基本上看不清文字，只能通过放大了看 应用响应式设计之后的样子，内容跟PC端一样，只是布局不一样了，也没有缩放，看起来更适合在手机端阅读。二、响应式设计的简单原理 下面我们先看一下到底什么是响应式WEB设计，是怎么来实现的。 响应式WEB设计听起来挺高端大气上档次的，它的英文叫“Responsive Web Design”，在咱们国内也叫流式设计、自适应布局等等，都是一个意思。 它解决的问题是，让网页在各种不同分辨率的屏幕上表现的尽可能好。 说到布局，我们知道在网页制作当中， 负责样式布局的就是CSS了，一个页面的文字大小啊，元素的宽高啊，都由CSS来负责， 所以响应式WEB设计的核心就是让不同的分辨率使用不同的CSS。比如在PC端，应用的是一套CSS，在手机端用的是另外一套CSS。

下面就介绍两个响应式设计的核心HTML CSS元素， ViewPort 和 MediaQuery 1、什么是ViewPort？ ViewPort直接翻译过来就是“视口”，我看国内有些人也是这么叫的，详细的介绍大家可以去看苹果官方的一个介绍，还是很不错的，说的很详细，

简单来说，就是可视区域，比如我们手机浏览器。 因为Viewport是个区域，所以它有这几个属性，宽、高、是否缩放、缩放比例等。 上面的图片，在未应用响应式web设计之前，手机浏览器是把页面缩放了，实际上也就是ViewPort的缩放属性起了作用。那么，我们现在第一步要做的就是，让页面别缩放，该是多大就显示多大。 那么，我们就要通过ViewPort属性来做，告诉浏览器不要缩放， 具体的代码就是在HTML头部，加上一个meta标记，name就叫viewport，后面可以跟上viewport的那些属性。 width=device-width 就是告诉浏览器，viewport的宽度就是当前设备的宽度，比如iphone是320px initial-scale =1 就是告诉浏览器，初始的缩放比例是1，也就是1:1显示，不缩放。 2、MediaQuery属性 MediaQuery翻译过来是“媒体查询”，也就是浏览器能够知道当前设备的一些情况，比如设备的分辨率是多少，你是横屏还是竖屏等。 通过MediaQuery，我们就能够对不同的分辨率应用不同的 CSS样式。 MediaQuery是写在CSS中的，大体的写法如下： body{color:red;} only screen and (max-width : 480px) {body{color:blue;}} only screen and (min-width:480px and max-width : 960px) {body{color:#000000;}} 意思是，默认情况，页面文字是红色的， 当屏幕宽度小于480px时，页面文字变成蓝色的， 当页面宽度大于480px小于960px时，页面文字变成黑色的。三、本站是如何做的 通过上面的介绍， 大家应该有了大体的思路了， 代码也很简单，我就是在原有css的后面加上了下面的代码，当浏览器的宽度小于480px的时候，应用下面的CSS来重新对页面布局，比如把“糊涂僧”几 个字的大小调小点，把左侧的导航栏搬到上面等， 具体大家可以翻翻我的代码看看。 only screen and (max-width : 480px)  {     img{max-width:100%; height:auto;} /*让图片也能够自适应*/    #logo{height: 40px;font-size: 16px;padding: 5px 10px;} /*糊涂僧几个字变小点 ,间距调小点*/    .slidebar{padding: 0px;width: 100%;float: none;clear: both;overflow: hidden;} /*左侧导航栏不浮动了*/    .mainContent{margin-left: 0px;} /*右侧内容区没有左边距了*/    .article .article_image {float: none;width: 100%;} /*文章的图片不浮动了，单独一行*/    .article .article_summary{margin-left: 0px;} /*文章的简介放在图片下面显示了*/ }