移动端web开发最好用rem单位，再设置以下js，以iphone6 750*1334为基准 相当于在根html元素设置了font-size：100px 会根据移动端尺寸大小对应改变根html的font-size，从而实现对各种屏幕大小的兼容 ...
分类：
移动开发 时间：
2018-06-06 18:21:59
阅读次数：
504
vw是相对于不同屏幕大小的自适应的布局单位： 1vw相当于整个屏幕宽度的100分之1，如果给最外层div设置宽度为100vw，无论屏幕变大变小，1vw始终代表当前屏幕宽度的100/1； 因此vw在实际运用中： 对于宽度来说：设计图中当前元素宽度的px值 除以 设计图的宽度值，再乘以100后，加上vw ...
分类：
其他好文 时间：
2018-06-06 15:42:03
阅读次数：
147
Fragment的作用： Fragment的产生其实是谷歌为了解决手机端和平板端软件开发的问题，在Fragment出来之前开发安卓软件如果要同时运行在pad和手机上就得开发两个软件，有了碎片也就是Fragment之后只要开发一个软件就可以适应pad和手机，不受屏幕大小的影响。而且Fragment有自 ...
分类：
移动开发 时间：
2018-06-05 21:06:22
阅读次数：
170
移动 UI 设计的世界 ... 1、屏幕尺寸 屏幕大小，指屏幕对角线的长度，而不是屏幕的宽度或高度； 单位为英寸 如 iPhone 7 屏幕尺寸为 4.7 英寸；三星 S6 屏幕尺寸为 5.1 英寸； 2、屏幕像素密度 ppi 指每英寸屏幕搜拥有的像素数；由屏幕尺寸和屏幕里所包含的像素数量 计算出来 ...
分类：
其他好文 时间：
2018-06-01 20:40:21
阅读次数：
234
getWinSize : 获取设备屏幕大小. getVisibleSize：获得视口（可视区域）的大小，若是DesignResolutionSize跟屏幕尺寸一样大，则getVisibleSize便是getWinSize。 getVisibleOrigin：获得可视区域的出发点坐标，在处理相对位置时 ...
分类：
其他好文 时间：
2018-05-12 23:53:52
阅读次数：
912
弹性盒模型flexBox 弹性盒模型是c3的一种新的布局模式 它是指一种当页面需要适应不同屏幕大小以及设备类型时，确保元素有恰当行为的布局方式。 引入弹性盒模型布局的目的是提供一种更有效的方法来对一个容器中的子元素进行排列、对齐和分配空白空间。 兼容性 IE11 弹性盒模型内容 弹性盒模型由弹性容器 ...
分类：
Web程序 时间：
2018-05-08 22:22:03
阅读次数：
225
1、 ionic 卡片 近年来卡片(card)的应用越来越流行，卡片提供了一个更好组织信息展示的工具。 针对移动端的应用，卡片会根据屏幕大小自适应大小。 我们可以很灵活的控制卡片的显示效果，甚至实现动画效果。 卡片一般放在页面顶部，当然也可以实现左右切换的功能。 <div class="card"> ...
分类：
Web程序 时间：
2018-05-07 19:29:47
阅读次数：
232
1、文本实现在div中垂直居中 设置行高和高度一样即可实现。 2、弹性盒布局 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。弹性盒子由弹性容器(Flex container和弹性子元素(Flex ...
分类：
其他好文 时间：
2018-05-01 01:05:30
阅读次数：
166
自适应布局：不同终端上显示的文字，图片，等位置排版都是一样的，只是大小不同。 响应式布局：通过媒体查询监听屏幕大小的变化，做出响应式的改变，在不同设备可能展现不同的样式效果。 em:是相对其父元素的。 rem:相对于页面根元素，推荐使用rem。 ...
分类：
其他好文 时间：
2018-04-28 19:29:01
阅读次数：
136
导读： 弹性盒子是 CSS3 的一种布局模式，一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有适当的行为的布局方式。其中 flex 属性用于指定弹性子元素如何分配空间。 flex 属性的值 flex-grow flex-shrink flex-basis (flex-grow为扩展比率,f ...
分类：
其他好文 时间：
2018-04-05 01:12:43
阅读次数：
212
