响应式布局

backbone

 基于MVC的前端框架--还是要编写DOM


  React

 基于mvc的js的框架--还是要编写DOM

  （速度快、小巧）



  响应式布局
   
  同一个页面根据不同的屏幕和分辨率，自动调整页面大小，就叫相应式布局。

 DIV+CSS

 用最大的屏幕宽度和分辨率

>=992px   电脑

768px---992px   平板

<=768px  手机


ie浏览器在支持响应式布局时，需要使用外联的CSS


1、定义css的样式

     电脑屏幕
    @media screen and (min-width: 992px){
          #index{width: 992px;}

     }


     平板屏幕
    @media screen  and (min-width: 768px) and (max-width: 992px){
         #index{width: 768px;}

     }

      手机屏幕
    @media screen  and (max-width: 768px){
         #index{width: 100%;}

     }


2、添加JS文件

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


     <link rel="stylesheet" href="css/index.css"/>

兼容IE6、7、8
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->




    <script src="js/jquery-1.9.1.min.js"></script>

bootstrap



响应式工具目前只是针对块级元素， 不支持inline元素和表格元素。

 

1、定义css的样式



2、添加JS文件

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


     <link rel="stylesheet" href="css/index.css"/>
     <script src="js/bootstrap.min.js"></script>

兼容IE6、7、8
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->




    <script src="js/jquery-1.9.1.min.js"></script>



 在设置xs/sm/ms/lg的时候，如果没有设置大小都以比它小的屏幕宽度进行显示。

 （设置大小的时候，以设置最小的大小。）

需要注意的是，需要实现点击改变形状的，需要加载jquery文件。

     $("p").toggle("slow");

    如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

这样就能实现点击的时候，出现，再次点击的时候就隐藏。