自适应

解决iframe高度自适应问题

由 佐手、 提交于 2019-12-27 05:06:39
最近工作中使用了让人头疼的iframe，碰到的最大问题是没有好的方法使其高度自适应。尤其在页面进行ajax后，后来Google一番之后，发现 iframe-resizer 能够比较好的解决这个问题，而且还支持跨域访问（使用 postMessage ）。 iframe resizer地址： https://github.com/davidjbradshaw/iframe-resizer 。 使用方法：在iframe resizer压缩包的js文件夹中，有两个文件： 第一个js是：iframeResizer.min.js。这个js是要放在需要嵌入iframe的页面（parent）中。 第二个js是：iframeResizer.contentWindow.min.js，它需要放到你的iframe页面(child)中去，注意只要引入，不需要代码配置。 然后再parent页面 配置如下：为了兼容需要设置 width:100% scrolling:no overflow:visible <iframe id="myframe" src="https://**" width="100%" scrolling="no" style="overflow:visible"></iframe> 然后再js中使用： <script type="text/javascript"> iFrameResize(

Vue实现PC端分辨率自适应

由 大憨熊 提交于 2019-12-27 02:53:05
方案 lib-flexible + px2remLoader lib-flexible ：阿里可伸缩布局方案 px2rem-loader ： px 转 rem 安装依赖 npm install px2rem-loader -D npm install lib-flexible -S 引入依赖 main.js 引入 lib-flexible import 'lib-flexible' px转换成rem vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的方法生成的，我们只需在 cssLoader 后再加上一个 px2remLoader 即可， px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10 ，这里假设设计稿宽为 1920px build/utils.js 中添加 px2remLoader const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } // 增加代码，px转rem配置（需要将px2remloader添加进loaders数组中）

CSS解决高度自适应问题

由 痴心易碎 提交于 2019-12-26 08:04:03
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> html, body { height: 100%; margin: 0px; padding: 0px; } #main { background-color: #E01313; height: 100%; } #nav { background-color: #85d989; width: 100%; height: 50px; } #content { background-color: #cc85d9; width: 100%; position: absolute; top: 50px; bottom: 0px; left: 0px; } </style> </head> <body> <div id="main"> <div id="nav">nav</div> <div id="content">content</div> </div>

css常见布局方式

由 北城余情 提交于 2019-12-24 20:12:10
　　布局是CSS中一个重要部分，下面总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现）。 　　一、居中方式 　　 水平居中 水平居中对于子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案是不同。 行内元素：对父元素设置text-align:center; 定宽块状元素: 设置左右margin值为auto; 不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center; 通用方案: flex布局，对父元素设置display:flex;justify-content:center; 垂直居中 垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案也是不同的。 父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height 父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle; 块状元素:设置子元素position:absolute并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto; 通用方案: flex布局，给父元素设置

属于网页布局设计技术

由 巧了我就是萌 提交于 2019-12-23 18:17:17
对于前端开发工程师来说，对于网页设计中，进行相应的布局，其布置的方式多种多样，对于不同的情况有不同的处理方法，但是很多设计师并不了解这些情况，接下来，小编带领大家了解 网页布局设计 五种方式。 一、静态布局 在传统的网页设计中，网页上所有元素的大小都是px。 1. 布局特征 无论浏览器的确切大小如何，页面的布局始终与第一次编写代码时相同。常规的PC站点是静态布局的，具有最小宽度，因此，如果宽度小于此值，则显示滚动条，如果宽度大于此值，则显示内容居中和背景。这种设计在PC上很常见。 2. 设计方法 PC:中心布局，所有样式使用绝对宽度/高度(px)，设计一个布局，在屏幕的宽度和高度已经调整，使用水平和垂直滚动条检查覆盖部分; 移动设备:建立一个单独的移动网站，设计一个单独的布局，并使用一个不同的域名，如wap。或者m。 优点:这种布局对设计师和CSS作者来说都是最简单的，并且没有兼容性问题。 缺点:很明显你不能改变用户的屏幕尺寸。目前，大多数门户网站、大多数企业PC广告网站都采用了这种布局。固定像素大小的web页面是匹配固定像素大小的显示的最简单方法。然而，这种方法不是一种完全兼容的方式来创建未来的web页面。我们需要一些方法来适应未知的设备。 二、流式布局 液体版面(也称为“流体”)的特点是页面元素的宽度根据屏幕分辨率进行调整，但总体版面不变。代表性围栏系统(网格系统)。 例如

