互联网上的自适应方案到底有几种呢？就我个人实践所知，有这么几种方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用rem 1. 简单问题简单解决 我觉得有些web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iph ...
分类：
移动开发 时间：
2018-06-07 17:05:12
阅读次数：
216
简介 在移动端开发中，通讯录是个很常见的需求。 通讯录通常要实现以下功能 首字母导航 滚动到一定位置首字母固定 "在线通讯录demo" 布局 通讯录是典型的上下两栏布局，上面是header，下面是内容区，我们这里采用flexbox来实现。 OK。上面的代码已经足够定义一个页面的雏形， 高度44, 占 ...
分类：
其他好文 时间：
2018-06-06 21:57:17
阅读次数：
3899
1.Flexbox布局： 2.Bootstrap栅格布局 一共12格，分成3块，每块占4列。居中的内容写在中间的那一块。 3.圣杯/双飞翼（水平自适应居中的基础上） 第一步：居中的div写在最前面， 撑满一整行。三个div都向左浮动 第二步：让三个div显示在同一行 第三步：让中间的div能够自适应 ...
分类：
其他好文 时间：
2018-06-06 01:01:08
阅读次数：
172
原文链接](http://www.cnblogs.com/yaliu/p/5190957.html) 浮层水平垂直居中方法 （一）利用绝对定位与transform 将父元素定位(relative)，子元素如下 （二）利用flexbox ...
分类：
Web程序 时间：
2018-06-04 19:14:16
阅读次数：
255
display: -moz-box; /*firefox*/ display: -ms-flexbox; /*IE10*/ display: -webkit-box; /*Safari*/ display: -webkit-flex; /*Chrome*/ display: box; display... ...
分类：
其他好文 时间：
2018-06-04 16:37:22
阅读次数：
172
总结下国际范儿的meta标签 <meta name="A game made to inspire developers to use GSAP, ES6 and Flexbox" /> <meta name="twitter:card" content="COLORON GAME: inspiri ...
分类：
Web程序 时间：
2018-05-30 21:25:17
阅读次数：
1375
一.W3C各个版本的flex 2009 version 标志：display: box; or a property that is box { } (eg. box pack) 2011 version 标志：display: flexbox; or the flex() function or ...
分类：
其他好文 时间：
2018-05-27 19:42:06
阅读次数：
229
第1章 课程介绍介绍产品的功能和用途，课程内容安排，建立开发环境和必要的开发工具介绍第2章 用 Angular Material 组件打造页面对 Angular 官方组件库 -- Angular Material -- 进行逐步学习，使用 Sidenav 和 flexbox 进行页面布局。学习表单常 ...
分类：
其他好文 时间：
2018-05-27 18:37:13
阅读次数：
382
弹性盒模型flexBox 弹性盒模型是c3的一种新的布局模式 它是指一种当页面需要适应不同屏幕大小以及设备类型时，确保元素有恰当行为的布局方式。 引入弹性盒模型布局的目的是提供一种更有效的方法来对一个容器中的子元素进行排列、对齐和分配空白空间。 兼容性 IE11 弹性盒模型内容 弹性盒模型由弹性容器 ...
分类：
Web程序 时间：
2018-05-08 22:22:03
阅读次数：
225
一、Floatfloat 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 二、Position2.1、position: staticstatic定位是HTML元素的默认值，即没有 ...
分类：
Web程序 时间：
2018-05-06 22:18:20
阅读次数：
723
