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;
}
}