為了讓我們的網站更加便利和用戶友好，我們需要使優惠券在不同的設備上都正確的展示。在我們的解決方案中，我們使用了js和css實現自適應優惠券的目的。

//JS代碼
//獲取瀏覽器窗口的寬度
var width = window.innerWidth || document.documentElement.clientWidth;
//根據不同的寬度給優惠券做出不同的處理
if (width >768) {
//大屏幕下的處理
//添加CSS樣式
document.querySelector('.coupon').style.width = '600px';
document.querySelector('.coupon').style.height = '300px';
document.querySelector('.coupon').style.fontSize = '20px';
} else if (width >480 && width<= 768) {
//中等屏幕下的處理
document.querySelector('.coupon').style.width = '400px';
document.querySelector('.coupon').style.height = '200px';
document.querySelector('.coupon').style.fontSize = '16px';
} else {
//小屏幕下的處理
document.querySelector('.coupon').style.width = '100%';
document.querySelector('.coupon').style.height = 'auto';
document.querySelector('.coupon').style.fontSize = '14px';
}
//CSS代碼
.coupon {
background-color: #FA8072;
color: #fff;
border-radius: 10px;
padding: 20px;
text-align: center;
}

我們的js代碼首先獲取了瀏覽器窗口的寬度，根據寬度做出了不同的處理。對于大屏幕，我們設置優惠券的寬和高都為固定值，同時增加字體大小。對于中等屏幕，我們稍微降低了優惠券的寬度和高度，字體大小也有所下降。對于小屏幕，我們將寬度設置為100%，高度設置為自適應，并且字體大小做出了相應的調整。

css代碼中，我們為優惠券添加了一些基本的樣式，如背景顏色、字體顏色、圓角等，可根據實際情況進行更改。

通過js和css的自適應處理，我們可以保證優惠券在不同的設備上都能夠有良好的展示效果，提升用戶的體驗和網站品質。