flex布局、rem布局、vw、vh

lryh_

于 2024-08-09 15:14:27 发布

阅读量479

点赞数 25

分类专栏： CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/lryh_/article/details/141061149

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

flex布局

盒子设置属性display:flex；开启弹性盒子布局，弹性盒子布局由容器和项目组成；弹性盒子有两个轴：主轴和交叉轴；

属性：

flex-direction 定义主轴方向值： row, row-reverse, column, column-reverse

justify-content 定义项目在主轴上的对齐方式值：flex-start, flex-end, center, space-between,space-around,space-evenly

space-between 子项之间间距相等，但第一个和最后一个与容器边缘没有间距

space-around 子项之间间距相等，子项和容器的边缘间距比子项之间间距的一半

space-evenly 子项之间间距相等，子项和容器边缘的间距也相等

align-items 定义项目在交叉轴上的对齐方式 flex-start, flex-end, center, baseline，stretch

align-content 定义多行项目在交叉轴上对齐方式

flex-wrap 是否换行 nowrap , wrap , wrap-reverse

flex 定义项目弹性比率

rem布局

rem 相对单位相对于html 根元素的字体大小的单位默认字体大小16px，则1rem = 16px

应用场景：

通过设置根元素的字体大小，可以在不用设备和屏幕上实现响应式布局

rem布局常用于设计随屏幕大小缩放的页面，只要修改根元素字体大小，能够调整整个页面的比例

1. 确定根元素的字体大小

确定网页中 <html> 元素的 font-size。浏览器默认的字体大小通常是 16px。如果没有在 CSS 中修改它，那么 1 rem 就等于 16px。

html {
font-size: 16px; /* 默认值 */
}

2. 计算 1 rem 的值

1 rem = 16px

3. 使用 rem 单位进行布局

在 CSS 中使用 rem 单位时，实际的像素值就是设定的 rem 乘以根元素的 font-size

div {
width: 2rem;
margin: 1.5rem;
}

在根元素的 font-size 为 16px 的情况下：

width: 2rem = 2 × 16px = 32px
margin: 1.5rem = 1.5 × 16px = 24px

4. 响应式设计中的动态计算

可以通过媒体查询调整 html 的 font-size，从而让 rem 值动态变化

html {
font-size: 16px;
}

@media (max-width: 768px) {
html {
font-size: 14px;
}
}

@media (max-width: 480px) {
html {
font-size: 12px;
}
}

在这种情况下：

1 rem = 16px 在大屏幕上
1 rem = 14px 在中等屏幕上
1 rem = 12px 在小屏幕上

vw、vh

vw 和 vh 是相对于视口（viewport）宽度和高度的 CSS 单位，常用于创建响应式布局。vw 表示视口宽度的百分比，vh 表示视口高度的百分比。

1vw：等于视口宽度的 1%。如果视口宽度是 1000px，那么 1vw 就是 10px。

1vh：等于视口高度的 1%。如果视口高度是 800px，那么 1vh 就是 8px。

宽度和高度：

div {
width: 50vw; /* 元素宽度为视口宽度的50% */
height: 50vh; /* 元素高度为视口高度的50% */
}

如果视口宽度是 1000px，高度是 800px，那么：

width: 50vw = 500px
height: 50vh = 400px

响应式字体大小

vw 和 vh 还可以用来设置字体大小，使字体随着视口大小变化而变化。