PC端与移动端页面适配
PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。 针对跨终端适配主要包括两种方法：
第一种是通过响应式或页面终端判断去实现一套资源适配所有终端； 主要采用jQuery+响应式布局+CSS预处理器（sass和less）； 这种方法只需要维护一套页面，成本比较低，通过响应式布局来实现适配各种终端设备；因为需要加载适配各个终端的各个资源，部分交互效果需要在页面中作终端判断，影响页面响应速度。如果图片资源为一套的话，会出现页面在超高分辨率终端设备打开时图片失真的问题第二种是通过终端判断分别调取不同的资源以适配所有终端。 采用zepto+响应式+CSS+终端适配 这种方法可以根据各种不同的终端做个性化设计，例如移动端的加速度感应以及各种手势实现的效果，PC端可以不受流量限制等。相应的会增加维护成本。
浏览器的兼容性问题及解决办法
不同浏览器的标签默认的padding与margin不同 最常见也是最容易解决的问题，只需要在CSS里写入*{margin：0；padding：0}块属性标签浮动且有横向margin的情况下，在ie6显示margin比设置的大 在float的标签样式控制中加入 display:inline;将其转化为行内属性超链接点击后hover样式失效 使用正确的书写顺序a:link; a:visited; a:hover; a:active.IE6不支持PNG格式透明背景 使用gif格式图片IE5-8不支持opacity 解决办法：选择器{ opacity: 0.4；filter: alpha(opacity=60)； -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”； }
JavaScript兼容
滚动条：
document
.documentElement
.scrollTop
||document
.body
.scrollTop
获取样式兼容
function getStyle(dom
, styleName
){
return dom
.currentStyle
?dom
.currentStyle
[styleName
]
getComputedStyle(dom
)[styleName
];
}
网页可视区域兼容
window
.innerHeight
|| document
.documentElement
.clientHeight
window
.innerWidth
|| document
.documentElement
.clientWidth
事件对象兼容
evt
= evt
|| window
.event
;
阻止事件冒泡兼容
event
.stopPropagation
?event
.stopPropagation():event
.cancelBubble
=true;
阻止默认行为兼容
evt
.preventDefault
?evt
.preventDefault():evt
.returnValue
=false;
事件监听兼容
if(document
.all
){
dom
.attactEvent(“onclick”
, fn
);
} else {
dom
.addEventListener(“click”
, fn
);
}
事件目标对象兼容
var t
= event
.target
|| event
.srcElement
;
