前段时间拿了一个手机端的项目练了练手,虽然整体完成了主体效果,但是还有很多不满意的地方。水平太菜实在拙计……
废话也就不说了,关于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 代表图片到顶部边缘的距离。这样,图片的尺寸和位置就得到了动态的控制。
不过,具体的项目还得按照实际情况来编写。
最后,水平有限,有错误的地方还请谅解和指教。