[分享]css 根据屏幕调整大小

CSS中，使用@media规则可以实现根据不同屏幕大小自动调整布局样式。首先，我们要使用@media规则定义一些媒体查询。

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