首先自我检讨下，一直没有认真研究过响应式布局，有个大致概念响应式就是屏幕缩小了就自动换行或者隐藏显示，就先按自己的理解来闭门造车思考实现过程吧。

1、首先把显示区域分成12等分，bootstrap是这样分的

|1|-|2|-|3|...|12|

2、现在定义不同的大小的盒子用来装物品，假如所在盒子为1024px，盒子内两个矩形A,B都是512px，那么800px下，肯定是显示不完全了，那么就要么让B隐藏，要么让B换行显示。

3、假如定义显示区域 1024时使用 lg 大盒子，lg-1~lg-12占屏幕比例1~12格。那么大盒子的单元格最大大小为1024/12 ~=85px,

下面整理下实现思路：

1、定义外层类为 jgui-box.

2、查询屏幕大小有两种方式一种是@media，另一种使用jquery实现，本文使用jquery。

3、定义lg(>=1024),md(>=480<1024),sm(<480)三种样式前缀

4、当window size change时，修改jgui-box下lg,md,sm元素宽度即可。

首先定义样式，就写三种做测试用，读者自己可以写个循环把1-12的都写出来。

    <style>

    .lg-4,.md-6,.sm-12

    {

        float:left;

    }

    .jgui-box

    {

        margin:0 auto

    }

    </style>  
 <div>←←这是测试页面</div>

    <div class="jgui-box" style="width:100%">

        <div class="lg-4 md-6 sm-12" style="background:brown;color: white">A</div>

        <div class="lg-4 md-6 sm-12" style="background:blue;color: white">B</div>

        <div class="lg-4 md-12 sm-12" style="background:green;color: white">C</div>

    </div>

    <script type="text/javascript">

    window.onresize = setWidth;

    function  setWidth ()

            {

                var width=$('.jgui-box').width();

                console.log(width);

                if(width>=1024)

                {

                    $('.jgui-box .lg-4').css('width',Math.floor(width/12.0*4));

                }

                else if(width>=480 && width<1024)

                {

                    $('.jgui-box .md-6').css('width',Math.floor(width/12.0*6));

                    $('.jgui-box .md-12').css('width',Math.floor(width/12.0*12));

                }

                else

                {

                    $('.jgui-box .sm-12').css('width',Math.floor(width/12.0*12));

                }

            };

            $(function () { setWidth();

            });

    </script>

调整浏览器宽度时，显示效果如下

>=1024

>=480 && <1024

<480

昨天做好后，今天测试拖动时发现不能完美填充，主要是多个div宽度计算带有小数点，不能完美的填充box，改成百分比，代码修改如下





function setWidth ()


{


var width=$('.jgui-box').width();


console.log(width);


if(width>=1024)


{


$('.jgui-box .lg-4').css('width',4*100.0/12+'%');


}


else if(width>=480 && width<1024)


{


$('.jgui-box .md-6').css('width',6*100.0/12+'%');


$('.jgui-box .md-12').css('width',12*100.0/12+'%');


}


else


{


$('.jgui-box .sm-12').css('width',12*100.0/12+'%');


}


};




 






效果看起来好多了，自动隐藏元素同上，只不过把宽度改为显隐即可，如定义样式sm-hide,在js代码里判断窗口大小在sm时隐藏即可。




<body>

    <div>这是测试页面，请调整浏览器大小测试</div>

    <div class="jgui-box" style="width:100%">

        <div class="lg-4 md-6 sm-12" style="background:brown;color: white">A</div>

        <div class="lg-4 md-6 sm-12" style="background:blue;color: white">B</div>

        <div class="lg-4 md-12 sm-12 sm-hide" style="background:green;color: white">C</div>

    </div>

    <script type="text/javascript">

    window.onresize = setWidth;

    function  setWidth ()

    {

        var width=$('.jgui-box').width();

        console.log(width);

        if(width>=1024)

        {

            $('.jgui-box .lg-4').css('width',4*100.0/12+'%').show();

        }

        else if(width>=480 && width<1024)

        {

            $('.jgui-box .md-6').css('width',6*100.0/12+'%').show();

            $('.jgui-box .md-12').css('width',12*100.0/12+'%').show();

        }

        else

        {

            $('.jgui-box .sm-12').css('width',12*100.0/12+'%').show();

            $('.jgui-box .sm-hide').hide();

        }

    };

    $(function () { setWidth();

    });

    </script>

    <script type="text/javascript" src="/js/jgui.all.js?v=20190227"></script>

</body>






调小后只剩A,B了。后续要需要进行封装完善，把js写进基础库里，界面上直接设置css就可以了，
如此程序就实现了响应式效果两个用的比较多的功能：自动换行和显示隐藏，回头完善下应该也可以使用了。


如果理解的不对请大家指教，程序demo


