响应式和原生
响应式开发： 一套代码运行多个端； 优点:开发快、适配好； 缺点：加载速度慢；纯原生移动web开发： 一套代码运行一个端； 优点: 加载速度快； 缺点：开发慢、适配差； 应用场景 : 响应式开发用在一些新建的网站(PC和移动同时出来)； 纯原生移动web开发一般会用在一些已经有PC端上线的网站，再次开发移动端； tips：移动端完美支持H5C3，不需要考虑兼容性问题；
库和框架的区别
jquery : 库，便捷的DOM (你想实现什么功能就调用什么方法)(主导者是你 你调用库)；Bootstrap : 框架、界面工具集，框架是他来控制你 (框架制定好了一系列规则 你按照规则填坑) (主导者是框架 是框架调用你)(会用就行)；
引包的顺序 （使用less预编译工具）
1. 先引入第三方的框架；2. 再引入自己的文件；3. CSS放到head里面引入(有些特殊的JS文件对页面渲染有作用的要放到head中)；4. js放到body结束标签是上面引入；5. 引入less文件 要先引入less文件 同时less文件必须声明rel="stylesheet/less"；6. 要引入一个编译less文件的编译器文件less.js 编译好了会在当前页面嵌入css代码进来；7. 注意要使用HTTP协议访问页面 同时 编译器less.js要放到less文件后面引入；<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> <link rel="stylesheet/less" href="css/index.less" /> <script src="lib/less/less.js"></script></head><body> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/index.js"></script></body>tips：1、rel="stylesheet/less" href="less/index.less"，运用less预处理语言进行编写css，可以提高效率； 2、要使用less，还需要引入less.js，为less的编译器； 3、要使用bootstrap，需要一个bootstrap.css，还需要一个bootstrap.js； 4、而bootstrap.js依赖于jQuery，因此在这之前还要引入jquery.js； 5、为了兼容移动端，需要加入viewport，视口，快捷键 meta:vp+tab；
bootstrap框架
1、栅格系统 col-md-4 col-md-6 col-lg-3 (总份数为12份)； xs（超小） sm（小屏） md（中屏） lg（大屏）2、吸顶 Affix3、Carousel（轮播图）4、字体图标的定义，先定义，后引用； @font-face{ font-family : ""; src : url(""); } 5、JS插件，模态框，写在body的底部即可， 模态框和按钮绑定，在按钮按下时，模态框将会弹出；6、全局CSS样式，响应式工具， 通过给元素添加表格中对应的class名，可以控制页面元素在不同屏幕宽度下的隐藏和显示；7、Nomalize.css，是bootstrap提供的初始化的css文件；
Swiper插件
用于轮播图； 引入swiper的css.js文件Zepto框架，Zepto.js； 使用了Zepto就不用jquery，二者的$符号会冲突； 常用模块：1、zepto.js zepto核心包； 2、selector.js 高级选择器包； 3、fx.js zepto动画包； 4、touch.js 触摸事件包；tips:1、移动页面中，左右结构，要使得右边自适应， 左边，float：left； 右边，overflow：hidden； 2、在移动端，用tap事件来取代click事件，具有300ms的延迟； 3、em和rem， em（element），表明了父元素font-size的倍数； rem（root element），表示根元素的font-size，即html元素，0.5em=50px；
一些细节
（1）、图片对齐 vertical-align:center;（2）、opacity会影响到子元素的透明度，rgba只会应先到当前元素的透明度；（3）、p:first-of-type{}，选中当前元素的父元素旗下的第一个p元素； 调整高度可以在子元素中进行，父元素不定死高度，用子盒子撑开；（4）、移动端的input要清除边框，border:0； 移动端不需要考虑兼容性，随便搞； 流式布局，使用百分比进行布局，适用于不同宽度的屏幕；（5）、在响应式开发中，设置其宽度max-width和min-width；（6）、伪元素清除浮动； eg: .clearfix::before{ content:""; display:table; clear:both; }（7）、表单元素都写在form标签中，且每一个input应该设置name值，在提交表单时，name的值将会作为键进行提交；（8）、localStorage里面存储的值只能为字符串类型； SessionStorage和cookie也一样；（9）、CSS3设置响应式布局 eg: @media (width:1440px){ .container{ 在内部写该屏幕宽度情况下的样式； } } eg: @media (min-width:1440px){ }（10）、CSS3设置自定义字体图标 eg: @font-face{ font-family : ""; src : url(""); }（11）、CSS3设置动画 eg: @keyframe animateName{ 0%{ transform: translate(0,0); } 25%{ transform: translate(500px,0); } 50%{ transform: translate(500px,500px); } 75%{ transform: translate(0px,500px); } 100%{ transform: translate(0,0); } }
less语法
（12）、less语法定义变量名 eg: @mainColor: #e92322; 该句段相当于js中的var mainColor = "#e92322"; color:@mainColor;（13）、less标签嵌套 eg: li{ >a{ &:hover{ } &:.active{ } } }（14）、less引入文件 eg: @import url(demo.css);
699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
