响应式布局实例

最新推荐文章于 2023-06-29 15:32:53 发布

xcLeigh

最新推荐文章于 2023-06-29 15:32:53 发布

阅读量1.6k

点赞数 2

分类专栏： HTML5实战案例文章标签： html css

BY xcSharp@126.com

本文链接：https://blog.csdn.net/weixin_43151418/article/details/101516680

版权

HTML5实战案例专栏收录该内容

122 篇文章 106 订阅

订阅专栏

响应式布局

响应式布局是为了让设计的东西，兼容各种设备终端，是Ethan Marcotte在2010年5月提出的一个概念。传统的设计思路时，手机端一套，pc端一套，还有根据pc端屏幕大小而分出好几套。

1.媒体布局

Meta标签定义

使用 viewport meta 标签在手机浏览器上控制布局

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

通过快捷方式打开时全屏显示

<meta name="apple-mobile-web-app-capable" content="yes" />

隐藏状态栏

<meta name="apple-mobile-web-app-status-bar-style" content="blank" />

iPhone会将看起来像电话号码的数字添加电话连接，应当关闭

<meta name="format-detection" content="telephone=no" />

使用Media Queries适配对应样式

常用于布局的CSS Media Queries有以下几种：
设备类型(media type):
all所有设备；
　　screen 电脑显示器；
　　print打印用纸或打印预览视图；
　　handheld便携设备；
　　tv电视机类型的设备；
　　speech语意和音频盒成器；
　　braille盲人用点字法触觉回馈设备；
　　embossed盲文打印机；
　　projection各种投影设备；
　　tty使用固定密度字母栅格的媒介，比如电传打字机和终端。

设备特性(media feature):
width浏览器宽度；
　　height浏览器高度；
　　device-width设备屏幕分辨率的宽度值；
　　device-height设备屏幕分辨率的高度值；
　　orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape；
　　aspect-ratio比例值，浏览器的纵横比；
　　device-aspect-ratio比例值，屏幕的纵横比。

案例:随着屏幕大小，分别显示一列，两列，三列

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title></title>
   <style type="text/css">
       /* 小屏幕（平板，大于等于 768px）
       @media (min-width: 768px){  */
       @media (min-width: 200px){
           .divleft {
               margin-top:10px;
           }
           .divleft1 {
               margin-top:10px;
           }
           .divleft2 {border:2px solid #EBEBEB; border-radius:5px;
               background-color:white;
               min-height:200px;
           }
           .divleft2_1 {border:2px solid #EBEBEB; border-radius:5px;border-bottom:0px;
               background-color:white;
               min-height:200px;
           }
           .divcenter {
               margin-top:10px;
           }
           .divcenter1 {
           }
           .divcenter2{border:2px solid #EBEBEB; border-radius:5px;
               background-color:white;
               min-height:200px;
           }
           .divcenter2_1{border:2px solid #EBEBEB; border-radius:5px;border-top:0px;
               background-color:white;
               min-height:200px;
           }
           .divright {
               margin-top:10px;
               clear:both;
           }
           .divright2 {border:2px solid #EBEBEB; border-radius:5px; 
               background-color:white;
               min-height:200px;
           }
       }
       /* 中等屏幕（桌面显示器，大于等于 992px） */
       @media (min-width: 992px){
           .divleft {
               position:absolute;
               color:green;
               width:50%;
               margin-top:10px;
               margin-bottom:10px;
           }
           .divleft1 {
               position:absolute;
               color:green;
               width:50%;
               margin-top:10px;
               margin-bottom:10px;
           }
           .divleft2 {border:2px solid #EBEBEB; border-radius:5px; margin-right:10px;
               background-color:white;
               min-height:200px;
           }
           .divleft2_1 {border:2px solid #EBEBEB; border-radius:5px;border-right:0px;
               background-color:white;
               min-height:200px;
           }
           .divcenter {
               float:right;
               width:50%;
               margin-top:10px;
               margin-bottom:10px;
           }
           .divcenter1 {
               float:right;
               width:50%;
               margin-top:10px;
               margin-bottom:10px;
           }
           .divcenter2{border:2px solid #EBEBEB; border-radius:5px; margin-left:10px; 
               background-color:white;
               min-height:200px;
           }
           .divcenter2_1{border:2px solid #EBEBEB; border-radius:5px;border-left:0px;
               background-color:white;
               min-height:200px;
           }
           .divright {
               clear:both;
               width:50%;
           }
           .divright2 {border:2px solid #EBEBEB; border-radius:5px; 
               background-color:white;
               min-height:200px;
           }
       }
       /* 大屏幕（大桌面显示器，大于等于 1200px） */
       @media (min-width: 1200){
           .divleft {
               position:absolute;
               color:green;
               width:33%;
               margin-top:10px;
           }.divleft1 {
               position:absolute;
               color:green;
               width:33%;
               margin-top:10px;
           }
           .divleft2 {border:2px solid #EBEBEB; border-radius:5px; margin-right:10px;
               background-color:white;
               min-height:200px;
           }
           .divleft2_1 {border:2px solid #EBEBEB; border-radius:5px; margin-right:10px;
               background-color:white;
               min-height:200px;
           }
           .divcenter {
               float:left;
               width:34%;
               margin-top:10px;
           }
           .divcenter1 {
               float:left;
               width:34%;
               margin-top:10px;
           }
           .divcenter2{border:2px solid #EBEBEB; border-radius:5px; margin-left:10px;
               background-color:white;
               min-height:200px;
           }
           .divcenter2_1{border:2px solid #EBEBEB; border-radius:5px; margin-left:10px;
               background-color:white;
               min-height:200px;
           }
           .divright {
               float:right;
               width:33%;
               margin-top:10px;
           }
           .divright2 {border:2px solid #EBEBEB; border-radius:5px; 
               background-color:white;
               min-height:200px;
           }
       }
   </style>
</head>
<body style="background-color:#F3F3F3;">
   <form id="form1" runat="server">
   <div style="min-width:210px;">
       <div class="box">    
   	    <div class="divleft">
               <div class="divleft2">
                   c1
               </div>
   	    </div>    
   	    <div class="divcenter">
               <div class="divcenter2">
                   c2
               </div>
   	    </div>
   	    <div class="divright">
               <div class="divright2">
                   c3
               </div>
   	    </div>
   	</div>
       <div class="box" style="clear:both;">    
   	    <div class="divleft1">
               <div class="divleft2_1">
                   c1
               </div>
   	    </div>    
   	    <div class="divcenter1">
               <div class="divcenter2_1">
                   c2
               </div>
   	    </div>
   	</div>
       <div class="box" style="clear:both;">    
   	    <div class="divleft">
               <div class="divleft2">
                   c1
               </div>
   	    </div>    
   	    <div class="divcenter">
               <div class="divcenter2">
                   c2
               </div>
   	    </div>
   	    <div class="divright">
               <div class="divright2">
                   c3
               </div>
   	    </div>
   	</div>
   </div>
   </form>
</body>
</html>

2.百分百设计

设计宽高的百分比，可以让标签随屏幕大小，而自动适应。

实例：

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style>
     body{margin:0;padding:0;}
     #left{width: 150px;height: 100px;background-color: red;float: left}
     #right{width: 150px;height: 100px;background-color: green;float: right}
     #center{height: 100px;background-color: blue;}
 </style>
</head>
<body>
<div id="left">left</div>
<div id="right">right</div>
<div id="center">center</div>
</body>
</html>