一、响应式布局简介:
1、网页设计方法 根据不同的设备 屏幕尺寸和分辨率 自动调整布局和现实效果 用户体验佳
2、是流式布局的特性,根据屏幕大小自动调整布局,适应不同屏幕尺寸
3、媒体查询 关键技术 根据不同的设备(高、宽、分辨率)采用不同样式
媒体查询的语法:
@media screen and (max-width: 768px) {
/* 在屏幕宽度小于等于 768px 时应用的样式 */
.container {
width: 100%;
padding: 10px;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* 在屏幕宽度大于 768px 且小于等于 1024px 时应用的样式 */
.container {
width: 80%;
padding: 20px;
}
}
@media screen and (min-width: 1025px) {
/* 在屏幕宽度大于 1024px 时应用的样式 */
.container {
width: 70%;
padding: 30px;
}
}
二、实现响应式布局:
1、使用媒体查询,根据屏幕宽度和分辨率,动态调整网页布局和样式。
2、使用弹性布局(flex)和网格布局(grid)
3、使用响应式框架
三、流式布局(Fluid Layout)和 弹性布局(flexbox)区别:
流式布局:关注的是元素的宽度和高度,根据屏幕宽度和分辨率,动态调整元素大小。
弹性布局:是一种CSS的布局模式,控制元素在容器中的排列方式、对齐方式、换行方式等。
四、grid与flex布局区别:
相同点:
1.容器与子元素:都是基于容器和子元素的概念进行布局的
2.响应式布局
不同点:
1.flex布局是单一轴线布局,只能水平或者垂直方向,而grid布局是双轴线,可以同时水平和垂直
2.子元素排列:flex-direction决定,默认水平,grid通过网格行和列进行排列,使用grid-template-rows和grid-template-columns来定义
3.flex:1来分配空间,grid使用grid-template-areas、grid-template-rows和grid-template-columns、grid-area实现更复杂的布局
4.网格布局对齐方式: 水平justify-content: center;垂直align-items: center;