自适应 | 易学教程

webapp开发基础

阅读更多关于 webapp开发基础

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

移动端技巧

阅读更多关于移动端技巧

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

css深入理解之overflow

阅读更多关于 css深入理解之overflow

第一回 overflow基本属性 overflow基本属性 visibel hidden scroll auto inherit overflow-x和overflow-y overflow-x和overflow-y设置一样的值，等同于overflow。如果不同，其中一个赋予visibel，auto，另一个赋值visibel，auto ，hidden。则会被重置为auto。作用的前提 1.非display：inline水平！ 2.对应方位的尺寸限制，width/height/max-width/max-height/absolute拉伸 overflow：visibel妙用 IE7浏览器下，文字越多，按钮两侧padding留白就越大。给所有按钮添加css样式 overflow：visible 第二回：overflow与滚动条滚动条出现的条件 1.overflow：auto/overflow:scroll 有些元素自带滚动条 <html> <textarea> body/html与滚动条无论什么浏览器，默认滚动条均来自html!而不是body标签 ie8+ html{overflow:auto} 所以，如果我们想要去除页面默认滚动条，只需要：html{overflow:hidden} body/html与滚动条-js与滚动高度兼容写法 var st = document

css实现左边div自适应宽度，右边宽度适应左边

阅读更多关于 css实现左边div自适应宽度，右边宽度适应左边

