Tìm hiểu về các đơn vị đo trong CSS và cách sử dụng chúng hiệu quả cho responsive design
CSS units được chia thành hai loại chính: Absolute units (cố định) và Relative units (tương đối).
/* Absolute Units - Fixed sizes */
px /* Pixels - most common */
pt /* Points - 1pt = 1/72 inch */
cm /* Centimeters */
mm /* Millimeters */
/* Relative Units - Based on other values */
% /* Percentage of parent */
em /* Relative to parent font-size */
rem /* Relative to root font-size */
/* Examples */
width: 300px; /* Fixed 300 pixels */
width: 75%; /* 75% of parent width */
font-size: 1.2em; /* 1.2x parent font-size */
padding: 2rem; /* 2x root font-size *//* Absolute Units */
.pixels {
width: 200px;
height: 100px;
font-size: 16px;
padding: 20px;
border: 2px solid #2196f3;
background-color: #e3f2fd;
}
.points {
width: 150pt;
height: 75pt;
font-size: 12pt;
padding: 15pt;
border: 1pt solid #9c27b0;
background-color: #f3e5f5;
}
/* Relative Units */
.percentage {
width: 75%;
height: 50px;
background-color: #e8f5e8;
border: 2px solid #4caf50;
padding: 10px;
}
.em-units {
font-size: 20px;
padding: 1em;
border: 0.1em solid #ff9800;
background-color: #fff3e0;
}
.em-child {
font-size: 1.5em;
padding: 0.5em;
background-color: #ffe0b2;
border: 0.05em solid #f57c00;
}
.rem-units {
font-size: 1.2rem;
padding: 1rem;
margin: 0.5rem 0;
border: 0.1rem solid #e91e63;
background-color: #fce4ec;
}px, pt, cm, mm
%, em, rem
vw, vh, vmin, vmax
calc(), clamp(), ch, ex
Hiểu rõ CSS Units giúp bạn tạo ra responsive designs linh hoạt và maintainable! 🎯