自适应Iframe及屏幕自适应Div实现咨询（附示例代码）

我做了一个能随屏幕高度与宽度自适应调整的div容器，容器里的按钮会自动适配浏览器窗口的尺寸变化——不管你怎么拉拽窗口调整大小，按钮都能完美适配～

核心SCSS代码 #

.btn {
  position: relative;
  border: 0 !important;
  
  &:focus {
    outline: 0;
  }
  
  &:hover {
    top: 2px;
  }
  
  &:active {
    top: 6px;
  }
  
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  font-weight: bold !important;
  max-width: 250px;
  width: 100%;
  color: white;
  .border-radius(10);
  .transition(all, 50ms, ease);
  .btn(rgb(204, 204, ...);
}

这段代码里，按钮的宽度设置为100%同时限制最大宽度250px，既保证了在小屏幕上能占满可用空间，又不会在大屏上显得过于宽大。另外还处理了按钮的聚焦、悬浮、点击等交互状态，让按钮的反馈更流畅自然～

内容的提问来源于stack exchange，提问作者PBM