利用bfc：右边盒子触发bfc，使其不与浮动盒子区域重叠，因此会重新计算宽度。 1 <style> 2 .box{ width: 900px; margin: 0 auto; background-color: #eee; } 3 .left{ min-width: 200px; float: left; background-color: yellow; height: 60px;} 4 .bfc { background-color: green; } 5 .right{ display: inline-block; margin-left: 20px; background-color: red; height: 60px;} 6 </style> 7 <div class="box"> 8 <div class="left"> 9 我是自适应宽度盒子，min-width:200px 10 </div> 11 <div class="bfc"> 12 <div class="right"> 13 我是自适应宽度，铺满剩下宽度 14 </div> 15 </div> 16 </div> 效果如图补充一下：　　BFC翻译过来是块级格式化上下文，和haslayout比较相似，但haslayout是旧版本IE下的一个专有属性，表示元素自己对自身的内容进行组织和计算

《Graph WaveNet for Deep Spatial-Temporal Graph Modeling》论文解读

阅读更多关于《Graph WaveNet for Deep Spatial-Temporal Graph Modeling》论文解读

基于时空图采用Graph WaveNet建模，其能够有效的处理大范围时间序列的时空图数据。在该模型架构中，主要包括两个模块，分别为GCN和TCN。两个模块融合获取时间空间的依赖关系。该模型的框架如下：目录一、本论文的创新点如下：二、方法： 2.1问题定义： 2.2 图卷积层（GCL） 2.2.1 自适应的邻接矩阵 2.3时间卷积层（TCL） 2.3.1 Gate TCN 2.4 Graph WaveNet的实验一、本论文的创新点如下：构建能够保留其隐含空间关系的自适应邻接矩阵。自适应邻接矩阵在没有先验知识的前提下，从数据中挖掘隐含的图结构。提出了同时高效获取时空依赖关系的框架，该框架的核心思想是将扩张因果卷积与图卷积融合，进而每个图卷积层能够处理在不同细粒度下，由扩张因果卷积提取的每个节点信息的空间依赖关系。二、方法： 2.1问题定义：图G=(V,E)，其中，V为图的节点集合，E为边的集合。邻接矩阵A，如果两点之间有连线，则Aij为1，否则为0。在每一时间步t，图G的动态特征矩阵为Xt。给定图G及其历史步长S的图信号，我们的问题是学习函数f来预测下一T时间步的图信号。该种映射关系如下公式（1）所示： 2.2 图卷积层（GCL）在给定结构信息下，利用图卷积来提取节点特征是非常重要的一步。相关的文献中，图卷积层定义方式不同，在【Kipf and Welling,

Robust Video Super-Resolution with Learned Temporal Dynamics

阅读更多关于 Robust Video Super-Resolution with Learned Temporal Dynamics

发表在ICCV2017。帧间的时间关系，帧内的空间关系。主要有两个工作：时间自适应网络和空间对齐网络。可以看到空间对齐网络是时间自适应网络的预处理阶段，将对齐的视频帧和参考帧作为时间自适应网络的输入。时间自适应网络主要包括两个部分：SR推断分支和时间调制分支，SR分支采用ESPCN作为对不同数量的连续视频帧超分处理的方法，时间调制分支是为了对每个推断的分支生成像素级的权重图，最后将两个分支的结果对应点乘并聚合。两个分支的网络结构都是一样的，只是时间调制分支是将最长的帧序列作为输入。空间对齐网络首先将源帧和目标帧输入到定位网络去预测空间变换参数，然后在空间变换层应用这些参数去将LR图像进行对齐。定位网络有两个卷积层，每个卷积层有32个9*9大小的卷积核，并且有核大小为2，步长为2的最大池化层，然后是两个全连接层，依次有100个结点和2个结点，回归得到两个变换参数。实际是在块级别进行训练，以便更好地进行运动建模，并且只保留了块的中心区域，避免在变换后出现边界附近的空白区域。在采用光流对齐时使用的是rectified光流对齐避免插值导致模糊和伪影。在预测参数和生成最后的HR视频帧的时候使用了MSE损失。在训练时使用的是联合学习：来源： CSDN 作者： Aray1234 链接： https://blog.csdn.net/Aray1234/article

布局二：左边固定右边自适应

阅读更多关于布局二：左边固定右边自适应

<!DOCTYPE html> <html> 　　<head> 　　　　<meta charset="UTF-8"> 　　　　<title>左边固定右边自适应</title> 　　　　<style type="text/css"> 　　　　　.out{ 　　　　　　　　width: 90%; 　　　　　　　　margin: 0 auto; 　　　　　　　　height: 300px; 　　　　　　　　/*background: yellow;*/ 　　　　　　　　position: relative; 　　　　　　　} 　　　　　.left{ 　　　　　　　　width: 200px; 　　　　　　　　background: rgba(255,0,0,0.5); 　　　　　　　　height: 200px; 　　　　　　　　/*float: left;*/ 　　　　　　　　position: absolute; 　　　　　　　　left: 0; 　　　　　　　　top: 0; 　　　　　　} 　　　　　.right{ 　　　　　　　　height: 500px; 　　　　　　　　background: blue; 　　　　　　　　margin-left: 200px; 　　　　　　　　/*float: right;*/ 　　　　　　} 　　　　</style> 　　</head>

页面高度自适应

阅读更多关于页面高度自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>IE6 CHROME测试通过其他么条件未测试</title> <style type="text/css"> <!-- html,body{height:100%; margin:0px;} #mainbody{width:100%; height:100%;background-color:#33CCCC;} #top{ width:100%; height:100px; background-color:#666; position:relative; z-index:5; } #content{ height:auto; top:100px; bottom:30px; width:100%; } #buttom{ position:absolute; width:100%; height:30px; background-color:#f06;

rem自适应布局的回顾总结

阅读更多关于 rem自适应布局的回顾总结

使用 rem 实现自适应布局，应该算是当前移动前端的一大趋势，有些人对此还有点迷惑，搞不懂 rem 是如何实现自适应布局，如何根据设计稿来调整 rem 的值？rem布局如何用雪碧背景图片？rem一定要加载 JS 吗？rem的根 html font-size设置为多少合适？看看这篇文章，也许能帮到你。这些问题整理来自之前发表过的文章，细心的读者也可以自己翻翻之前的内容找到答案，本文统一给个回复，如果对你有用，还请点个赞，谢谢! rem自适应原理 rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。更多介绍请看这篇文章： rem是如何实现自适应布局的。 rem的值目前有两种，一种是根据 js 来调整html的字号，另一种则是通过媒体查询来调整字号。使用js ;(function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var tid; var rootItem,rootStyle; function refreshRem() { var width = docEl.getBoundingClientRect().width; if

自适应网页设计（Responsive Web Design）

阅读更多关于自适应网页设计（Responsive Web Design）

自适应网页设计（Responsive Web Design）　　随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？　　手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。　　很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？一、"自适应网页设计"的概念　　2010年，Ethan Marcotte提出了 "自适应网页设计" （Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。

订阅自适应