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

原创 2015年11月18日 18:58:56

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

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

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

html图片自适应手机屏幕大小的css写法

代码如下: body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,tex...

网页设计% CSS自适应将header&footer图片fixed置于头尾 用于手机版页面

撐起header及footer

雪碧图rem手机完美自适应(包括解决因为rem误差导致的图片显示不全)

雪碧图rem手机完美自适应(包括解决因为rem误差导致的图片显示不全) 作者 沧玉...

android webview加载html图片自适应手机屏幕大小&点击查看大图

版权声明:本文为博主原创文章,未经博主允许不得转载。 目录(?)[-] 方法一直接替换html文本中img标签下图片大小方法二使用Jsoup查找img标签替换图片的宽度和高度 导...

手机网页图片自适应大小 background-size css 图片全屏 背景尺寸设置

思路:图片不要设置为div的background,因为你设置了background-size,但是div的height没设置,一样没鸟用,除非你搞个js判断,动态刷新。 换一种思路,直接用显示出...

js手机端,H5端,自适应日历插件

  • 2017年11月17日 09:59
  • 339KB
  • 下载

手机端页面自适应解决方案—rem布局进阶版(附源码示例)

一年前笔者写了一篇 《手机端页面自适应解决方案—rem布局》,意外受到很多朋友的关注和喜欢。但随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案——rem布局(进...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手机端图片的自适应--%
举报原因:
原因补充:

(最多只允许输入30个字)