css手机杂志预览跳转 |css media 用法

@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即可。