CSS实现自适应浏览器宽度的正方形

2019独角兽企业重金招聘Python工程师标准>>>

CSS实现自适应浏览器宽度的正方形有以下三种方法：

1、方案一：CSS3 vw 单位

CSS3 中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位，1vw = 1% viewport width，vh是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin是相对当前视口宽高中较小的一个的百分比单位，同理 vmax是相对当前视口宽高中较大的一个的百分比单位。

#square{
width:30%;
height:30vw;
background:red;
}

类比：纯CSS实现自适应浏览器高度的正方形只需要设置width的单位为vh即可。

优点：简洁方便。

缺点：浏览器兼容不好。

2、方案二：设置垂直方向的padding撑开容器

由于margin, padding 的百分比数值是相对父元素的宽度计算的，只需将元素垂直方向的一个padding值设定为与width相同的百分比就可以制作出自适应正方形了。

但要注意，仅仅设置padding-bottom是不够的，若向容器添加内容，内容会占据一定高度，为了解决这个问题，需要设置height: 0。

#square{
width:30%;
height:0;
padding-bottom: 30%;
background:red;
}

优点：简洁明了，且兼容性好。

缺点：会导致在元素上设置的max-width属性失效（max-height不收缩）。

3、利用伪元素的 margin(padding)-top 撑开容器

max-width属性失效的原因是：max-width属性只限制于width，也就是只会对元素的 content width起作用。

解决方法是：用一个子元素撑开content部分的高度，从而使max-height属性生效。

首先需要设置伪元素，其内容为空，margin-top设置为100%。

但要注意，若使用垂直方向上的margin撑开父元素，仅仅设置伪元素是不够的，这涉及到margin collapse外边距合并的概念，由于容器与伪元素在垂直方向发生了外边距合并，所以撑开父元素高度并没有出现，解决方法是在父元素上触发BFC：设置overflow:hidden。

#square{
width:30%;
background:red;
overflow:hidden;
max-width:200px;
}
#square:after{
content: '';
display: block;
margin-top:100%;
}

若使用垂直方向上的padding撑开父元素，则不需要触发BFC。

#square{
width:30%;
background:red;
max-width:200px;
}
#square:after{
content: '';
display: block;
padding-top:100%;
}

注：以上方法都是相对视口宽度自适应的正方形。如果需求是制作相对视口高度自适应的正方形，估计就只能使用 vh 单位了吧~

转载于:https://my.oschina.net/u/3219445/blog/1580769

CSS实现自适应浏览器宽度的正方形相关推荐

Css实现自适应屏幕宽度的正方形
思路,正方形,长宽都一样,需要找到一个标准值然后再去设置盒子模型,可以用padding,margin, width/height, 正题开始 1. 使用padding,原因,百分比是基于父元素的宽度, ...
css图片自适应浏览器宽度
.logo img { width: auto; display: block; margin: 0 auto; max-width: 100%; 100% ? "100%" : ...
php自适应浏览器,css如何自适应浏览器
css自适应浏览器的设置方法:首先打开相应的代码文件:然后使用js代码" jQuery(window).resize(function(){...}"实现内容自适应浏览器宽度或者高 ...
vue木桶布局（图片自适应浏览器宽度排列）的实现方法
先上效果: 基本实现思路: 监听浏览器的resize事件,实时获取到浏览器宽度设置一个图片的基础高度(例如300px),以此为基准把图片都缩放到这个高度把图片依次加入同一行,如果宽度超过浏览器宽度 ...
css如何自适应浏览器的高度,div css 高度宽度自适应浏览器屏幕大小
DIV布局--IT北瓜原创 html,body{ font: 100% 微软雅黑, 宋体, 新宋体; margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 ...
html css div自适应屏幕宽度，高度
做C/S项目其实最让人蛋疼的无非就是兼容问题,各种浏览器的不兼容外还有div+css不科学的显示问题.所以针对div+css窗口最大化.缩小的自适应加以解决. [html] view plain co ...
html css高度自适应浏览器高度,Div + CSS高度自适应解决方法_html/css_WEB-ITnose
转这几天用div+css写网站,样子上中下,中间是个左中右3列,可这3列不是等高偏巧有不同颜色的背景,结果就是ie.firefox...这些浏览器无一例外的现实的效果都是长短不齐,如何让这3列可以 ...
css 图片大小自适应div,CSS 图片自适应显示宽度
这个使用尤其中手机屏幕上最有用. 有喜欢方法: function ReImgSize(){ for (j=0;j { document.images[j].width=(document.images ...
CSS文字自适应div宽度
1.文字自适应宽度 <body><div class="box"><div>大风起兮云飞扬</div><div>安得猛士 ...

CSS实现自适应浏览器宽度的正方形

CSS实现自适应浏览器宽度的正方形相关推荐

最新文章

热门文章