响应式网站设计 (Responsive Web design) 是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有 meta 声明的 viewport。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@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)”>