响应式设计 媒体查询：支持不同的视口 标签viewport 标签viewport——浏览器不再缩放页面，可以针对不同视口来修正设计效果 <meta name="viewport" content="w

   响应式设计

媒体查询：支持不同的视口

标签viewport

标签viewport——浏览器不再缩放页面，可以针对不同视口来修正设计效果

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

媒体查询语法

body{
    background-color: grey;
}

@media screen and (max-width: 960px) {
    body{
        background-color;red;
    }
}
@media screen and (max-width: 780px) {
    body{
        background-color;green;
    }
}
@media screen and (max-width: 550px) {
    body{
        background-color;yellow;
    }
}

创建查询范围

@import url("phone.css") screen and (min-width:200px) and (max-width:360px)

媒体类型

媒体类型——screen

媒体特性

视口宽度——width

视口高度——height

设备屏幕宽度——device-width

设备屏幕高度——device-height

检查设备处于横向还是纵向——orientation

基于视口的宽高比——aspect-ration

基于设备屏幕的宽高比——device-aspect-radio