摘要：
1.响应式开发 1.1响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分尺寸区间 超小屏幕（手机) < 768px 小屏设备（ 平板) 768px ~ 992px 中等屏幕（桌面显示器） 992px ~ 1200px 宽屏设备(大桌面显示器) 阅读全文
摘要：
1.rem基础 rem单位 rem (root em)是一个相对单位，类似于em , em是父元素字体大小。. 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素( html )设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。 html 阅读全文
摘要：
flex弹性布局 1.传统布局与flex布局 传统布局 兼容性好布局繁琐 局限性，不能再移动端很好的布局 局限性，不能再移动端很好的布局 flex弹性布局 操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差 IE11或更低版本，不支持或仅部分支持 建议∶ 如果是PC端页面布局，我们还是 阅读全文
摘要：
流式布局(百分比布局) 流式布局，就是百分比布局，也称非固定像素布局。 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。 流式布局方式是移动web开发使用的比较常见的布局方式。 max-width最大宽度（ max-height最大高度) min-width 阅读全文
摘要：
6.移动端常见布局 移动端技术选型 移动端布局和以前我们学习的PC端有所区别: 单独制作移动端页面(主流) 流式布局(百分比布局) flex弹性布局(强烈推荐) less+rem+媒体查询布局 混合布局 响应式页面兼容移动端（其次) 媒体查询 bootstarp 阅读全文
摘要：
5.移动端技术解决方案 5.1移动端浏览器 移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。 我们可以放心使用H5标签和CSS3样式。 同时我们浏览器的私有前缀我们只需要考虑添加webkit即可 5.2 CSS初始化normalize.css 移动端CSS初始化推荐使用 阅读全文
摘要：
4. 移动端开发选择 4.1 移动端主流方案 1.单独制作移动端页面(主流) 京东商城手机版 淘宝触屏版 苏宁易购手机版 … 2.响应式页面兼容移动端（其次) 三星手机官网 4.2 单独移动端页面(主流) 通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开， 阅读全文
摘要：
3. 二倍图 3.1 物理像素&物理像素比 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750*1334 我们开发时候的1px不是一定等于1个物理像素的 PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同 一个px的能显示的物理像素 阅读全文
摘要：
2. 视口 视口( viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口 2.1布局视口layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS,Android基本都将这个视口分辨率设置 阅读全文
摘要：
1. 移动端基础 1.1 浏览器现状 PC端常见浏览器 360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器 UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的 阅读全文
摘要：
3. 浏览器私有前缀 浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。 1.私有前缀 -moz-∶代表firefox浏览器私有属性 -ms-:代表ie浏览器私有属性 -webkit-:代表safari、chrome私有属性 -o-︰代表Opera私有属性 2.提倡的写法 -moz- 阅读全文
摘要：
1.4 HTML5新增的表单属性 属性值说明 required required 表单拥有该属性表示其内容不能为空，必填 placeholder 提示文本 表单的提示信息，存在默认值将不显示(修改文字颜色input::placeholder{color:#fff}) autofocus autofo 阅读全文
摘要：
1.3 HTML5新增的input类型 属性值说明 type="email" 限制用户输入必须为Email类型 <br/> type="url" 限制用户输入必须为URL类型 type="date" 限制用户输入必须为日期类型 type="time" 限制用户输入必须为时间类型 type="mont 阅读全文
摘要：
1.2 HTML5新增的多媒体标签 新增的多媒体标签主要包含两个∶ 音频: <audio> 视频: <video> 使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。 1.2.1 视频 <video> HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播 阅读全文
摘要：
1.1 HTML5新增的语义化标签 语义化是指用HTML写出符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 以前布局，我们基本用div来做。div对于搜索引擎来说，是没有语义的。 <div class="hea 阅读全文
摘要：
HTML5的新特性 HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 声明︰ 1.新特性增加了很多，但是我们专注于开发常用的新特性。 ⒉基础班我们 阅读全文
摘要：
「1. 什么是HTML5」 定义：HTML5定义了HTML标准的最新版本，是对HTML的第五次重大修改，号称下一代的HTML。 两个概念： 是一个新版本的HTML语言，定义了新的标签、特性和属性 拥有一个强大的技术集，这些技术集是指：HTML5、CSS3、JavaScript,这也是广义上的HTML 阅读全文
摘要：
2.10 3D转换 2.10.1 三维坐标系 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴:水平向右―注意∶×右边是正值，左边是负值 y轴:垂直向下注意:y下面是正值，上面是负值 z轴:垂直屏幕注意:往外面是正值，往里面是负值 3D 转换知识要点 3D 位移：translate 阅读全文