左边固定 右边自适应

由 青春壹個敷衍的年華 提交于 2019-12-23 02:00:20
1.css display flex 和 flex-flow:now； .container{display: flex;display:-webkit-flex;flex-flow:now;} .left{width:200px;height: 100px;} .right{flex:1;-webkit-flex:1;} <div class="container"> 　　<div class="left">222</div> 　　<div class="right">2222222</div> </div> 2.float:left .left{width:200px;height: 100px;float:left;} .right{margin-left:200px;} 3.position:absolute .left{width:200px;height: 100px;position:absolute;left:0;top:0;} .right{margin-left:200px;} 4.display:table .container{display: table;width:100%;} .left{width:200px;height: 100px;} .right,.left{display:table-cell;} 5 width:calc(100% -

自适应布局webkit-box的用法

由 泪湿孤枕 提交于 2019-12-22 02:15:22
Flexible Box Model(灵活盒子模型) 在平常的web横排布局中，会经常用到float或display:inline-block，但是在多种不同宽度的移动设备的自适应布局中用的话，还得设置百分比宽度和考虑清除浮动。而Flexible Box Model可以自动计算宽度和自适应，更加方便。 Flexible Box Model有几个属性： 1、box-orient 在父元素上设置 子元素排列 vertical (垂直) or horizontal（水平） 2、box-flex 在子元素上设置 兄弟元素之间比例，仅作一个系数 3、box-align 在父元素上设置 box 排列 4、box-direction 在父元素上设置 box 方向 可设置reverse排序相反 5、box-flex-group 在子元素上设置 以组为单位的流体系数 6、box-ordinal-group 以组为单位的子元素排列方向 7、box-pack 在父元素上设置 可设置center和vertically 以下是关于flexible box的几个实例 1、三列自适应布局，且有固定margin <style> *{ margin:0; padding:0; } .wrap { display: -webkit-box; -webkit-box-orient: horizontal; }

iframe自适应高度？

由 僤鯓⒐⒋嵵緔 提交于 2019-12-21 12:07:33
1. 下载代码 jquery-auto-iframe-height 或者 下载 2. 使用demo 代码 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" lang ="en" > < head > < meta http-equiv ="content-type" content ="text/html; charset=utf-8" /> < title > jQuery » iFrame Sizing </ title > < link rel ="stylesheet" type ="text/css" media ="all" href ="css/master.css" /> < script type ="text/javascript" src ="js/jquery-1.4.3.min.js" ></ script > < script type ="text/javascript" src ="js/jquery.iframe-auto-height

python，opencv利用自适应阈值分割法实现微滴图像分割并计数

由 ε祈祈猫儿з 提交于 2019-12-20 17:38:35
import cv2 import numpy as np blockSize = 31 value = -1 #count = 0 #液滴总数 area = 0 #单个液滴面积 min_area = 40 max_area = 1500 #闭运算 def close(image): kernel = cv2.getStructuringElement(cv2.MORPH_ELLIPSE,(5,5)) iClose = cv2.morphologyEx(image,cv2.MORPH_CLOSE,kernel) return iClose #开运算 def open(image): kernel = cv2.getStructuringElement(cv2.MORPH_ELLIPSE,(16,16)) iOpen = cv2.morphologyEx(image,cv2.MORPH_OPEN,kernel) return iOpen #查找轮廓 def findConftours(srcImage,binary): contours,hierarchy = cv2.findContours(binary,cv2.RETR_TREE,cv2.CHAIN_APPROX_SIMPLE) cv2.drawContours(srcImage,contours,-1,(0,0,255),3)

移动前端开发技巧摘录

由 末鹿安然 提交于 2019-12-20 17:20:25
1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> 第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览； 第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式； 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码； 2、 HTML5 标签的使用 在开始编写webapp时，哥建议前端工程师使用HTML5
订阅 自适应