响应式设计

响应式设计的基本原理

响应式网站设计 (Responsive Web design) 是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

@media screen and (max-width: 990px) {
    .container {
        background: orange;
    }
}

@media (max-width: 575px) {
   .call-me {
      .call-item:first-child {
         border-right: 0 !important;
         border-bottom: 1px solid #e6e6e6;
      }
   }
}

<head>里边
<link rel=”stylesheet” href=”xxx.css” media=”only screen and (max-width:480px)”>

页面头部必须有 meta 声明的 viewport。

<meta name="viewport" content="width=device-width, initial-scale=1.0">