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

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

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

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

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

相关文章推荐

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

撐起header及footer

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

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

自适应网页设计的方法(手机端良好的访问体验)

昨天中午Google进行了一次在线讲座,讲述自适应网页设计的概念和方法,维护同一个网页代码,即可使网站在多种浏览设备(从桌面电脑显示器到智能手机或其他移动产品设备)上具有更好的阅读体验,这里我将该讲座...

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

该方案使用相当简单,把这段 原生JS 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置) script>!function(e){function ...

CSS的@media语法实现页面端手机端的自适应

在CSS3版本内有这么一个语法: @media mediatype and|not|only (media feature) {     CSS-Code; }  最近初学css,需要用到设备和电脑...

手机端页面自适应解决方案—rem布局

原文:手机端页面自适应解决方案—rem布局 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的...

手机端rem如何适配_rem详解及网页自适应

什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值。所以改变html节点的fontsize是最为关键的一步。根据手机宽度改变相对大小就可以实现自适应了,就不...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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