css 根据屏幕调整大小

@media screen and (max-width: 768px) {
/* 当屏幕宽度小于等于768px时生效的样式 */
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* 当屏幕宽度在769px和1024px之间时生效的样式 */
}
@media screen and (min-width: 1025px) {
/* 当屏幕宽度大于等于1025px时生效的样式 */
}

@media screen and (max-width: 768px) {
/* 当屏幕宽度小于等于768px时，将header元素的高度设置为100px */
header {
height: 100px;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* 当屏幕宽度在769px和1024px之间时，将article元素的宽度设置为50% */
article {
width: 50%;
}
}
@media screen and (min-width: 1025px) {
/* 当屏幕宽度大于等于1025px时，将footer元素的左右边距设置为20% */
footer {
margin-left: 20%;
margin-right: 20%;
}
}

通过@meidia规则，我们可以很方便地针对不同屏幕大小进行布局样式的调整，使得网站在不同的设备上都能够展现出最佳的用户体验。