目录 移动端开发的基本观点 像素基础知识 viewport原理解析 弹性布局 响应式设计 1rem的运用 移动端的事件 zepto库的使用 移动端开发的基本观点 移动端开发的意义移动端用户使用量 -> 市场需求 -> 市场供给 -> 公司需要移动端开发人才 -> 工资高，就业易 -> 涌现大波程序猿 ...
分类：
移动开发 时间：
2020-03-22 10:52:25
阅读次数：
97
前段时间我刚讲了flex布局中的弹性布局，今天我就再来讲讲网格布局。 网格布局相对于弹性布局个人觉得较为简单， 作用在容器上的： display : grid grid-template-columns : 设置列数 grid-template-rows : 设置行数 fr单位 repeat()方法 ...
分类：
Web程序 时间：
2020-03-14 18:30:52
阅读次数：
84
传统布局与flex布局 传统布局 ：兼容性好；布局繁琐；局限性，不能在移动端很好的布局。 flex 弹性布局 ：操作方便，布局极为简单，移动端应用很广泛；PC 端浏览器支持情况较差；IE 11或更低版本，不支持或仅部分支持。 布局原理 flex 是flexible Box 的缩写，意为"弹性布局"， ...
分类：
移动开发 时间：
2020-03-09 23:50:24
阅读次数：
91
常见的布局方案 固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸； ? 可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局； ? 弹性布局：以百分比作为页面的基本单位，可以适应一定范 ...
分类：
其他好文 时间：
2020-03-08 15:39:22
阅读次数：
110
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 弹性布局嵌套: 1，谨记：由外向内进行设置弹性盒子。先设置外部弹性布局，然后在设定里面的布局即可。 </title> </head> <style> /* 1 ...
分类：
其他好文 时间：
2020-03-01 14:31:27
阅读次数：
80
根据语法添加的位置不同分为两部分：一为语法在父容器上的，二为语法在子容器上的。 以下是我在逆战班学习之后自己的理解 1. 语法是添加到父容器上的？ 1).display : flex; 设置盒子 2).flex-direction: 布局的排列方向 （主轴排列方向） row; 默认值，显示为行。方向 ...
分类：
Web程序 时间：
2020-02-29 00:25:43
阅读次数：
90
最近想写一些博客，顺便复习一些自己的基础知识所以想到说说自己对flex布局的一些理解 flex意思为“弹性布局”，是移动端开发必备的属性简洁、快速，为盒状模型提供了最大的灵活性。 flex的属性 属性和说明 1 flex-direction //决定item的排列方向 2 flex-wrap： // ...
分类：
Web程序 时间：
2020-02-28 14:01:41
阅读次数：
79
移动端布局 最近写vue项目，已经忘了移动端布局，今天复习了一下弹性盒；o(╥﹏╥)o 百分百布局 rem布局 响应式布局 弹性布局 怪异盒模型 box sizing：以特定的方式定义匹配某个区域的特定元素。 conten box：标准盒模型；宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元 ...
分类：
Web程序 时间：
2020-02-26 21:14:30
阅读次数：
87
目录： 1.立方体2.动画3.设置动画的一些属性4.案例：无缝滚动5.web字体6.弹性布局7.多列布局8.弹性布局9.案例：伸缩盒子的flex属性的应用案例（菜单个数不限）10.伸缩盒子的align-items属性 设置侧轴对齐方式11.案例：伸缩盒子，宽高自适应 1、立方体 *transform ...
分类：
Web程序 时间：
2020-02-24 10:00:12
阅读次数：
71
2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 行内元素也可以使用 F ...
分类：
其他好文 时间：
2020-02-21 12:47:42
阅读次数：
66
