关于响应式布局

  • 编辑时间: 2014-07-15
  • 浏览量: loading
  • 作者: 段亮

随着互联网的快速发展,以及html5+css3的迅速崛起。渐渐的响应式布局,也会慢慢的出现在我们的视野里,身为专业的web前端人员,还不学习新技术你就out啦!为什么这样说呢?因为响应式布局能同时兼容多个终端,比如(手机、平板、PC)做一个网站转眼间就可以变成3个网站,和现在相比是不是更加具有优势呢!

可能有些人对“什么是响应式布局”还不是很了解,下面就跟大家简单说下什么是响应式布局:

响应式布局:简单点说,就是做一个网站同时能兼容多个终端,由一个网站转变成多个网站,为我们大大节省了资源。

那么响应式布局的优点和缺点又有哪些呢?

优点:1.面对不同分辨率设备灵活性强

         2.能够快捷解决多设备显示适应问题

缺点:不能完全兼容所有浏览器,代码累赘,加载时间加长。

说了这么多,可能还有很多人,不明白响应式布局该怎么去做,以及它的开发原理是什么?

原理:简单点说响应式布局它是通过CSS中Media Query(媒介查询)@media功能,来判断我们的终端设备宽度在多少像素内,然后就执行与之对应的CSS样式。

下面我就以我最近做的一个简单的响应式布局框架为案列给大家讲讲:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>响应式布局</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin:0;padding:0;text-decoration:none;list-style:none;
 font-size:14px;font-family:"微软雅黑";text-align:center;
 color:#fff;}
 .clear{clear:both;}
          #header,#content,#footer{margin:0 auto;margin-top:10px;}  
          #header,#footer{margin-top:10px;height:100px;}
 #header,#footer,.left,.right,.center{background:#333;}
/*通用样式*/
 /*手机*/
@media screen and (max-width:600px){
   #header,#content,#footer{width:400px;}
   .right,.center{margin-top:10px;}
   .left,.right{height:100px;}
   .center{height:200px;}
}
/*平板*/
@media screen and (min-width:600px) and (max-width:960px){
    #header,#content,#footer{width:600px;}
.right{display:none;}
.left,.center{height:400px;float:left;}
.left{width:160px;margin-right:10px;}
.center{width:430px;}
}
/*PC*/
@media screen and (min-width:960px){
    #header,#content,#footer{width:960px;}
.left,.center,.right{height:400px;float:left;}
.left{width:200px;margin-right:10px;}
.center{width:540px;margin-right:10px;}
.right{width:200px;} 
}
</style>
</head>
<body>
<!--header start-->
<div id="header">header</div>
<!--end header-->
<!--content start-->
<div id="content">
<div>left</div>
<div>center</div>
<div>right</div>
<div></div>
</div>
<!--end content-->
<!--footer-->
<div id="footer">footer</div>
<!--end footer-->
</body>
</html>

通过上面代码可知:它是通过@media媒介查询判断来执行的CSS样式,也就是说:如果我要做一个响应式布局网站,同时兼容手机、平板、PC的话就得写三个与之对应的CSS样式,通过@media媒介查询来完成响应式布局。

值得注意的是:在手机设备上,我们要禁止用户来缩放屏幕。不禁止的话,可能在显示上会造成错位,以及显示的不是手机网站的样式。所以,我们要通过代码来禁止用户在手机端上缩放屏幕,已达到正常的手机网站效果。

禁止代码如下:

<metaname=“viewport” content=“width=device-width; initial-scale=1.0”>

加在头部标签里

写在最后:以上纯属个人对响应式布局的理解,随着技术的更新,我们还不学习一些新技术,那么等待我们的就是淘汰。

本文由段亮博客原创出品,如需转载请注明出处

本文出处:http://www.duanliang920.com/learn/web/html5/252.html

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对段亮这小子的支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • 仙人掌没有刺xx
    2016-11-29 15:14:37发表

    对于一个刚入门的人来说真是帮了大忙

  • ~小呆萌
    2016-08-17 11:25:27发表

    好棒

  • 王文鹏
    2016-08-13 15:29:16发表

    十分感谢博主,博主棒棒哒!

  • 天使爱美丽
    2016-04-13 15:26:27发表

    支持楼主,棒棒哒![赞]

  • 苏亚军
    2016-03-14 00:20:19发表

    不错,对于刚学习的人来说讲的很好。

  • 子涵
    2015-11-21 08:54:29发表

    前端的门槛是很低的,如果你只是做一些静态页面的话,那真的是很简单!可要成为一门专业的前端开发人员那门槛就高了,DIV+CSS HTML5+CSS3,JAVASCRIT+JQUERY以及各个浏览器的兼容性,这些必须是要会的吧! 其实,用心

  • 兹崇良
    2015-10-27 09:19:11发表

    是啊

  • 嫩模李凯馨
    2015-10-26 19:06:15发表

    [转发]

  • 西班牙超模
    2015-10-20 18:10:29发表

    不错。值得学习啊,顶一个

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客