关于H5活动页面的探究

作者: MJ 分类: css 发布时间: 2019-10-27 18:53

好久没写文章了,主要用来沉淀顺便来学习一下新技术,今天来研究一下h5活动页面中的一些问题。

查看demo

https://github.com/majiang666/h5-active

查看完整代码,请移步github,欢迎star

我们经常会遇到这样一类的活动页面(如下图,仅用作演示,侵权删)

当我们遇到这样的页面,我自己会这样来处理,我不会把每个模块都切图然后再布局,我会直接用一张图来处理这样的活动,然后会放具体跳转的锚点区块,处理相关跳转。

虽然这样很好处理,但是会遇到问题,大家想一下什么问题呢?

我们现在遇到几个问题:

1:怎么处理这些锚点?

2:怎么保持这些锚点区块位置兼容所有手机呢?

首先,我们来处理第一个问题,我们就用父级app,设置position:relative,然后把图片放入父级(app)中,图片宽度设置为自适应(width:100%),最后就是我们的锚点区块用position:absolute,然后设置它的位置就行了。

其次,就是解决第二个问题,如何做到不管在屏幕多大的情况下,都能保持位置不变呢?相信每个人都有自己的处理方式,而我的处理方式是设置百分比。

具体原理就是,我们在首先确定我们效果图的尺寸,比如我们的图片尺寸是900*1723,然后我们计算出区块的宽、高、距离父级顶部、距离父级左边这四个距离,然后用各自的值去除以图片尺寸的宽和高,算出比例即可。

举例:我们的区块宽和高是 470,316 ,距离顶部、距离左边的距离是 500,215 ,然后区块宽度相对于我们的效果图,宽度的比例是:470/900*100=52.2222%,高度比例是:316/1723*100=18.3401%; ,顶部比例是:500/1723*100=29.0192%,左边比例是:215/900*100=23.8889%。

然后每一次我们都这么算,好像显得很低效,那我们就借助于less这样的工具来处理(感谢less、sass等),round:保留几位小数,percentage:计算百分比(查看官方文档),核心代码如下:

// 页面尺寸
@w:900;
@h:1723;
// 区块尺寸
@w-child:470;
@h-child:316;

// 自动计算百分比
.calcs(@w,@h,@wd,@ht,@tp,@lt){
    position: absolute;
    top:round(@tp/@h),4);
    left:round(percentage(@lt/@w),4);
    width:round(percentage(@wd/@w),4);
    height:round(percentage(@ht/@h),4);
}

// 实例
.block1{
    .calcs(@w,@h,470,316,500,215);
    background: #f00;
    display: block;
}
.block2{
    .calcs(@w,@h,470,316,850,215);
    background: #f00;
    display: block;
}
.block3{
    .calcs(@w,@h,470,316,1180,215);
    background: #f00;
    display: block;
}
// 实例内子级
.child{
    .calcs(@w-child,@h-child,250,50,100,20);
    background: #fff;
}

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注