使用CSS的@media screen 规则为不同的屏幕尺寸设置不同的样式(响应式图片布局)
/* 设置基本图片样式 */
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
/* 使用@media screen规则为不同屏幕宽度设置不同的图片样式 */
@media screen and (max-width: 768px) {
/* 对于屏幕宽度小于或等于768像素时，图片样式调整 */
.img-responsive {
margin: auto;
width: 80%; /* 调整宽度以适应屏幕 */
}
}
@media screen and (max-width: 480px) {
/* 对于屏幕宽度小于或等于480像素时，图片样式调整 */
.img-responsive {
width: 100%; /* 使图片宽度填满屏幕宽度 */
}
}这段代码定义了一个.img-responsive类作为所有响应式图片的基础样式，然后使用@media screen规则来定义在不同屏幕尺寸下如何调整图片的样式。在屏幕宽度小于或等于768像素时，图片的宽度被设置为屏幕宽度的80%，而在屏幕宽度小于或等于480像素时，图片宽度被设置为100%，以使图片填满屏幕宽度。这样的设置可以确保图片在不同设备上的显示效果符合设计需求。
评论已关闭