Javascript 材料设计设备兼容DIV滑入（JS/JQuery/CSS）

我希望实现的目标是：

单击div时，滑入从右侧进入，加载其中的外部页面，然后在关闭（忽略箭头按钮）时将其关闭

滑块Div与设备兼容。也就是说，在网页上，它占据了屏幕的一半，在移动屏幕上，它相应地占据了屏幕。（附屏幕截图供参考）

现在,

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

JS用于加载外部页面

showIframe=函数（url）{
document.getElementById（'iframetarget'）。src=url；
document.getElementById（'frame'）.style.display='block'；}

我一直关注的是如何完成指针2，其中滑入Div应该与设备兼容。
下面是完整的代码小提琴：
fill free可引导我找到CSS中的新结构，也可用于滑入的流体宽度。

任何帮助都将不胜感激

---

您需要对#帧进行媒体查询

---

当屏幕大小小于或等于480px时，上面会触发该类。这可以更改为您感觉的任何宽度大小。

在css中简单使用

max width

width: 100%
max-width: 500px;

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

width: 100%
max-width: 500px;