响应式布局

科技2025-06-03 33

0. 常见的css单位：

px，绝对长度单位，相对于显示器屏幕分辨率，最常用。em 相对单位。不同的属性有不同的参照值。对于字体大小属性（font-size）来说，em 的计算方式是相对于父元素的字体大小对于border, width, height, padding, margin, line-height等这些属性，使用 em单位的计算方式是参照该元素的 font-size，1em等于该元素设置的字体大小。如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小。rem 相对单位。是相对于根元素 html 的 font-size 来计算的，常用于响应式。% 占父元素的比例。vw, vh, vmin, vmax 相对单位，是基于视窗大小（浏览器用来显示内容的区域大小）来计算的。 vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一 vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一 vmin：基于 vw 和 vh 中的最小值来计算，1vmin 等于最小值的百分之一 vmax：基于 vw 和 vh 中的最大值来计算，1vmax 等于最大值的百分之一

1.响应式布局

方式一：flex弹性盒模型

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex弹性布局</title> </head> <style> .container{ height:200px; width: 200px; display: flex } .left{ background-color: red; width: 20px; } .middle{ background-color: yellow; flex: 1; } .right{ background-color: green; width: 20px; } </style> <body>  <div class=container> <div class=left></div> <div class=middle></div> <div class=right></div> </div> </body> </html>

方式二： Media Queries（媒体查询）是响应式设计的核心。一般先使用Media Queries，根据不同的设备屏幕设置根元素font-size，再使用rem来实现响应式布局

使用该方式的弊端：具有“阶梯性”

方式三：使用百分比实现响应式布局，这种方式比较笨

方式四：使用vw/vh实现响应式布局任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

方式五：使用bootstrap的栅格系统。

Processed: 0.010, SQL: 8