自适应

回想第一次听到BFC的时候，是在解释为什么高度塌陷可以用overflow:hidden;等方法来解决的时候，当时BFC对我来说还是一个陌生的概念。在解决高度塌陷的问题的时候，通过BFC的触发条件之一触发BFC后，在计算BFC的高度的时候，浮动元素就可以参与计算了。 BFC(Block Formatting Contexts)即块级格式化上下文，首先得是块元素，其次具备触发条件之一的才可以是BFC。 BFC的触发条件可以是 根元素；html标签本身就是一个BFC float的值不为none overflow的值不为visible display的值为inline-block/table-cell/table-caption/flex/inline-flex position的值为absolute或fixed 得知怎么能触发BFC之后，就来到了我今天要说的触发BFC之后，利用BFC的其中一个特性可以实现自适应两栏布局。BFC的这个特性是，BFC的区域不会与浮动元素发生重叠。这个特性也可以解释为什么多个元素浮动之后会横着排。 当上面的一个元素浮动，下面的一个元素没有浮动的时候，会发生重叠，原因是浮动之后不占据位置，所以下面的元素会上去。 <style type="text/css"> body{margin: 0;padding: 0;} .box1{width: 100px

本篇文章将介页面布局中的自适应布局，常见的自适应布局有以下2种：左列固定右列自适应、左右两列固定中间自适应。 1. 左列固定右列自适应布局方案 说明 ：左列固定右列自适应，也可以为右列固定左列自适应，常见于中台管理界面、移动端Web的列表展示等等。 <div class="container"> <div class="left">固定宽度</div> <div class="right">自适应</div> </div> 1.1 子元素 float:left 说明 ：左边的固定列设置为 float:left，右边的自适应列设置为 float:none。 CSS ： * { margin: 0;padding: 0 } .container { position: absolute; width: 100%; height: 100%; } .left { float: left; width: 200px; height: 100%; background-color: #72e4a0; } .right { float: none; width: 100%; height: 100%; background-color: #9dc3e6; } 1.2 子元素 width:calc() 说明 ：自适应列的width根据calc()自动计算，如：父容器width -

来源： https://www.cnblogs.com/liuxiaomei/p/8872288.html

一直被iframe的高度自适应的问题困扰着，在项目中也是多次遇到。网上也有不少相关的代码，但是总不能满足自己的要求。在头痛了几次之后终于下定决心解决这个问题。 本代码主要解决的问题是：最外层滚动条随着iframe高度动态变化的问题。如果iframe高度比较大最外层就会出现滚动条，否则就不会。网上好多例子的问题都是iframe只保留最大的高度以至于页面内容高度很小但是右边还有滚动条。 话不多说，上代码。 1 /** 2 * iframe自适应高度，height为手动设置的最小高度 3 */ 4 function initIframeHeight(height){ 5 var userAgent = navigator.userAgent; 6 var iframe = parent.document.getElementById("contentIframe"); 7 var subdoc = iframe.contentDocument || iframe.contentWindow.document; 8 var subbody = subdoc.body; 9 var realHeight; 10 //谷歌浏览器特殊处理 11 if(userAgent.indexOf("Chrome") > -1){ 12 realHeight = subdoc.documentElement

<iframe src="index.html" id="iframepage" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" onLoad="iFrameHeight()"></iframe> <script type="text/javascript" language="javascript"> function iFrameHeight() { var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; if(ifm != null && subWeb != null) { ifm.height = subWeb.body.scrollHeight; ifm.width = subWeb.body.scrollWidth; } } </script> 一小段js解决，自己在IE 火狐 谷歌都测试通过的。 java技术交流群：57388149 喜欢java，做java的可以一起交流。 来源： https://www.cnblogs.com/Nbge/archive/2013

宽高自适应 网页布局中经常要定义元素的宽和高。但是很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应 元素自适应在网页布局中非常重要，他能够使网页显示更加灵活，可以适应在不同设备、不同窗口和不同分辨率下显示 1.宽度自适应 元素宽度设置为100%（块元素宽度默认为100%） 2.元素具备最小高度的自适应 min-height属性：最小高度：可以让 内容少的时候仍然保持一定的高度 其他属性： min-height（最小高度） max-height（最大高度） min-width（最小宽度） max-width（最大宽度） 3.高度自适应 元素高度自适应窗口高度 设置方法：html,body{height:100%} 需要自适应的元素：height:100%; 自适应元素高度： 父元素：height：value 需要自适应父元素高度的子元素：height:100%; height:auto是指根据块内内容自动调节高度。 height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度 最后提一句图片整合… 一般比较大的网站可能需要用，主要原理就是把许多图片整合成一张，比如许多小图标，把他们合在一张图上 ，然后布局的时候利用background-position属性来对图片进行移动，实现想要的布局效果，这样做可以减少图片体积

window.onresize = function( ){ 　　myChart.resize(); } 来源： https://www.cnblogs.com/cuishuangshuang/p/12321003.html

转自： http://www.siyongyou.com/app-01.html 如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ： 自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。 开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp，本文将主要讲解后者。 WebApp与Native App有何区别呢？ Native App： 1、开发成本非常大。 一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦 每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。 3、非常酷 因为native app可以调用IOS中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果 4、Native app是被Apple认可的 Native app可以被Apple认可为一款可信任的独立软件，可以放在Apple

自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。 开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp，本文将主要讲解后者。 WebApp与Native App有何区别呢？ Native App： 1、开发成本非常大。 一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦 每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。 3、非常酷 因为native app可以调用IOS中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果 4、Native app是被Apple认可的 Native app可以被Apple认可为一款可信任的独立软件，可以放在Apple Stroe出售，但是Web app却不行。 Web App： 1、开发成本较低 使用web开发技术就可以轻松的完成web app的开发 2、升级较简单 升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉 3、维护比较轻松 和一般的web一样，维护比较简单，它其实就是一个站点

自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。 开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp，本文将主要讲解后者。 WebApp与Native App有何区别呢？ Native App： 1、开发成本非常大。 一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦 每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。 3、非常酷 因为native app可以调用IOS中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果 4、Native app是被Apple认可的 Native app可以被Apple认可为一款可信任的独立软件，可以放在Apple Stroe出售，但是Web app却不行。 Web App： 1、开发成本较低 使用web开发技术就可以轻松的完成web app的开发 2、升级较简单 升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉 3、维护比较轻松 和一般的web一样，维护比较简单，它其实就是一个站点