手机端图片的自适应--%

前段时间拿了一个手机端的项目练了练手，虽然整体完成了主体效果，但是还有很多不满意的地方。水平太菜实在拙计……

废话也就不说了，关于Viewport网上也是一搜一大串，这里也不在赘述。

本着尊重艺术和原著的精神，拿到设计之后。直接获取到设计原件的宽度和高度。(ps:不知道怎么获取宽高的话，去问设计mm)

下面是scss的变量申明。

//公共变量
$width:640;
$height:1008;

接下来获取page中某个图片在设计中的宽、高。
假如尺寸如下：

//图片设计尺寸
width:100px;
height:50px;

因为在scss中可以实现简单的运算，所以，通过运算我们可以动态的控制图片在页面中实际显示的尺寸。

//图片实际显示尺寸
body{
    img{
        width:(100/$width)*100%;
        height:(50/$height)*100%;
    }
}

图片位置如下：

body{
    img{
        position:absolute;
        margin-left:(20/$width)*100%;
        margin-top:(120/$height)*100%;
    }
}

所以，图片首先是绝对定位的元素，才能对它的位置进行控制。

20 代表图片在设计中到左侧边缘的距离；120 代表图片到顶部边缘的距离。这样，图片的尺寸和位置就得到了动态的控制。

不过，具体的项目还得按照实际情况来编写。

最后，水平有限，有错误的地方还请谅解和指教。