移动web开发+前端框架bootstrap相关笔记（一）

1.定时器设置的时间如果和过渡的时间相等或者小于过渡的时间，会导致本次过渡还没有结束，下一次过渡又来了，会导致过渡结束时的事件无法被触发。


2.代码的通用性
◆dom元素的值【
◇先获取dom元素，然后再根据dom元素来获取宽度、子元素个数、默认的样式等。
◇
◇
◇
◇
◇
】
◆不要再代码中出现magicNumber【
◇不要在代码中写死具体的数值，如 element.style.transition='all .3s';，distance+=10，字符串和数字都是写死的，这样不好。
◇对于代码量足够大的项目，如果大量使用magicNumber 那么维护起来就是致命的。
◇实际开发中 在代码最开始的时候 定义一大堆的变量
◇如果是写的较为规范的js 代码 在最开始的时候一般都是定义变量。
◇
◇
】


3.在移动端的浏览器中的click事件有延时效果
◆会延迟200+ms。
◆为了能够提升用户体验，能够实时触发，一般会封装一个叫做tap 的方法，无论是在移动端还是pc端，都能够进行手指快速点击
◆touch的事件只有三个，touchstart（手指触摸屏幕时触发）、touchmove（手指在屏幕上移动时触发）、touchend（手指离开屏幕时触发），左右滑动，长按都是封装出来的。
◆封装tap事件【
◇tap原理：手指点上去，不移动，快速松开
☆touchmove事件在手指不在屏幕上移动时不会触发的，只要能执行了这个事件，tap就默认认为失效了，所以不移动的逻辑可以在这个事件中处理。
◇首先使用touchstart记录开始时间，然后使用touchend记录结束时间，计算差值。
】


4.console.log() 是十分消耗性能的，所以该方法 只会出现在 测试的时候，项目上线了，会去掉console.log()。


5.手机测试移动端的页面
◆比较普通的方式：直接拷贝（通过手机qq发送）到手机上，然后通过手机浏览器运行。
◆公司里：会有一个专门的测试服务器，写好了上传即可。
◆wamp方式：配置完毕之后，将自己的移动站丢到根目录中，保证手机跟电脑在同一个局域网（连着同一个wifi），然后在手机上访问这个ip地址就可以了。


6.当精灵图太过于大，你可以使用很多方法进行裁剪获取其中一部分，如使用background-size让精灵图变小一点，然后使用background-origin:设置精灵图从那个区域开始，之后再使用background-clip:设置从哪个区域开始裁剪，虽然说使用background-position:能够很精确的进行定位，但是不够稳定，如，你的标签如果设置了padding，那么你定位的元素区域就更加的大了，但是使用以上的方式可以有效的进行化解这种情况，比如设置background-origin:content-box,和background-clip:content-box,能够让你定位的区域不去计算padding，只计算实际大小，并且如果你配合box-sizing那么就更加灵活了，设置box-sizing:border-box,就能够让你的盒子中的border和padding对内容进行压缩了，真正的内容就是conten-box了。


7.a标签是行内标签，宽度大小由内容决定，所以当你把它放到一个块儿级容器中的时候，如果想让它填满整个容器，可以设置display:block;width100%;height:100%;


8.响应式的基本概念：针对所有的设备，目的是开发一次即可，会根据设备的屏幕尺寸改变而改变布局。


9.响应式的技术选取
◆老项目：【
◇推出的时候手机还没有今天这么流行。
◇重新开发一个移动端的站点。
】
◆新项目：【
◇直接做响应式的站点
◇
◇
◇
】
◆性能考虑：【
◇每个平台都有针对的项目是最好的选择。
◇在时间和金钱允许的情况下，各开发一个版本是最好的。
】
★响应式网站的缺点：【
◇代码较多
◇维护较为复杂
】
◆工作中是否选用：【
◇看上级（组长、技术经理）的安排来选择项目使用的技术。
◇
】
开发时间：【
◇开发时间是快于1+1
◇
】


10.媒体查询：media
◆媒体查询的基础语法【
//当设备的屏幕尺寸最大值在1000px以内的时候使用大括号中的样式
 @media screen and (max-width:1000px ) {
            body {
                background-color: red;
            }
        }
//当设备的屏幕尺寸最小值在500px以上的时候使用大括号中的样式
        @media screen and (min-width:500px){
            body {
                background-color: green;
            }
        }
//以上两个媒体查询添加的样式有冲突，所以后面的会在某些时候层叠掉前面的，如在屏幕在500px以上时就一定是绿色的，虽然最上面的媒体查询也写了样式，但是后面的层叠掉前面的了，所以在1000px以内并且还要在500px以下才会显示绿色。
】，and关键字和括号之间必须要写空格，不然就会无效，空格可以多写，但是不能不写。
★媒体查询与响应式布局的关系：先有媒体查询再有响应式布局。
◆媒体查询可以实现动态的进行增加或者修改样式，以前使用js来判断然后再增加或者修改样式，现在通过媒体查询就可以做到，所以才说现有媒体查询再有响应式布局。


11.前端框架：
★ 前端框架的概念【
☆别人写好的，有一堆预定义的代码（html、css、一部分封装的js）
☆可以直接使用（直接使用定义好的class、直接使用它定义好的 html层次结构（也称组件）、js插件）
☆也可以改参数使用  
☆
】


12.bootstrap使用与介绍
◆bootstrap版本：【
◇2.x版本：早期的，目前很难看到了
◇3.x版本：目前比较流行 
◇4.x版本：更为侧重于移动端
】
◆bootstrap 模板：【
◇ <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>，这是html5新语义标签的兼容性js
◇ <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>，这是在低版本ie中 实现媒体查询的js
◇
】
◆bootstrap 小技巧：【
◇其实原理就是添加别人定义好的类，那些类有设置css样式或js脚本的事件
◇那些类都是有规律的，按照规律去记就行了
◇lg表示大（large）,md表示中等大小（middle），sm表示小（small），xs表示超小（extra small）等等。
☆一个好的框架不是因为越难才越受欢迎，而是越好用越受欢迎，封装框架的人将你某一时认为很难的东西都封装起来了，你只需要简单的去找规律然后简单的使用即可，其实到后来你还是会认为原理也是很简单的，只是时间问题。
】
◆bootstrap 栅格系统：【
◇.container（固定宽度）：row、column，这个布局是，在某个范围内 取值是一定的。
◇.container-fluid（100%宽度）：row、column，这个局部是，根据父盒子进行缩放。
◇默认将一行分为12份，在col后面对应的数字表示该该元素占这一行的几份，如col-md-1（占一份）。
◇如果一行超过了12份就会换行。
◇如果想要在不同的屏幕宽度上 实现不同的布局，可以通过添加col-lg（大屏幕）、col-md（中等屏幕）、col-sm（小屏幕）、col-xs（超小屏幕）来进行区分。
◇如果只写了 col-lg 那么会在小于1200的宽度下独占一行。
◇如果只写了 col-lg col-md 那么会在小于992的宽度下 独占一行
◇如果只写了 col-lg col-md col-sm 那么在小于768的宽度下 独占一行
◇如果只写了 col-lg col-md col-sm col-xs 会在对应的屏幕宽度下 使用设置的值，不会独占一行了
】