首页 > 代码库 > html5 响应式布局

html5 响应式布局

响应式布局

第一:正确理解响应式布局

 

响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里。在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够兼容多个终端。

第二:响应式设计的步骤

 

响应式设计的步骤就是1.编写非响应式代码、2.加工成响应式代码、3.响应式细节处理、4.完成响应式开发吗?”

 

1.布局及设置meta标签

当创建一个响应式网站,或者非响应式网站变成响应式的时候,首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局,页面固定宽度大小,如果完成了非响应式那么我在去添加媒体查询(Media Query)和响应式代码。这种操作更容易实现响应式特性。

当你完成当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到和标签之间。这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智能手机的浏览器提供网站全视图浏览,并禁止用户缩放页面。

  1. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">  
  2. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  3. <meta name="HandheldFriendly" content="true">  
  4. user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。  

 

 

2.通过媒体查询来设置样式media query

media query 是响应式设计的核心,它能够和浏览器进行沟通,告诉浏览器页面如何呈现,假如一个终端的分辨率小于980px,那么可以这样写

  1. @media screen and (max-width:980px){   
  2.      #head { … }   
  3.      #content { … }   
  4.      #footer { … }   
  5. }

这里面的样式会覆盖掉之前所定义的样式。

 

3.设置多种视图宽度

假如我们要兼容ipad和iphone视图,我们可以这样设置:

  1. /**ipad**/   
  2. @media only screen and (min-width:768px)and(max-width:1024px){}   
  3. /**iphone**/   
  4.  @media only screen and (width:320px)and (width:768px){}  

 

3.字体设置

到目前为止,开发人员用到的字体单位大部分都是像素,虽然像素在普通网站上是Ok的,但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度,这样才能适应客户端屏幕。

css3引入了新的单位叫做rem,和em类似但对于Html元素,rem更方便使用。

rem是相对于根元素的,不要忘记重置根元素字体大小:

 

  1. html{font-size:100%;}   
  2. 完成后,你可以定义响应式字体:   
  3. @media (min-width:640px){body{font-size:1rem;}}   
  4. @media (min-width:960px){body{font-size:1.2rem;}}   
  5. @media (min-width:1200px){body{font-size:1.5rem;}}   
  6. 不理解rem的童鞋,在这里给大家推荐一篇写的不错的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)  

 

4.响应式设计需要注意的问题

1.宽度不固定,可以使用百分比

  1. #head{width:100%;}   
  2. #content{width:50%;}  

 

2.图片处理 图片液态化

  1. #wrap img{   
  2.         max-width:100%;   
  3.         height:auto;   
  4.     } 

 如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充,height为auto的设置是为了保证图片原始的高宽比例,以至于图片不会失真。

 

过程总结

 

  1. 1.响应式布局   
  2.     1.Meta标签定义   
  3.     2.使用Media Queries适配对应样式   
  4. 2.响应式内容   
  5.     1.响应式图片  

 

(1)根据@media 的屏幕宽度(max-width)来查看

 

<!-- The 1140px Grid -->

<link rel="stylesheet" href="http://www.mamicode.com/css/1140.css" type="text/css" media="screen" />

 

<!--[if lte IE 9]>

    <link rel="stylesheet" href="http://www.mamicode.com/css/ie.css" type="text/css" media="screen" />

<![endif]-->

 

<!-- Make minor type adjustments for 1024 monitors -->

<link rel="stylesheet" href="http://www.mamicode.com/css/smallerscreen.css" media="only screen and (max-width: 1023px)" />

 

<!-- Resets grid for mobile -->

<link rel="stylesheet" href="http://www.mamicode.com/css/mobile.css" media="handheld, only screen and (max-width: 767px)" />

或者:

 

@media 1240MinMedia, only screen and (min-width: 1241px) {

  .bgcolor{

    background:gray;

  }

}

 

@media 1240Media, only screen and (max-width: 1240px) {

  .bgcolor{

    background:red;

  }

}

@media 767Media, only screen and (max-width: 767px) {

  .bgcolor{

    background:blue;

  }

}

@media 480Media, only screen and (max-width: 480px) {

  .bgcolor{

      background:#ccc;

  }

}

 

市场屏幕宽度分布

技术分享

 本着关说不练假把式的原则,我做了一个简单的首页面,内容没咋填,主要是介绍思想,希望大家多多指正

github:https://github.com/xiaofang142/html5andresponse/

html5 响应式布局