移动端自适应框架,响应式布局,如何实现移动端不同分辨率的手机?在本文能够详解,响应式布局是HTML5和css的结合是必然,但是很多朋友不知道怎么实现不同分辨率下的手机端,自适应框架在本站也有,但是具体如何实现不同分辨率呢,下面重庆荣帅SEO来说说怎么实现不同分辨率的响应式设计?
一、响应式布局框架的优点、缺点、原理
响应式布局的优点:
1.面对不同分辨率设备灵活性强
2.能够快捷解决多设备显示适应问题
响应式布局的缺点:
不能完全兼容所有浏览器,代码累赘,加载时间加长。不明白响应式布局该怎么去做,以及它的开发原理是什么的看看下面的响应式布局的HTML代码?
原理:简单点说响应式布局它是通过CSS中Media Query(媒介查询)@media功能,来判断我们的终端设备宽度在多少像素内,然后就执行与之对应的CSS样式。
二、响应式布局框架实现不同分辨率的HTML代码框架
<!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>
解释说明
它是通过@media媒介查询判断来执行的CSS样式,也就是说:如果我要做一个响应式布局网站,同时兼容手机、平板、PC的话就得写三个与之对应的CSS样式,通过@media媒介查询来完成响应式布局,手机设备上,我们要禁止用户来缩放屏幕。不禁止的话,可能在显示上会造成错位,以及显示的不是手机网站的样式。所以,我们要通过代码来禁止用户在手机端上缩放屏幕,已达到正常的手机网站效果。代码如下:
<metaname=“viewport” content=“width=device-width; initial-scale=1.0”>
发表评论 取消回复