移动端适配问题总结

作者: staffy | 来源:发表于2016-05-26 17:33 被阅读175次

设计出一套750的效果图(标注尺寸用)

扩大到1080,切出3x的图。(对包大小有要求的,可以只用最大的这套图)

在代码中定义个尺寸计算类,由于基准是750,得出计算公式

ios为(当前屏幕宽度/375)*(效果图标注的尺寸/2)

android为(当前屏幕宽度/750)*效果图标注的尺寸

swift

func getAdaptationSize(size:CGFloat) -> CGFloat {

    return (UIScreen.mainScreen().bounds.width/375.0)*(size/2)

}

java

public float getAdaptationSize(int size) {

   //curScreenWidth是当前屏幕宽度,在activity中通过DisplayMetrics获取

    return  (curScreenWidth/750f)* size; 

}

举例说明:

设计给出的750宽的效果图上有一个宽200的按钮。

当屏幕宽为640时,这个按钮的尺寸如下:

ios中调用getAdaptationSize(200),代码中的尺寸是 (640/750)*(200/2) = 85.33,由于是2x,所以显示的物理像素是85.33*2=170.67

android中调用getAdaptationSize(200),直接得出170.67

相关文章

  • 前端移动端适配总结

    前端移动端适配总结

  • 移动端适配问题总结

    设计出一套750的效果图(标注尺寸用) 扩大到1080,切出3x的图。(对包大小有要求的,可以只用最大的这套图) ...

  • 移动端总结

    移动端技巧总结 对移动端开发和适配的技巧总结,主要从适配和注意事项两方面进行总结 1.媒介查询 2. 手机端加一个...

  • 多易日记进程

    10.29 解决移动端适配问题:采用手淘写的lib-flexible解决移动端的适配,采用pxToRem解决px转...

  • echarts.js 仿网商银行app定活宝模块的 历史支取

    移动端适配问题 本人用的flexible 插件

  • 移动端rem适配

    三:多屏适配布局问题 出处:【原创】移动端高清、多屏适配方案 再谈移动端适配和点5像素的由来 使用相对单位:rem...

  • 移动端适配及1px边框问题

    1、移动端适配 2、1px边框问题

  • 移动端适配总结

    前景提要以下内容根据部分文章参考 自己实践得出的猜想和总结 有错误请指正一·概念介绍css单位:px ,rem,e...

  • 移动端适配总结

    这几周在对移动端进行屏幕适配时遇到的一些问题和解决方法记录如下: 起初是不知道有适配方案的,这点非常糟糕,身为一个...

  • 移动端适配问题

    移动端适配问题 在head中设置: javascript 样式写法:

网友评论

    本文标题:移动端适配问题总结

    本文链接:https://www.haomeiwen.com/subject/kmcwxttx.html