码迷,mamicode.com
首页 > 其他好文 > 详细

响应式布局

时间:2015-08-09 14:07:39      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:

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");

    如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

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

响应式布局

标签:

原文地址:http://www.cnblogs.com/liner730/p/4715002.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!