html怎么做一个正方形,纯 CSS 实现自适应正方形

在处理移动端页面时，我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果，如 Flipbord 的移动页面：

那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢？

方案一：CSS3 vw 单位

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

利用 vw 单位，我们可以很方便做出自适应的正方形：

.placeholder {

width: 100%;

height: 100vw;

}

优点：简洁方便

缺点：浏览器兼容不好

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

在 CSS 盒模型中，一

html怎么做一个正方形,纯 CSS 实现自适应正方形相关推荐

html如何用百分百制作正方形,纯CSS实现自适应正方形
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 首先,自适应正方形是指宽度和高度随着屏幕宽度(不管是移动端还是 PC 端)进行等比例变化的正方形,在处理移动端页面时,我 ...
html div 正方形,纯 CSS 实现自适应正方形
在处理移动端页面时,我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果,如 Flipbord 的移动页面: 那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢? 方案 ...
面试题19：CSS实现自适应正方形
面试官:请说一下如何实现自适应正方形纯CSS实现自适应正方形的几种方式在写页面布局时候正方形对我们来说应该很常见,比如商品列表展示,头像展示, 在微博上发布图片的展现等方法一: 原理同paddi ...
html自动适应布局,用纯CSS实现自适应布局表格
以手机.平板等移动设备为平台的浏览行为变得越来越平常,甚至有些人叫嚣PC将死.虽然说的有些夸张,但让你的网站布局能够兼容PC和移动设备这些需求变得越来越重要.这种网页布局就是"自适应布局&q ...
html图片自适应表格,如何用纯CSS实现自适应布局表格
您可能感兴趣的话题: CSS 核心提示:这是自适应布局技术中的一个难题,如何让table元素也能表现出自适应性. 以手机.平板等移动设备为平台的浏览行为变得越来越平常,甚至有些人叫嚣PC将死.虽然说的 ...
html表格整体放大,纯CSS实现自适应布局表格
插件描述:如何让table元素也能表现出自适应性?按HTML5的说法,table是一个不鼓励使用的HTML标记,但现实工作中,我们避免不了的偶尔会用到它.那么,怎样让一个传统的表格也表现出自适应性呢? ...
bulma.css_如何建立一个？ Bulma CSS的自适应博客设计
bulma.css by ZAYDEK 由ZAYDEK oo (Ooooooh) 如何建立一个? Bulma CSS的自适应博客设计 (How To Build A ? Responsive Blog ...
纯CSS制作自适应分页条-分享------彭记（019）
纯css制作自适应分页条效果图: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
html做微信logo,纯CSS实现一个微信logo，需要几个标签？_html/css_WEB-ITnose
博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的 html 标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用 ...

html怎么做一个正方形,纯 CSS 实现自适应正方形

html怎么做一个正方形,纯 CSS 实现自适应正方形相关推荐

最新文章

热门文章