纯Css完成Div高宽比依据响应式⊙﹏⊙总宽(百分

2020-11-04 06:43 jianzhan

在现如今自适应网站的规定下,许多能全自动调节规格的原素可以保证高宽响应式,如img,根据{width:50%;height:auto;}完成照片高宽比追随总宽占比调节。

但是,用的数最多的标识一哥Div却不可以保证全自动调节(要不从父级承继,要不自主特定px,要不给百分数!可是这一百分数是依据父级的高宽比来测算的,压根并不是依据原素本身的总宽,那麼就没法做到Div的宽达到成一定的占比=-=)。

要完成这类作用(div的高宽比:总宽=1:1),根据各种各样加Buff,获知有下列几类解决方法

1,立即特定div的宽高+zoom来完成响应式

div{width:50px;heigth:50px;zoom:1.1;}

那样能做到基本的等宽高div,可是局限性性很大,PASS!

2,根据js动态性分辨div的总宽来设定高宽比

div{width:50%;}

window.onresize = function(){div.height(div.width);}

也可以完成等宽高div,可是总感觉有点儿怪怪的,PASS!

3,根据宽高企业来设定

div{width:20vw;height:20vw;/*20vw为viewport width的20%*/}

可是许多机器设备不兼容这一特性,适配性太差,PASS!

4,根据float来设定

#aa{background:#aaa;;}
#bb{background:#ddd;;float:left}
#cc{background:#eee;;float:right}

<div id="aa">父div
  <div id="bb">子div</div>
  <div id="cc">子div</div>
  <div style="clear:both">便是这一用以clear不正确的</div>
</div>

可以让父级原素aa依据子原素的高宽比全自动更改高宽比(在子原素里置放响应式原素)来调节高度一致,但是太不便,PASS!

5,总算到最后大杀器了,根据padding来完成此作用

根据之上好多个计划方案的试验,发觉总宽的响应式是依据viewport的width来调节的,例如{width:50%}便是访问器可视性地区的50%,resize以后也会全自动调节。

而height特定百分数后,他会自主寻找viewport的height来调节,跟width一毛钱关联沒有,当然二者不可以做到占比关联了。根据这一构思,要寻找一个能跟viewport的width扯上裙带关联的特性,就可以处理这一难题了。

这一特性便是padding,padding是依据viewport的width来调节的,巧就巧在padding-top和padding-bottom也是依据viewport的width来测算的,那麼根据设定这一特性就可以跟width达到某类占比关联了,

大家最先特定原素的width为父级原素的50%(父级原素为随意有高宽的原素,不可以特定特殊父级原素,不然危害此计划方案的通用性性)

.father{width:100px;height:100px;background:#222}

.element{width:50%;background:#eee;}

这一情况下大家再设定element的height为0,padding-bottom:50%;

.element{width:50%;height:0;padding-bottom:50%;background:#eee;}

element就变为了一个总宽50%,高宽比为0(可是他有50%width的padding-bottom)的正正方形了,实际效果以下图灰乳白色的div

这一情况下将会有些人要问了,这一div的高宽比为0,那假如我想在element里置放原素呢,那简直overflow了,这儿就需要提及overflow特性了,它的测算是包含div的content和padding的,换句话说,

原先你的div将会是个{width:50px;height:50px;padding:0}的div,如今变为{width:50px;height:0;padding-bottom:50px;}的div了,规格還是一样的,根据特定这一div的子原素的精准定位,一样能够一切正常显示信息

那样便可以根据设置父级原素father、大家必须的原素element、子级原素datail来完成随意状况下该要求(div宽高定占比)。

到此这篇有关纯Css完成Div高宽比依据响应式总宽(百分数)调节的文章内容就详细介绍到这了,大量有关Css Div高宽比依据响应式总宽调节內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!