media query语法和响应式布局
程序员文章站
2022-06-01 17:23:14
...
media query语法和响应式布局
media query 语法
media query 的语法稍微有点复杂，语法格式如下：
@media not|only 设备类型[and 设备特性] *
在上面语法格式中， [ and 设备特性 ] 部分可以出现 O~N 次，通过使用 多个[and 设备特性］可以对多个设备特性进行匹配。
media query 语法格式中的设备类型如表所示。
实际上一般使用时，设备类 填写 screen, 管是 电脑 屏幕 是手机、平板电脑屏幕都对应于 screen 设备
media query 语法格式中的设备特性如表所示。
响应式布局
如果是手机响应式布局时必须在head中加下面这行代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
下面定义了一个 栏布局的页面 页面在宽度大于1000px的浏览器中显示时，3个栏目会并排显示；在宽度小于 480px 的浏览器中显示时，3个栏目会垂直排列显示。因此，页面需要对这种浏览器宽度分别定义不同的CSS 样式。页面代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#container{
margin: auto;
width: 750px;
}
#container>div{
border: 1px solid red;
text-align: left;
box-sizing: border-box;
border-radius: 12px;
padding: 4px;
}
div#left{
width: 300px;
height: 260px;
float: left;
}
div#main{
width: 450px;
height: 260px;
float: left;
/* 清除右边的浮动 */
clear: right;
}
div#right{
width: 750px;
float: left;
}
/* 浏览器宽度大于1000px的样式 */
@media screen and (min-width:1000px){
#container{
margin: auto;
width: 960px;
}
#container>div{
border: 1px solid red;
text-align: left;
box-sizing: border-box;
border-radius: 12px;
padding: 4px;
}
div#left{
width: 240px;
height: 260px;
float: left;
}
div#main{
width: 460px;
height: 260px;
float: left;
/* 让左右两边都可以出现float元素 */
clear: none;
}
div#right{
width: 260px;
float: left;
height: 260px;
}
}
/* 浏览器宽度小于480px的样式 */
@media screen and (max-width:480px){
#container{
margin: auto;
width: 450px;
}
#container>div{
border: 1px solid red;
text-align: left;
box-sizing: border-box;
border-radius: 12px;
padding: 4px;
}
div#left{
width: 450px;
height: 150px;
float: left;
}
div#main{
width: 450px;
height: 260px;
float: left;
/* 让左右两边都不可以出现float元素 */
clear: both;
}
div#right{
width: 450px;
float: left;
height: 170px;
}
}
</style>
<body>
<div id="container">
<div id="left">
<h2>cccccc</h2>
. . ． 省略页面内容
</div>
<div id="main">
<h2>cccccccccccccc</h2>
．．． 省略页而内容
</div>
<div id="right">
<h2>cccccccccc</h2>
．．．省略页面内容
</div>
</div>
</body>
</html>
px
上一篇： [转]如何在面试时选择合适的测试人员？