自适应

左边定宽,右边自适应以及三栏布局

那年仲夏 提交于 2019-11-28 09:55:46
1、左边定宽,右边自适应 1.左边设置浮动,右边宽度设置100% .left{float:left} .right:{width:100%} 2.父容器设置display:flex right部分是设置flex:1 3.左设置浮动,右用cacl去补宽度计算 .left{float:left} .right:{width:cacl(100vw-200px} 4.首先修改页面结构,为自适应部分添加容器 .container, 同时改变左右部分的位置 2、三栏布局 样式: <style media="screen"> html *{ padding: 0; margin: 0; } .layout article div{ min-height: 100px; } </style> 1、浮动布局 <section class="layout float"> <style media="screen"> .layout.float .left{ float:left; width:300px; background: red; } .layout.float .center{ background: yellow; } .layout.float .right{ float:right; width:300px; background: blue; } </style> <h1>三栏布局<

Two-Stream Adaptive Graph Convolutional Network for Skeleton-Based Action Recognition

怎甘沉沦 提交于 2019-11-28 07:13:40
Two-Stream Adaptive Graph Convolutional Network for Skeleton-Based Action Recognition 摘要 基于骨架的动作识别因为其以时空结合图(spatiotemporal graph)的形式模拟了人体骨骼而取得了显著的效果。 在现有的基于图的方法中, 图的拓扑结构 是手动设置的,而且在所有层以及输入样本中是固定不变的。这样的方法在用在有层级CNN和不同输入样本的动作识别中不是最佳的。 而且骨架中的具有更多细节和判别式信息二级结构(骨骼长度、方向、骨头等)很少在现有的方法中研究使用 作者提出了自适应的双流图网络结构用来进行基于骨架的动作识别,整个网络的拓扑结构可以端到端地学习出来,这种数据驱动的图模型增加了模型的灵活性,并且并且获得了更普适更一般化的特征来适应不同的样本 另外还采用了双流的结构同时模拟一级结构和二级结构,提高了动作识别的准确率 在NTU-RGBD以及Kinetics-Skeleton两个数据集上取得了非常好的结果 总结 提出了一个自适应的图卷积网络,可以自动学习出针对不同样本的不同的拓扑结构 提出了使用节点信息和骨头信息的双流网络结构 一、引言 目前有3种深度学习方法解决基于骨架的动作识别问题,分别是:将关节点序列表示成关节点向量,然后用RNN进行预测;将关节点信息表示成伪图像

前端布局

五迷三道 提交于 2019-11-28 05:10:47
原文网址: https://www.cnblogs.com/soyxiaobi/p/9594557.html 一、静态布局(Static Layout) 1. 布局概念 最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。 2. 优点 采用的是css2之前的写法,不存在浏览器兼容性。布局简单。 3. 缺点 但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。 4. 实现方法 PC端: 最外层居中,使用固定的宽(高)度,超出部分用滚动条查阅。 例如百度首页外层body设置了一个 min-width:1000px; ,当我打开调试器的时候,底部 x轴滚动条 就出现了。 当然,它的布局比普通的静态布局要复杂地多了,比如推荐模块又是一个流式布局.... 移动端 由于静态布局不适用于手机端,所以一般都会另设计一个布局,并使用另一个域名。 例如刚刚百度的PC端我们切换成手机模拟器访问试试: 确实有点丑是吧。 我们访问一下百度的手机端页面:m.baidu.com 舒服! 再看一下最近比较'火'的京东的案例:分别访问 jd.com m.jd.com 可以发现: PC端限制了最小的宽度, 低于了则以最小宽度出现滚动条

前端 自适应布局

∥☆過路亽.° 提交于 2019-11-28 03:51:43
前端 自适应布局 CSS box-flex 属性,然后弹性盒子模型简介 https://www.zhangxinxu.com/wordpress/2010/12/css-box-flex属性,然后弹性盒子模型简介/ 自适应页面的实现方式 1.简易场景实现自适应:浮动、页面居中、元素宽度不写固定而设置百分比自动匹配大小。这样在页面宽度发生变化时,能利用以上特性实现简易的自适应效果。 2.如果实际开发中有复杂场景的需求,一般通过编写多套CSS代码,然后用 媒体查询技术 ,让页面根据不同屏幕尺寸来加载不同代码模块以实现适配不同屏幕的目的。这种方式需要编写多套代码,虽然工作量大,但对于不同屏幕尺寸的设备都有单独一套CSS代码,维护起来更方便。 3.响应式布局,响应式布局是指根据不同屏幕尺寸自动调整页面显示效果实现自适应(也要用到 媒体查询技术 )。响应式布局一般有栅格系统布局,flex布局。 bootstrap 框架的核心就是栅格系统。 (后面详细介绍栅格系统的实现方式)。 https://segmentfault.com/a/1190000015759719 Web 自适应布局你需要知道的所有事儿 https://juejin.im/post/5a22d0086fb9a0451a7631ee 来源: https://www.cnblogs.com/feng9exe/p/11390523

三栏布局的实现方式

拈花ヽ惹草 提交于 2019-11-28 01:28:15
三列布局又分为两种,两列定宽一列自适应,以及两侧定宽中间自适应 两列定宽一列自适应: 1、使用float+margin: 给div设置float:left,left的div添加属性margin-right:left和center的间隔px,right的div添加属性margin-left:left和center的宽度之和加上间隔 2、使用float+overflow: 给div设置float:left,再给right的div设置overflow:hidden。这样子两个盒子浮动,另一个盒子触发bfc达到自适应 3、使用position: 父级div设置position:relative,三个子级div设置position:absolute,这个要计算好盒子的宽度和间隔去设置位置,兼容性比较好, 4、使用table实现: 父级div设置display:table,设置border-spacing:10px//设置间距,取值随意,子级div设置display:table-cell,这种方法兼容性好,适用于高度宽度未知的情况,但是margin失效,设计间隔比较麻烦, 5、flex实现: parent的div设置display:flex;left和center的div设置margin-right;然后right 的div设置flex:1;这样子right自适应,但是flex的兼容性不好 6

响应式字体:自适应视图窗口大小的字体单位

我的梦境 提交于 2019-11-27 21:27:10
最近在学习Element UI做些响应式页面的练习,其中遇到一个问题就是字体的大小。 之前我都是用rem作为相对尺寸单位来设置字体大小的,但在移动端下显示的效果并不好。 因为rem说到底也是一个“固定”单位,它是依据根元素的字体大小来决定尺寸的。 想要个真正意义上的相对尺寸来设置字体,最后就查到了vw、vh、vmin、vmax 一个单位相于当前视图窗口大小的1%,宽度和高度是不同的,分别用(vw, vh)表示。你可以通过vmin和vmax设置最大最小值。 1vw = 当前视图窗口(viewport)1%的宽度 1vh = 当前视图窗口(viewport)1%的高度 1vmin = 1vw 或 1vh, 取决于哪个更小一点 1vmax = 1vw 或 1vh, 取决于哪个更大一点 来源: https://www.cnblogs.com/yinblog/p/11377874.html

ueditor图片自适应

南笙酒味 提交于 2019-11-27 15:56:25
1.图片上传大小限制: ueditor下config.json:修改imageMaxSize值,默认2M 2.上传图片过大时,不能自适应: ueditor下ueditor.all.js: 添加 img{max-width:100%;} 来源: https://blog.csdn.net/chengxiadenghuo/article/details/99695020

高度自适应中的高度塌陷问题

断了今生、忘了曾经 提交于 2019-11-27 12:35:58
/* *学习过程中整理的笔记 * 关于网页设置高度自适应过程中的高度塌陷问题的解决方法及解释 */ 出现的场景: 当子元素有浮动,父元素没有设置高度,或者设置的是最小高度的时候,父元素会出现高度塌陷问题。 (IE6里面一般不会出现高度塌陷问题,会自己撑开) 解决高度塌陷的方法: 方法1 :给高度塌陷的元素添加 overflow:hidden 声明。 原理:因为overflow:hidden;触发了一个BFC(独立渲染区),在BFC布局过程中:计算BFC高度的时候,里面的浮动元素也参与计算 -----(后期我学习之后再来解释BFC) 弊端:overflow:hidden会隐藏超出父元素的内容 (不过这里有些不明白,既然父元素已经设置为自适应了,里面的内容只会 撑大父元素,怎么会被隐藏呢?有别的想法的同学可以留言给我解释一下) 方法2 :给浮动元素的后面再加一个div,并给空的div设置样式{clear:both;(height:0px;overflow:hidden;)} clear:both;起到一个关闭浮动的作用,清除该div前面一个元素浮动预留的空间,使该div服从文本流,在浮动元素换行 显示,从而将父元素撑大。 /*括号内的属性只在IE6中必须加上,而其他浏览器可以不加*/ 弊端:造成代码的冗余。 方法3 :万能清除法 选择符:after{content : "."

真正解决iframe高度自适应问题

梦想与她 提交于 2019-11-27 12:10:18
1.前言 解决iframe高度自适应问题有两种方法 1. pym 2.手动设置iframe的高度 本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂 如果使用iframe时,遇到以下的需求: iframe的高度始终等于嵌入页面内容的高度,而不是屏幕的高度 右侧不允许出现两个滚动条 iframe的高度自适应不仅仅是指刚加载进来时,也有可能嵌入内容的高度会随点击变化(如:下拉菜单,左侧导航栏等) 页面可能同时嵌入多个iframe 2.contentWindow对象 *需要起个服务,不要直接在本地打开 这是个只读属性,返回指定的iframe的window对象 拿到这个对象,就可以根据正常网页的方法拿到嵌入(子)网页的文档高度,然后把值附给父页面的iframe的height。 function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.body.scrollHeight; } } }; 为了监测网页高度是否因为点击了某个下拉按钮高度变化