原创力文档- 1、本文档共3页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
跨平台解决方法
跨平台兼容解决方案
1.关于设计上兼容
关于PAD和IP:
48DP规律，通常把48DP作为可触摸的UI元件标准。
每个UI元素之间的间距是8PD。
字体和WEB上的一样分别是12PX 、14PX 、16PX 、18PX无需改动。
切图时，全局加入ROBOTO字体即可。详细可参考：Android-Design-4.0
例如：
2.切图上的技巧
根据目前版本在CSS样式中稍加修改即可适应PAD /IP，根据项目紧紧修改头部即可。
/*overall width and menu padding changes for wider screens*/
@media only screen and (min-width : 1240px) {菜单CSS样式，加入该分辨率内代码}
/*iPad breakpoint*/
@media only screen and (max-width : 768px) {菜单CSS样式，加入该分辨率内代码}
/* small screen 640 and under */
@media only screen and (max-width : 640px) {菜单CSS样式，加入该分辨率内代码}
/* smartphone landscape */
@media only screen and (max-width : 468px) {菜单CSS样式，加入该分辨率内代码}
/*smartphone portrait*/
@media only screen and (max-width : 320px) {菜单CSS样式，加入该分辨率内代码}
注意
在样式中规定图片宽度为百分比例如：
width:66.66%;
单位改成em例：margin-top:1.25em;或margin-right:30%;可自适应。
公用样式可参考如下：蓝色为必有样式
body {
font-family: liberation-sans-1,liberation-sans-2, Arial, Verdana, Helvetica, sans-serif;
font-size:16px;
line-height:1.3em;
color:#555555;
font-weight:normal;
background: url(../img/bg-body.jpg) repeat scroll left top;
}
a {color: #634e00;text-decoration:underline;}
a:hover {text-decoration:none;color: #634e00;}
p, ul, ol {font-size:0.9375em;}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl {margin:0.7em 20px 0.9em 20px;}
h1, h2, h3, h4, h5, h6 {font-family: liberation-sans-1,liberation-sans-2, Arial, Verdana, Helvetica,
sans-serif;font-weight:normal;color:#322801;line-height:1.2em;}
img {
-ms-interpolation-mode: bicubic;/*IE only*/
max-width: 100%;
width:auto;
height:auto;
}
.accessibility {left: -9999em; position: absolute;}
补充：关于HTML5：
头部改成如下代码即为HTML5，用DIV,UI,LI...符合W3C的标签,或者自定义标签。
!DOCTYPE html
html lang=en
head.../headbody ...DIV/DIV.../body
/html
关于CSS3网上有大量例子根据熟练程度使用。
3.关于各个浏览器内核的兼容
可用下划线或着*进行常规兼容处理方法，另外可用以下方法处理，
!--[if (IE 8) (!IEMobile)]
script src=js/css3-mediaqueries.js/script
![endif]--
!--[if (gte IE 6)(lte
文档评论（0）