JGUI源码：响应式布局简单实现(13)
首先自我检讨下，一直没有认真研究过响应式布局，有个大致概念响应式就是屏幕缩小了就自动换行或者隐藏显示，就先按自己的理解来闭门造车思考实现过程吧。
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，改成百分比，代码修改如下
效果看起来好多了，自动隐藏元素同上，只不过把宽度改为显隐即可，如定义样式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
JGUI源码：响应式布局简单实现(13)的更多相关文章
- 学习 vue 源码 -- 响应式原理
概述 由于刚开始学习 vue 源码,而且水平有限,有理解或表述的不对的地方,还请不吝指教. vue 主要通过 Watcher.Dep 和 Observer 三个类来实现响应式视图.另外还有一个 sch ...
- Vue2手写源码---响应式数据的变化
响应式数据变化 数据发生变化后,我们可以监听到这个数据的变化 (每一步后面的括号是表示在那个模块进行的操作) 手写简单的响应式数据的实现(对象属性劫持.深度属性劫持.数组函数劫持).模板转成 ast ...
- bootstrap响应式布局简单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- JGUI源码：从头开始，建一个自己的UI框架（1）
开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQue ...
- asp.net MVC通用权限管理系统-响应式布局-源码
一.Angel工作室简单通用权限系统简介 AngelRM(Asp.net MVC Web api)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术 ...
- 一个菜鸟所喜欢用的响应式布局，操作方便简单、时尚简约，适合新手！（一个Dreamweaver cs6生成响应式布局）
前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式设计的流行,前端开发变得越来越困难,且花费 ...
- 响应式布局（Responsive layout，RL）的简单Demo
★背景: 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决 ...
- html自己写响应式布局（说起来很高大上的样子，但是其实很简单）
第一步,打开电脑中安装的Sublime Text3,新建demo文件夹用来存放文件,在里面新建一个HTML文件,通过Tab快捷键迅速创建一个HTML模板,并命名标题. 第二步,在Body标签里添加三个 ...
- 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
随机推荐
- selenium-日志文件的使用(十二)
概述 在自动化测试中,如果测试失败需要对错误的错误的代码或者测试case进行分析,进行分析时最好的方法是在项目中添加日志文件,通过日志文件的分析定位出现错误的原因. 这样可以保持自动化测试用例的健壮性 ...
- Linux Mint有进程管理器吗？答案是肯定的
Linux Mint系统内置了一个系统管理器,叫 "System Monitor",通过 Menu -->> 系统工具 可以查看 . 如下图,在管理器上右键,可以&qu ...
- EM算法(Expectation Maximization)
1 极大似然估计 假设有如图1的X所示的抽取的n个学生某门课程的成绩,又知学生的成绩符合高斯分布f(x|μ,σ2),求学生的成绩最符合哪种高斯分布,即μ和σ2最优值是什么? 图1 学生成绩的分 ...
- 简介---linux内核态和用户态
内核态:进程运行在内核空间:管理系统的所有资源,比如读写磁盘文件,分配回收内存,从网络接口读写数据等等 用户态:进程运行在用户空间.比如一些应用程序 内核如何调用硬件资源的:内核空间中的代码控制了硬件 ...
- 2018-2019-2 20175217 实验三《敏捷开发与XP实践》实验报告
一.实验报告封面 课程:Java程序设计 班级:1752班 姓名:吴一凡 学号:20175217 指导教师:娄嘉鹏 实验日期:2019年4月25日 实验时间:--- 实验序号:实验三 实验名称:敏捷开 ...
- CSAPP：第十二章 并发编程
CSAPP:第十二章 并发编程 12.1 线程执行模型12.2 多线程之间并发通信12.3 其他并发问题 使用应用级并发的应用程序称为并发程序.现代操作系统提供三种基本的构造并发程序的方法: 进程 ...
- SkiaSharp图像处理
SkiaSharp图像处理 .NET Core使用skiasharp文字头像生成方案(基于docker发布) 一.问题背景 目前.NET Core下面针对于图像处理的库微软并没有集成,在.NET ...
- .NET程序员我是如何通过一个产品在2年内买车买房
刚开始写博客不足之处望大家多多指点,少一些质疑多一些帮助,我们就能成为朋友. 我写博客的目的其实很简单就是为了分享知识,如有幸能申请当MVP那是最好不过了,这个过程对于“大牛”来说很快,但对于我来说估 ...
- IP防护等级简介
IP(INGRESS PROTECTION)防护等级系统是由IEC(INTERNATIONAL ELECTROTECHNICAL COMMISSION)所起草,将电器依其防尘防湿气之特性加以分级 IP ...
- [蓝桥杯]2014蓝桥省赛B组题目及详解
/*——————————————————————————————————————————————————————————— [结果填空题]T1 题目:啤酒和饮料 啤酒每罐2.3元,饮料每罐1.9元.小 ...