An example of how to implement an adaptive square using CSS
|
The traditional method is to write a square in a fixed form. Directly write the length = width and write the fixed value as follows
.box{
width: 200px;
height: 200px;
background: pink;
color: #666;
}
However, in many cases, in mobile design, the width of the image changes with different mobile devices. At this time, an adaptive square is needed. Here are two relatively simple implementation methods: Method 1: CSS3 vw unit, vw is relative to the width of the viewport. The viewport is divided into 100-unit vw units. 1vw = 1% viewport width
.box{
width: 20%; //width:20vw is also OK height: 20vw;
background: pink;
}Method 2: Set the padding-bottom style of the box so that the padding-bottom of the box is the same as the width of the box, and set height = 0px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 20%;
/* Set the height to 0 to prevent the box from being stretched to excess height by the content*/
height: 0px;
/* Expand the height of the box.
Set the same fixed width or percentage as width.
The percentage is relative to the width of the parent element box*/
padding-bottom: 20%;
background: pink;
color: #666;
}
</style>
<body>
<div class="box">
<p> This is a self-adapting square</p>
</div>
</body>
</html>
It should be noted that if height: 0px is not written here; when there is content in the box, the box will be expanded by the content
What will happen if padding-bottom is changed to padding-top?
It can be seen that when there is content in the square, the content will be displayed outside the square. This is because the default text is arranged from left to right and from top to bottom, so after padding-top, the text will be outside the square. Therefore, padding-bottom and padding-top here cannot be mixed. In addition, because the box is set to height
*{
margin: 0;
padding: 0;
}
.box{
width: 20%;
/* Set the height to 0 to prevent the box from being stretched to excess height by the content*/
height: 0px;
/* Expand the height of the box.
Set the same fixed width or percentage as width.
The percentage is relative to the width of the parent element box*/
padding-bottom: 20%;
background: pink;
color: #666;
position: relative;
overflow: hidden;
}
p{
position: absolute;
width: 100%;
height: 100%;
background: yellow;
}
This way the contents of the box fill up the square. This concludes this article about how to implement an adaptive square with CSS. For more information about CSS adaptive squares, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Nodejs-cluster module knowledge points summary and example usage
>>: Summary of seven MySQL JOIN types
Recommend
How to generate a free certificate using openssl
1: What is openssl? What is its function? What is...
A brief understanding of several scheduling algorithms for Nginx seven-layer load balancing
This article mainly introduces several scheduling...
Solution to the error when importing MySQL big data in Navicat
The data that Navicat has exported cannot be impo...
How to set up a shared folder on a vmware16 virtual machine
1. Set up a shared folder on the virtual machine:...
How to create a database in navicat 8 for mysql
When developing a website, you often need to use ...
Summary of web design experience and skills
■ Website theme planning Be careful not to make yo...
Implementation of docker view container log command
Why should we read the log? For example, if the c...
Detailed explanation of the use of Vue's new built-in components
Table of contents 1. Teleport 1.1 Introduction to...
Implementation of single process control of Linux C background service program
introduce Usually a background server program mus...
Vue Element front-end application development dynamic menu and routing association processing
Table of contents Overview 1. Menu and routing pr...
Python 3.7 installation tutorial for MacBook
The detailed process of installing python3.7.0 on...
Solution to Ubuntu 18.04 not being able to connect to the network in VMware virtual machine
The solution to the problem that Ubuntu 18.04 in ...
Mini Program to Implement the Complete Shopping Cart
The mini program implements a complete shopping c...
HTML input box optimization to improve user experience and ease of use
In order to improve user experience and ease of us...
Detailed explanation and examples of database account password encryption
Detailed explanation and examples of database acc...