www.jgui.com
												


											
JGUI源码：响应式布局简单实现(13)的更多相关文章
	

    
								
  1. 学习 vue 源码 -- 响应式原理
		
    概述 由于刚开始学习 vue 源码,而且水平有限,有理解或表述的不对的地方,还请不吝指教. vue 主要通过 Watcher.Dep 和 Observer 三个类来实现响应式视图.另外还有一个 sch ...
    
		
    2. 
						
  2. Vue2手写源码---响应式数据的变化
		
    响应式数据变化 数据发生变化后,我们可以监听到这个数据的变化 (每一步后面的括号是表示在那个模块进行的操作) 手写简单的响应式数据的实现(对象属性劫持.深度属性劫持.数组函数劫持).模板转成 ast  ...
    
		
    3. 
						
  3. bootstrap响应式布局简单实例
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
    
		
    4. 
						
  4. JGUI源码：从头开始，建一个自己的UI框架（1）
		
    开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQue ...
    
		
    5. 
						
  5. asp.net MVC通用权限管理系统-响应式布局-源码
		
    一.Angel工作室简单通用权限系统简介 AngelRM(Asp.net MVC Web api)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术 ...
    
		
    6. 
						
  6. 一个菜鸟所喜欢用的响应式布局，操作方便简单、时尚简约，适合新手！（一个Dreamweaver cs6生成响应式布局）
		
    前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式设计的流行,前端开发变得越来越困难,且花费 ...
    
		
    7. 
						
  7. 响应式布局（Responsive layout，RL）的简单Demo
		
          ★背景:       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决 ...
    
		
    8. 
						
  8. html自己写响应式布局（说起来很高大上的样子，但是其实很简单）
		
    第一步,打开电脑中安装的Sublime Text3,新建demo文件夹用来存放文件,在里面新建一个HTML文件,通过Tab快捷键迅速创建一个HTML模板,并命名标题. 第二步,在Body标签里添加三个 ...
    
		
    9. 
						
  9. 一步步开发自己的博客  .NET版 剧终篇（6、响应式布局 和 自定义样式）
		
    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Delphi中使用ISuperObject解析Json数据
			
    Java.Php等语言中都有成熟的框架来解析Json数据,可以让我们使用很少的代码就把格式化好的json数据转换成程序可识别的对象或者属性,同时delphi中也有这样的组件来实现此功能,即Isuper ...
    
			
    2. 
						
  2. spring boot跨域问题
			
    跨域是指不同域名之间相互访问.跨域,指的是浏览器不能执行其他网站的脚本.它是浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制.也就是如果在A网站中,我们希望使用Ajax来获得B网站 ...
    
			
    3. 
						
  3. coursea机器学习课程作业
			
    coursea机器学习课程作业 一 关于此课程 课程地址 图片来自网络 1.官网课程地址传送 2.如果访问官网速度较慢可以上 B站课程地址 机器学习是一门研究在非特定编程条件下让计算机采取行动的学科. ...
    
			
    4. 
						
  4. [解读REST] 3.基于网络应用的架构
			
    链接上文[解读REST] 2.REST用来干什么的?,上文中解释到什么是架构风格和应该以怎样的视角来理解REST(Web的架构风格).本篇来介绍一组自洽的术语,用它来描述和解释软件架构:以及列举下对于 ...
    
			
    5. 
						
  5. 消息中间件 MQ
			
    复制粘贴于:https://blog.csdn.net/wqc19920906/article/details/82193316 一.消息中间件相关知识 1.概述 消息队列已经逐渐成为企业IT系统内部 ...
    
			
    6. 
						
  6. Jdbc、Mybatis、Hibernate各自优缺点及区别
			
    文章出处:Jdbc,Mybatis,Hibernate各自优缺点及区别 先比较下jdbc编程和hibernate编程各自的优缺点. 1.JDBC 我们平时使用jdbc进行编程,大致需要下面几个步骤:  ...
    
			
    7. 
						
  7. LeetCode33—搜索旋转排序数组
			
    方法一:先找到旋转点,然后根据目标值重新确定二分查找区域. 时间复杂度:用到两次二分查找,每次二分查找粗略的认为是O(logn),那么时间复杂度为2 * O(logn): 空间复杂度:O(1). in ...
    
			
    8. 
						
  8. Flex弹性布局以及box-sizing
			
    (本篇内容代表本人理解,如有错误请指出!) box-sizing box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.可以使用此属性来模拟不正确支持CSS盒子模型规范的 ...
    
			
    9. 
						
  9. python可迭代对象和迭代器和生成器
			
    可迭代对象 刚开始我认为这两者是等同的,但后来发现并不是这样:下面直接抛出结论: )可迭代对象包含迭代器. )如果一个对象拥有__iter__方法,其是可迭代对象:如果一个对象拥有next方法,其是迭 ...
    
			
    10. 
						
  10. ubuntu下python跑任务输出到文件中遇到的一些问题（输出重定向）
			
    之前主要是参考https://www.cnblogs.com/chason95/articles/9760291.html 一般使用 python test.py > ./log.txt 或 p ...
    
			
    11.