自适应

写html自适应的时，有些时候你包了一个块之后，在里面插入图片，设置了不超过盒子的宽高。图片却并不会在盒子里面。它会溢出。遇到这个问题是基线对齐的问题，这个时候你可以去改变它的基线对齐方式，verticle-middle，或者verticle-top。之类的语句去改变它对齐的方式。让他回到盒子内部。 当年在正常块盒排版的时候，你已经在通配符里面设置了margin:0;padding:0;但是在网页中显示的时候，上下块盒之间会出现莫名其妙的间距，检查的时候，也没有显示他们有margin，这个时候可以通过弹性布局里面的竖直排列来解决这个问题display:flex;flex-direction:column; 来源： https://www.cnblogs.com/gao2/p/11356280.html

最近一直想研究一下信道均衡器的原理，并想自己动手实践一下。 在网上搜集了不少的资料，可以都是一些自适应方面的均衡器的 开发。公司的代码库里面有个用在频域方面的均衡器，可是不知道 它所用的算法的依据是什么。看它主要是使用mdct变化后，在频域 内对信号进行处理。但是总的原理还是不懂。想搜集与这种方法类似 的论文也没有，都是关于自适应的一些算法。本人对自适应的算法 不是太理解。真是郁闷呀。 准备再找找，希望能补全这篇博客。 转载于:https://www.cnblogs.com/wzgpeter/archive/2010/08/02/1790880.html 来源： https://blog.csdn.net/weixin_30731287/article/details/99530368

屏幕自适应 为了程序能够在不同分辨率的显示器中正常显示我们的程序UI界面，我们需要对canvas进行设置： 1、将UI Scale Mode选项中Constant Pixel Size更改为Scale With Screen Size。 2、可以设置Reference Resolution （默认分辨率）：可以根据需要是显示的分辨率进行设置，一般横屏设置为1920 1080；竖屏设置为：1080 1920。 3、 根据显示需要设置Math：横屏时可以根据确定的高度，适配不确定的显示宽度。可以设置width=0 竖屏时可以根据确定的宽度，适配不确定的显示高度。可以设置hight=1 程序运行时全屏显示 1、在Player Setting属性面板中，打开Resolution and Presentation设置选项，将Display Resolution Dialog设置为Disabled 2、新建C#脚本，命名为FullScreen，代码如下 using System.Collections; using System.Collections.Generic; using UnityEngine; public class FullScreen : MonoBehaviour { private void Awake() { //获取设置当前屏幕分辩率 Resolution[]

　　现在手机端的项目比较多，自适应不用说那是必备技能了，目前应用的单位最多还是rem, 然而每次在制作过程中需要自己计算rem值比较繁琐，现在分享下postcss-pxtorem的使用可以把px直接转换为rem，省下了计算的体力了 首先安装依赖 npm install postcss-pxtorem -D其次设置规则在package.json里面配置下，配置如下 "postcss": { "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": "72",//设计稿十比一比例换算 ，我这里得设计稿720 "propList": [ //可以设置全部属性转换为rem propList ['*'] 　　　　"padding", ..... ] } }},最后配合flexrem.js使用就解决了移动端适配问题 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //改变窗口大小 重新设置rem recalc = function() { var clientWidth = docEl.clientWidth

iframe 子页面自适应问题，网上找了很多，都是只可以高度变大，不可以变小，造成高度比较大的页面切换高度比较小的页面的时候出现空白（滚动条在最下面），效果不太好 下面是我总结的一下，可以变大，也可以变小 iframe页面JS function reinitIframe() { var iframe = document.getElementById("content"); try { var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.min(bHeight, dHeight); iframe.height = height; } catch (ex) { } } window.setInterval("reinitIframe()", 20); HTML代码 <iframe id="content" src="/Home/Index" style="width:100%;" scrolling="no" frameborder =0></iframe> 转载于:https://www.cnblogs.com/wan-wan

CSS 实现自适应宽高的正圆 利用CSS伪元素增加父元素的高度，使其变成一个正方形 代码 < span class = " circle-container " > < span class = " circle " > {{number | filterNumber}} </ span > </ span > .circle-container { display: inline-block; border-radius: 50%; min-width: 50px; /*如果min-height太小（一般>=25即可，这里取50为了使数字在3位数以下大小一致） 会被字体的大小撑开导致形成的圆不圆*/ min-height: 50px; padding: 5px; text-align: center; box-sizing: content-box; line-height: 1; white-space: nowrap; &:before { content: ''; display: inline-block; vertical-align: middle; padding-top: 100%; height: 0; } & > span{ display: inline-block; vertical-align: middle; } } Refernce https:/

方法1:左右div设置浮动，脱离标准流，中间那块元素就会上去。 （注意：html代码中中间部分的div必须放到左右div的后面） <style> .boxLeft{ min-height: 100px; width: 200px; background: #987; float: left; } .boxRight{ min-height: 100px; width: 200px; background: #369; float: right; } .boxCenter{ min-height: 100px; margin-left: 220px; margin-right: 220px; background: #192; } </style> <div class="box"> <div class="boxLeft">left</div> <div class="boxRight">right</div> <div class="boxCenter">center</div> </div> 方法2:左右绝对定位的两块div元素,脱离标准流，中间那块元素就会上去 （注意：中间部分的div必须放到左右div的后面） <style> .boxLeft{ min-height: 100px; width: 200px; background: #987; position:

自适应 使网页能适应不同终端设备的技术。原理是通过检测视口分辨率来判断是什么终端的，PC，手机还是平板。 做自适应的网页时，需要在代码中加入“祖传代码”，即通用代码。 这是在头部head引入的： <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> 分别代表的意思是： initial-scale=1.0 ：初始缩放比例为1.0（原始大小），这句代码的目的还不是放置用户 缩放的 minimum-scale=1.0 ：网页最小的缩小比例为1.0（原始大小），设置这句代码的目的是为 了放置某些程序（比如JS）无意中修改了网页的缩小比例 maximum-scale=1.0 ：网页最大的放大比例为1.0（原始大小），设置这句代码的目的是为 了放置某些程序（比如JS）无意中修改了网页的放大比例 user-scalable=0 ：这句代码才是不允许用户对网页进行缩放 <script> !(function (win, doc) { function setFontSize() { var winWidth = window.innerWidth; doc.documentElement.style

在页面无刷新更新方面，虽然现在的ajax很强悍，但是处理代码相对多点。想比之下，iframe就简单多了！处理iframe的自适应宽、高，会经常用到，网上整理了一份，写在这里备用： 单个iframe 高度自适应： <iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm"></iframe> 起作用的是这句：onload="this.height=iFrame1.document.body.scrollHeight" 多层嵌套iframe 高度自适应： A页面的iframe： <iframe id="frame_content" src=”B.php“ name="right" width="1003" frameborder="0" scrolling="no" ></iframe> B.php页面又有一个iframe： <iframe width="750" name="rightform" id="rightform" src="KinTimMng_right_init.php" frameborder="0" scrolling="no" onload="this

第一种方法：代码简单，兼容性还可以，大家可以先测试下。 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" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe> 第二种方法：经典代码 iFrame 自适应高度，在IE6/IE7/IE8