CSS手機雜志預覽跳轉

@media only screen and (max-width: 768px) {
/* 手機屏幕時隱藏桌面版預覽按鈕 */
.desktop-preview {
display: none;
}
/* 移動設備時顯示移動版預覽按鈕 */
.mobile-preview {
display: block;
}
}
/* 桌面版預覽按鈕樣式 */
.desktop-preview {
font-size: 16px;
color: #555;
background-color: #fff;
border: 1px solid #ddd;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
/* 移動版預覽按鈕樣式 */
.mobile-preview {
font-size: 16px;
color: #555;
background-color: #fff;
border: 1px solid #ddd;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
display: none; /* 初始隱藏 */
}
/* 預覽頁面樣式 */
.preview-page {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: none; /* 初始隱藏 */
}
/* 預覽頁面內容樣式 */
.preview-page .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 500px;
background-color: #fff;
border-radius: 4px;
padding: 20px;
}
/* 預覽頁面關閉按鈕樣式 */
.preview-page .close-btn {
position: absolute;
top: 20px;
right: 20px;
font-size: 24px;
color: #555;
cursor: pointer;
}

在移動設備上預覽雜志內容是一個非常常見的需求，為了更好的用戶體驗，我們通常會提供兩種預覽方式：桌面版預覽和移動版預覽。同時，我們還需要實現預覽頁面跳轉功能，以及關閉預覽頁面的功能。在CSS中實現這些功能非常簡單，只需要使用@media查詢，然后在頁面中添加相應的HTML和CSS即可。