关闭

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

221人阅读 评论(0) 收藏 举报
分类:

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

废话也就不说了,关于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 代表图片到顶部边缘的距离。这样,图片的尺寸和位置就得到了动态的控制。

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

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:565次
    • 积分:28
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档