css @media实现不同屏幕分辨率响应式代码示例

vue组件中拷贝各模块也可使用。

本示例中颜色和媒体查询值参考(copy)来源layui框架。

<div id="dialog">xx</div>
 #dialog {
    background-color: bisque;
  }

@media only screen and (max-width: 768px) {
  #dialog {
    width: 90%;
    background-color: #009688;
  }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  #dialog {
    width: 70%;
    background-color: #5FB878;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  #dialog {
    width: 70%;
    background-color: #393D49;
  }
}

@media only screen and (min-width: 1200px) {
  #dialog {
    width: 50%;
    background-color: #1E9FFF;
  }
}
版权声明

弈心博客


本文首发site_name,转载请附上博文链接!