html响应式布局_媒体查询

html响应式布局_媒体查询

---

1 在html页面中根据不同的屏幕尺寸引入不同的css样式文件

<link href="styl1.css" type="text/css" rel="stylesheet" media="only screen and (max-width:600px)" >

2 响应式布局方式初始化

<meta name="viewport" content="width=divice-width,initial-scale=1" >

指定屏幕的宽度为设备的宽度，并且设置缩放比例为1倍

3 在css文件中根据不同的尺寸来设置不同的样式

当屏幕的尺寸大于960px时 body的背景颜色 为aqua
@media screen and (min-width: 960px){
    body{
        background-color: aqua;
    }
}

当屏幕的尺寸小于960px并且大于600px时 body的背景颜色 为red
@media screen and (min-width: 600px) and (max-width: 960px){
    body{
        background-color: red;
    }
}

当屏幕的尺寸小于600px时 body的背景颜色 为red
@media screen and (max-width: 600px){
    body{
        background-color: black;
    }
}