响应式和自适应的区别
Posted guozh
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式和自适应的区别相关的知识,希望对你有一定的参考价值。
响应式网站:https://www.microsoft.com/zh-cn/ 页面缩放,框架变动
自适应网站:http://m.ctrip.com/html5/ 页面缩放,整体等比例缩放(框架不变)
响应式
一、响应式布局框架的优点、缺点、原理
优点: 1.面对不同分辨率设备灵活性强 2.能够快捷解决多设备显示适应问题
缺点: 不能完全兼容所有浏览器,代码累赘,加载时间加长。不明白响应式布局该怎么去做,以及它的开发原理是什么的看看下面的响应式布局的HTML代码?
原理: 简单点说响应式布局它是通过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 class="left">left</div> <div class="center">center</div> <div class="right">right</div> <div class="clear"></div> </div> <!--end content--> <!--footer--> <div id="footer">footer</div> <!--end footer--> </body> </html>
以上是关于响应式和自适应的区别的主要内容,如果未能解决你的问题,请参考以下文章