经过响应式web设计，使本站支持手机浏览

 

2014-01-28 14:49:14

如今愈来愈多的人经过手机来上网，手机因为屏幕尺寸的缘由，当浏览为PC端浏览器设计的网页的时候，每每会出现各类各样的问题。 糊涂僧的这个小博客也同样，为了让本站在手机端也表现的较好，因此今天用上了响应式web设计的思路，对本站进行了改造，如今在手机上浏览本站可以获得较好的体验。

1、问题

如今愈来愈多的人经过手机来上网，手机因为屏幕尺寸的缘由，当浏览为PC端浏览器设计的网页的时候，每每会出现各类各样的问题。
糊涂僧的这个小博客也同样，为了让本站在手机端也表现的较好，因此今天用上了响应式web设计的思路，对本站进行了改造，如今在手机上浏览本站可以获得较好的体验。

咱们先来看一下效果，看看应用响应式设计先后，在手机上浏览本站的样子：

以前的样子，是把网站按比例缩小了，基本上看不清文字，只能经过放大了看



应用响应式设计以后的样子，内容跟PC端同样，只是布局不同了，也没有缩放，看起来更适合在手机端阅读。



2、响应式设计的简单原理

下面咱们先看一下到底什么是响应式WEB设计，是怎么来实现的。
响应式WEB设计听起来挺高端大气上档次的，它的英文叫“Responsive Web Design”，在我们国内也叫流式设计、自适应布局等等，都是一个意思。
它解决的问题是，让网页在各类不一样分辨率的屏幕上表现的尽量好。

说到布局，咱们知道在网页制做当中， 负责样式布局的就是CSS了，一个页面的文字大小啊，元素的宽高啊，都由CSS来负责， 因此响应式WEB设计的核心就是让不一样的分辨率使用不一样的CSS。好比在PC端，应用的是一套CSS，在手机端用的是另一套CSS。

下面就介绍两个响应式设计的核心HTML CSS元素， ViewPort 和 MediaQuery

一、什么是ViewPort？
ViewPort直接翻译过来就是“视口”，我看国内有些人也是这么叫的，详细的介绍你们能够去看苹果官方的一个介绍，仍是很不错的，说的很详细，Safari Web Content Guide: Configuring the Viewport

简单来讲，就是可视区域，好比咱们手机浏览器。 由于Viewport是个区域，因此它有这几个属性，宽、高、是否缩放、缩放比例等。

上面的图片，在未应用响应式web设计以前，手机浏览器是把页面缩放了，实际上也就是ViewPort的缩放属性起了做用。那么，咱们如今第一步要作的就是，让页面别缩放，该是多大就显示多大。

那么，咱们就要经过ViewPort属性来作，告诉浏览器不要缩放，
具体的代码就是在HTML头部，加上一个meta标记，name就叫viewport，后面能够跟上viewport的那些属性。

width=device-width 就是告诉浏览器，viewport的宽度就是当前设备的宽度，好比iphone是320px
initial-scale =1 就是告诉浏览器，初始的缩放比例是1，也就是1:1显示，不缩放。

二、MediaQuery属性
MediaQuery翻译过来是“媒体查询”，也就是浏览器可以知道当前设备的一些状况，好比设备的分辨率是多少，你是横屏仍是竖屏等。 经过MediaQuery，咱们就可以对不一样的分辨率应用不一样的 CSS样式。

MediaQuery是写在CSS中的，大致的写法以下：

body{color:red;}
@media only screen and (max-width : 480px) {body{color:blue;}}
@media only screen and (min-width:480px and max-width : 960px) {body{color:#000000;}}

意思是，默认状况，页面文字是红色的， 当屏幕宽度小于480px时，页面文字变成蓝色的， 当页面宽度大于480px小于960px时，页面文字变成黑色的。


3、本站是如何作的

经过上面的介绍， 你们应该有了大致的思路了， 代码也很简单，我就是在原有css的后面加上了下面的代码，当浏览器的宽度小于480px的时候，应用下面的CSS来从新对页面布局，好比把“糊涂僧”几 个字的大小调小点，把左侧的导航栏搬到上面等， 具体你们能够翻翻个人代码看看。
http://www.hutuseng.com/ui/css/layout.css

@media 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;} /*文章的简介放在图片下面显示了*/

}