一、理论
1
//对移动端轻按起作用
a{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;}
2
//设置盒子模型，加margin/padding不影响盒子本身的尺寸
//非固定像素的流式布局可以有效防止溢出
body{box-sizing:border-box;-webkit-box-sizing:border-box;}
3
input{
outline: none;
border:none;
border:1px solid #ccc;
}
input{
resize:none;
appearance:none;
-webkit-appearance:none;
}
4
//中间搜索框的缩放处理，左右两边必须固定定位
.searchBox{
margin:0px 100px; or padding:0px 100px;
height:100%;
background-color:red;
}
5
伪元素
.same_searchBox::before{
content: "";
width: 27px;
height: 23px;
position: absolute;
background-color: #f7f7f7;
border-radius: 10px;
left: 80px;
top: 9px;
/* background-size: 200px 200px; */
}
6
居中
.same_bannerIndicator{
width: 128px;
height: 10px;
position: absolute;
left: 50%;
bottom: 5px;
transform: translateX(-50%);
}
7
消除文本基线值
img{display:block;} or {vertical-align:botton} or {font-size:0}
8
标准适配方案:
1)网页宽度必须和浏览器一致；
2)默认显示的缩放比例和PC端保持一致；
3)不允许用户自行缩放网页；
跳转适配怎么实现?
9
把更多物理像素点压缩到px里
屏幕像素比：一个px单位的屏幕能放几个物理像素？
device-width的计算公式为：设备的物理分辨率/(devicePixelRatio * scale)
通过js设置viewport的方法如下:
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
动态计算html的font-size:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
@{name}: @px / @baseFontSize * 1rem;
}
10
在移动端不建议jQuery，而是zepto.js或h5的原生api
11
设置css属性 -webkit-user-select:none; 控制用户不可选择文字；
12
区域性 overflow: scroll | auto 滚动时使用原生效果：-webkit-overflow-scrolling: touch （ios8+，Android4.0+）
13
单行、多行溢出省略：
/* 单行省略 */
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 多行省略 /
.ellipsis-2l {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; / 数值代表显示几行 */
-webkit-box-orient: vertical;
}
14
垂直居中常用方法：
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
/* css样式 */
/* (1) 模仿单行文字居中的方式 */
.wrap {
width: 200px;
height: 80px;
line-height: 80px;
}
.box {
display: inline-block;
vertical-align:middle;
}
/* (2) 已知宽高，通过position:absolute; */
.wrap {
width: 200px;
height: 200px;
position: relative;
}
.box {
width: 100px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -40px;
}
/* (3) 未知宽高，通过css3属性 transfrom */
.wrap {
width: 200px;
height: 200px;
position: relative;
}
.box {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
/* (4) 通过flex布局 */
<body>
<div class="wrap flexbox flexbox-center flexbox-middle">
<div class="box"></div>
</div>
</body>
/* css样式 */
.flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
/* 水平居中 */
.flexbox-center {
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
/* 垂直居中 */
.flexbox-middle {
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
15
retina屏幕实现真正的1px边框： //http://caibaojian.com/mobile-web-app-fix.html
<body>
<div class="box retina-border rt-bd-all"></div>
</body>
/* css样式 */
.box {
width: 200px;
heigth: 100px;
box-sizing: border-box;
border: 1px solid #aaa;
}
/* 去掉元素原有的边框 */
.retina-border {
position: relative;
border: none;
}
/* 通过设置伪元素放大到2倍的宽高，设置1px边框，再缩小1倍，以达到0.5px边框的效果*/
.retina-border:after {
content: '';
display: block;
width: 200%;
height: 200%;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
border: 0px solid #aaa;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(.5);
transform: scale(.5);
}
.rt-bd-all:after {
border-width: 1px;
}
/* 如果只是想设置一条边框，可以这样改一下，以此类推 /
<body>
<div class="box retina-border rt-bd-b"></div>
</body>
/ css样式 */
.tr-bd-b:after {
border-bottom-width: 1px;
}
.tr-bd-t:after {
border-top-width: 1px;
}
.tr-bd-l:after {
border-left-width: 1px;
}
.tr-bd-r:after {
border-right-width: 1px;
}
16
rem-适配，常用的适配方案有：
1)伸缩布局flex
2)流式布局 百分比
3)响应布局 媒体查询 (超小屏设备的时候：流式布局)
4)共同点：元素只能做宽度的适配（排除图片，图片不做宽度适配）
5)适配方案rem: 宽度和高度都能做到适配（等比缩放）
控制html上字体大小(100px易于换算)去控制以rem为单位的其它尺寸；
当前rem基准值 = 当前设备宽度/设计稿宽度 * 预设基准值
比如320px/640px *100px = 50px; 所以当前设备的rem基准值必须改成50px;
17
如何调整基准值：
js换算或媒体查询（推荐）
18
end的作用：
('.wjs_book')
$("p").find("span").end().css("border", "2px red solid");//选择所有段落，找到这些段落中的 span 元素，然后将它们恢复为段落，并把段落设置为两像素的红色边框
end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');
第二个 find() 查找的是 <ul class="first"> 内的 '.bar' ，而不是在列表的 <li class="foo"> 中查找
而 end() 方法用来关闭代码块
andSelf();
http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html
jQuery速度再快，也无法与原生的javascript方法相比。所以有原生方法可以使用的场合，尽量避免使用jQuery。
以最简单的选择器为例，document.getElementById("foo")要比$("#foo")快10多倍 http://jsperf.com/id-vs-class-vs-tag-selectors/46
二实战
2.1
bg的开发流程：
首先，还是得把html架构搭建好；
其次，设计一定要简洁，如何动手coding;
再次，盒子模型对布局的影响非常大，要特别注意；
2.2
首先要设定一个框架，html的框架：
