自适应

三栏布局,中间自适应,左右固定实现方法

强颜欢笑 提交于 2019-12-19 03:00:52
方法一:浮动 <div class="container"> <div class="content">hello</div> <div class="left"></div> <div class="right"></div> </div> <style> .left{ float:left; width: 200px; height: 300px; background: red; } .right{ float: right; width: 200px; height: 300px; background: green; } .content{ width: 100%; height: 300px; background: blue; } </style> 方法二:定位 .left{ width: 200px; height: 300px; background: red; position: absolute; left: 0; top: 0; } .right{ width: 200px; height: 300px; background: green; position: absolute; right: 0; top: 0; } .content{ width: 100%; height: 300px; background: blue; margin:0

Rem自适应js---flexible.min.js

我怕爱的太早我们不能终老 提交于 2019-12-19 01:20:59
网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用 rem 实现 自适应 ,或叫 rem 响应式 布局,通过使用一个脚本就可以rem 自适应 ,不用再为各种设备宽度不同而烦恼如何实现自适应的问题。 rem 是相对于根元素 < html > ,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。1rem=16px(浏览器html的像素,可以设定这个基准值),假如浏览器的html设为64px,则下面的元素则 1rem=64px来运算 。 阿里团队开源的一个库。使用 flexible.js 轻松搞定各种不同的移动端设备兼容自适应问题。 在这里找到了一个精简版的flexible.min.js,可以适配所有的移动端: 代码如下: //designWidth:设计稿的实际宽度值,需要根据实际设置 //maxWidth:制作稿的最大宽度值,需要根据实际设置 //这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750) ;(function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement,

web 报表工具如何自适应

烂漫一生 提交于 2019-12-18 12:29:15
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 现在的报表用户已经不再将报表作为一个单纯的报表工具看待了,有时候也会当作页面工具来使用,这时为了页面显示工整美观,就需要报表能够自适应宽度。下面我们就基于润乾报表来讲一下是如何做到自适应展现报表。 产品:润乾报表 V2018 方法 1 :使用自带的 matchReport.jsp 访问报表,这个页面通过 reportMatchSize 这个自适应 js 函数实现自适应功能。 1、 新建报表(过程不再详细说明) 将报表保存在安装目录的 report\web\webapps\demo\WEB-INF\reportFiles 下面。 2、 启动服务,访问报表 访问报表的连接为: http://IP :端口 /demo/reportJsp/matchReport.jsp?rpx= 报表名称.rpx (如果报表保存在 reportFiles 的下级文件夹中,访问报表的 url 需要改为:……rpx= 文件夹名称 / 报表名称.rpx) 3、 报表在 PC 端的展现效果: 通过上面的展现效果可以看出,使用自带的 matchReport.jsp 访问报表,在自适应宽度的时候高度也同比例缩放了。如果我们不想要这种宽度自适应,高度同比例缩放的效果,我们可以试试下面这种方式。 方法 2 :润乾报表在网页端展示时是以纯 html

几种名词的解释

一曲冷凌霜 提交于 2019-12-18 00:14:41
自带设备(BYOD ) :指一些企业允许员工携带自己的笔记本电脑、平板电脑、智能手机等移动终端设备到办公场所,并可以用这些设备获取公司内部信息、使用企业特许应用的一种政策。这个术语还可以用来形容学生在教育场所使用个人自带智能设备的行为。智能手机、PAD、电脑等个人智能设备的广泛使用,正在改变着我们的世界,不仅丰富了人们的娱乐生活,也成为学习、工作的好帮手。自带设备办公(BYOD)已经渐渐成为当下一种流行趋势。 翻转课堂 :这是从英语“FlippedClass Model”翻译过来的术语,一般被称为“反转课堂式教学模式”。传统的教学模式是老师在课堂上讲课,布置家庭作业,让学生回家练习。与传统的课堂教学模式不同,在“翻转课堂式教学模式”下,学生在家完成知识的学习,而课堂变成了老师学生之间和学生与学生之间互动的场所,包括答疑解惑、知识的运用等,从而达到更好的教育效果。互联网的普及和计算机技术在教育领域的应用,使“翻转课堂式”教学模式变得可行和现实。学生可以通过互联网去使用优质的教育资源,不再单纯地依赖授课老师去教授知识。而课堂和老师的角色则发生了变化。老师更多的责任是去理解学生的问题和引导学生去运用知识。 特点:第一,教学视频短小精悍;第二,教学信息清晰明确;第三,重新建构学习流程;第四,复习检测方便快捷。 创客空间: 创客空间遍布全球,它们都具有实体空间并采用社区化方式运营。在这里

IFRAME 自适应高度

a 夏天 提交于 2019-12-17 05:35:39
var iframehide="yes" function dyniframesize() { var dyniframe=new Array() for (i=0; i<iframeids.length; i++) { if (document.getElementById) { dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); if (dyniframe[i] && !window.opera) { dyniframe[i].style.display="block" if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; } } if ((document.all ||

iframe自适应高度

心已入冬 提交于 2019-12-17 03:31:48
iframe,尤其是不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe 设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大家一种iframe动态调整高度的方法,主要是以下JS函数: 程序代码 function SetWinHeight(obj) { var win=obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocument && win.contentDocument.body.offsetHeight) win.height = win.contentDocument.body.offsetHeight; else if(win.Document && win.Document.body.scrollHeight) win.height = win.Document.body.scrollHeight; } } } 最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配 程序代码 <iframe width="778" align="center" height="200" id="win"

bootstrap设置背景图片自适应屏幕大小

感情迁移 提交于 2019-12-16 06:24:03
css中编辑此样式: 1 2 3 4 .bg { background : url (图片地址) no-repeat center ; background- size :contain; } 然后在你的div里引用这个样式就行了: 1 < div class = "row bg" > 使图片不随滚动条滚动,即固定不动则加fixd,css代码如下: 1 2 3 4 .bg { background : url (图片地址) no-repeat center fixed ; background- size :contain; } 来源: https://www.cnblogs.com/EarlyBridVic/p/12047201.html

论文笔记 ——《Deep Domain Confusion: Maximizing for Domain Invariance》

隐身守侯 提交于 2019-12-15 06:55:24
论文笔记 ——《深度学习神经网络迁移性提升》(《Deep Domain Confusion: Maximizing for Domain Invariance》) 答主因为最近在看迁移学习的论文,时间比较紧张,所以这几篇论文就只抓一下大纲,不考虑具体细节和模拟了,权当是随手笔记了(为了防止BOSS抽查啥也想不起来-> ->),后面有时间会把细节补上的。 关键知识点 本文讲了一种新的CNN架构,目的在于找到自适应层尺寸和位置使距离最小,混淆最大(如图) MMD是用来刻画source domain和target domain差异的 迁移性可通过添加一个自适应层得到提升 贡献 作者提出了一种增强深度网络迁移性的方法,该方法通过在训练模型时,不仅最小化训练集上的分类误差,并且 最小化训练集和测试集之间的样本分布差异(通过MMD最大均值差异) 。 该工作属于一种 领域自适应(domain adaptation) 的方法,它能有效地抵御fine-tune所带来了过拟合,它当时在同类任务中取得了最好的效果。 算法 同时减小分类损失和训练集与测试集的分布差异,这可以转化为一个优化损失函数的问题。 损失函数如下: 模拟 作者利用MMD方法对自适应层的位置和尺寸进行了选择(但并没有精确给出原因)。 来源: CSDN 作者: IvyZZxy 链接: https://blog.csdn.net

flexible.js 移动端自适应方案

我怕爱的太早我们不能终老 提交于 2019-12-15 05:09:57
一,flexible.js 的使用方式: github地址: https://github.com/amfe/lib-flexible 官方文档地址: https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档。 (一),引用方式 1,引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js" ></script> 当前最新的版本是0.3.2。 2,下载flexible.js 等文件到项目指定目录下,然后在head中引入。建议对于js做内联处理,在所有资源加载之前执行这个js。 下面是淘宝的写法: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="yes" name="apple-touch-fullscreen" /> <meta content="telephone=no,email=no" name="format-detection" /> <meta content="maximum

如何实现三列布局,中间宽度自适应,两边定宽。以及双飞翼布局与圣杯布局。

て烟熏妆下的殇ゞ 提交于 2019-12-14 11:50:01
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 三列中间宽度自适应的布局是经常需要的。 圣杯布局能实现三列中间宽度自适应,但是并 不是最佳实践 。 圣杯布局的要求是 三列布局,中间宽度自适应,两边定宽; 中间栏要在浏览器中优先展示渲染; 允许任意列的高度最高; 具体实现网上右很多文章了,双飞翼布局也是为了这个目的,在圣杯布局上改动的。 在很多情况不需要中间优先展示渲染。比如很多网站第一行都是 左:热点新闻、中:最近更新、右:常用链接,重要性最高不是中间。还有只是为了布局不是为了内容,比如填的一些表单。圣杯布局其实是很少用的。 那么怎么能够兼容好,使用简便的实现呢? 通过BFC即可 <div class="clearfix"> <div>向左浮动</div> <div>向右浮动</div> <div>设置overflow:auto</div> </div> 演示地址 来源: oschina 链接: https://my.oschina.net/u/818899/blog/2250203