一、创建媒体查询、使用视窗尺寸
<!DOCTYPE html> <html> <head></head> <body> <style> .box{ width: 500px; height: 500px; margin: auto; background-color: gray; } /* media表示媒体查询当前窗口的大小 */ /* 1vw:当前窗口宽度的1%; 1vh:当前窗口高度的1% */ /* 1vmax:当前窗口宽高最大值的1%; 1vmin:当前窗口宽高最小值的1% */ @media(min-width:800px) { .box { width: 10vw; height: 20vh; } } @media(max-height: 200px){ .box { width: 50vmax; height: 50vmin; } } </style> <div class="box"></div> </body> </html>
二、flex的应用
1.flex父元素常用属性整理
<!DOCTYPE html> <html> <head></head> <body> <style> .box-container1 { width: 600px; height: 400px; margin: auto; border: 1px solid gray; /* display:flex 父元素下所有子元素均遵循响应式布局 */ display: flex; /* flex-direction表示子元素排列方向： row -- 从左到右 row-reverse -- 从右到左 column -- 从上到下 column-reverse -- 从下到上 */ flex-direction: row; /* justify-content表示子元素沿主轴排列形式： flex-start -- （flex-direction: row时第一个元素靠左边沿） flex-end --（flex-direction: row时最后一个元素靠右边沿） space-between -- （flex-direction:row时，第一个元素靠左边沿，最后一个元素靠右边沿，其他均匀分布） space-around --（flex-direction:row时，元素横向均匀分布） */ justify-content: space-around; /* align-items表示子元素沿交叉轴排列形式： flex-start -- （flex-direction: row时，竖排第一个元素靠上边沿） flex-end --（flex-direction: row时，竖排最后一个元素靠下边沿） center -- (flex-direction: row时，元素排纵轴中间) */ align-items: center; /* flex-wrap:表示是否换行。默认不换行，子元素自动缩放铺满一行/一列 nowrap:不换行 wrap:换行 wrap-reverse:反向换行 */ flex-wrap: wrap; } .box1 { background-color: red; width: 25%; height: 25% } .box2 { background-color: blue; width: 25%; height: 25%; } </style> <div class="box-container1"> <div class="box1"></div> <div class="box2"></div> <div class="box1"></div> <div class="box2"></div> <div class="box1"></div> <div class="box2"></div> <div class="box1"></div> <div class="box2"></div> <div class="box1"></div> <div class="box2"></div> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
2.flex子元素常用属性整理
<!DOCTYPE html> <html> <head></head> <body> <style> .box-container1 { height: 400px; margin: auto; border: 1px solid gray; display: flex; flex-direction: row; justify-content: space-around; align-items: center; flex-wrap: wrap; } .box1 { background-color: red; height: 200px; /* flex短方法属性包括： flex-grow(放大) flex-shrink(缩小) flex-basis(基本大小) */ flex: 2 2 300px; /* order 是排序规则 */ order: 2; /* 针对单个元素的交叉轴位置 */ align-self: flex-start; } .box2 { background-color: blue; height: 200px; flex: 1 1 300px; order: 1; } </style> <div class="box-container1"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
