一帮来说,pc端的静态页一般都是像素为基本单位,基本都是卡尺卡出来的,只要是有耐心,一般没什么大问题
而移动端的对应的终端的屏幕的大小差异太大了,为了适配不同的屏幕这时候就不能以像素px为单位了,更多的是相对的百分比%
一行平均显示两个圆并且宽高相同而且随着屏幕的大小的变化进行缩放,一般来说可以这样
一个大div中2个小div,这两个小div宽是大div的50%,高度呢就有些说法了,如果高度用百分比的话相对的父级的,但是父级默认是被子级撑开的,所以写百分百是不行的,写多少高度都是0,但是默认的padding,margin是相对父级的宽,所以我们可以设置padding-top或者padding-bottom是跟父级的宽度一样实现这个效果,
HTML:
<div class="main">
<div></div><div></div>
</div>
CSS:
<style>
body,html{
margin:0;
padding:0;
}
.main{
width:100%;
}
.main div{
width:50%;
display:inline-block;
background-color:#F00;
padding-top:50%;
border-radius:100%;
}
</style>