Css实现自适应屏幕宽度的正方形

思路，正方形，长宽都一样，需要找到一个标准值然后再去设置盒子模型，可以用padding，margin, width/height,
正题开始
1. 使用padding，原因，百分比是基于父元素的宽度，所以如果是根据父盒子的百分比来算，则可以使用这个方法
具体代码如下

<div class="square"></div>

.square {display: inline-block;padding: 0 20% 20% 0;background: red;
}

padding+flex，适合做多个正方形，同样利用padding撑开盒子模型，使高度与宽度相同

<div class="square-wrapper"><div class="square"></div><div class="square"></div>
</div>

.square-wrapper {display: flex;
}
.square {flex: 1;
}
.square::after {content: "";display: block;padding-bottom: 100%;background: #000;
}

相同原理也可以使用在内部元素加margin来完成撑开盒子

.square-wrapper {display: flex;
}
.square {flex: 1;background: #000;
}
.square::after {content: "";display: block;margin-bottom: 100%;
}

rem / em 都是同一个值，rem取到的是html标签的font-size，em是父元素的font-size，同样是固定的
使用vw，表示将屏幕的宽度切割成100份，然后也可以完美适应各种屏幕（这里的屏幕指的是包含这个document对象的容器，如果在浏览器打开，那么就是浏览器内部可展示的宽度；如果在iframe中打开，就是iframe的宽度）

.square {width: 20vw;background: #000;
}
.square::after {content: "";display: block;padding-bottom: 100%;// margin-bottom: 100%; // 也可以
}

暂时就想到这么多了。如果你有更好的，可以留言告诉我哦~

Css实现自适应屏幕宽度的正方形相关推荐

CSS实现自适应浏览器宽度的正方形
2019独角兽企业重金招聘Python工程师标准>>> CSS实现自适应浏览器宽度的正方形有以下三种方法: 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分 ...
html css div自适应屏幕宽度，高度
做C/S项目其实最让人蛋疼的无非就是兼容问题,各种浏览器的不兼容外还有div+css不科学的显示问题.所以针对div+css窗口最大化.缩小的自适应加以解决. [html] view plain co ...
使用CSS定义一个和屏幕宽度一样正方形容器
使用CSS定义一个和屏幕宽度一样正方形容器介绍一下如何使用CSS定义一个和屏幕宽度一样正方形容器. 问题有时候,我们在移动端需要做一个商品展示页面,一打开页面,屏幕的上面一半展示为商品的图 ...
html自动适应屏幕分辨率,css如何自适应屏幕大小？
css如何自适应屏幕大小?下面本篇文章给大家介绍一下使用CSS实现屏幕大小自适应的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css如何自适应屏幕大小? 要想实现css屏幕 ...
自动轮播图html代码适应手机,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了, ...
如何让网页自适应屏幕宽度
网页自适应屏幕宽度到底是怎么做到的? 1.首先,在网页代码的头部,加入一行viewport元标签: viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width= ...
css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度文章目录 html响应式网页设计:自动适应屏幕宽度背景一."自适应网页设计"的概念二.允许网页宽度自动调整-使用meta标签:vie ...
php++背景自适应屏幕宽度,背景图片+自适应屏幕
简单大图,元素空或者一般简单大图可考虑元素,设其宽度100%就可以了. 如果想通过background来设置,需要设置高度,算下长宽比,如果是10:6的话,则可以设置padding-top:60% ...
android webview 自适应屏幕宽度,Android应用开发Android Webview适配屏幕宽度
本文将带你了解Android应用开发Android Webview适配屏幕宽度,希望本文对大家学Android有所帮助. " Android Webview适配屏幕宽度. 网上有很多解决方案 ...

Css实现自适应屏幕宽度的正方形

Css实现自适应屏幕宽度的正方形相关推荐

最新文章

热门文章