html响应式布局实例

所属分类：Html

2020-09-15 10:02 1156 0 0 1

响应式布局

响应式布局是为了让设计的东西，兼容各种设备终端，是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>