javascript - Material Design 设备兼容 DIV 幻灯片 (JS/JQuery/CSS)

Question

我要实现的目标是:Desired Live Website

1. 单击 div 时的功能。幻灯片从右侧进入，在其中加载外部页面并在关闭时(忽略箭头按钮)将其关闭。
2. Slider Div 与设备兼容。也就是说，在网页上，它会占满一半屏幕，在移动屏幕上，它会相应地占满屏幕。(附上截图以供引用)
   
   

现在，

我已经完成了 Div 滑入并加载外部页面的第一个指针。 Fiddle Demo

$('#left').on('click',function(){
$('#frame').animate({left:'8'});
`});
$('#close').on('click',function(){
$('#frame').animate({left:'-100%'});});`

JS加载外部页面
showIframe = 函数(网址){ document.getElementById('iframetarget').src = url; document.getElementById('frame').style.display = 'block';}

我坚持的是如何完成 Pointer 2，其中 Div 中的幻灯片应该设备兼容。
这是完整的代码 fiddle :Full Demo
自由填充，指导我在 CSS 中使用新结构，也用于滑入的流体宽度。

任何帮助将不胜感激

Answer 1

您需要针对#frame 的媒体查询

@media (max-device-width : 480px) {
    #frame {
        width: 100%;
    }
}

当屏幕尺寸小于或等于 480px 时，Above 触发该类。这可以更改为您认为的任何宽度大小。