css图片中按钮自适应 |html和css介绍

.btn{
width: 100%;
max-width: 300px;
height: auto;
border: 2px solid #333;
border-radius: 5px;
padding: 10px;
background-color: #fff;
font-size: 16px;
color: #333;
}
@media screen and (max-width: 768px){
.btn{
max-width: 200px;
font-size: 14px;
}
}

这段代码实现了一个宽度为100%的按钮，并设置最大宽度为300px，当屏幕宽度小于等于768px时，则将最大宽度设置为200px，并将字体大小减小至14px。这样，在大屏幕上按钮就可以显示为300px的宽度，而在小屏幕上则会缩小至200px，以适应不同的设备。

至于其他属性，如边框、圆角、背景色、字体颜色等，都可以根据需要自行调整。不过需要注意的是，按钮的高度应该使用auto来自适应内容高度，而不是固定的像素值。