media query语法
程序员文章站
2022-06-01 16:51:51
...
设置浏览器宽度大于1000px时的css样式
@media screen and (min-1000px)
设置浏览器宽度小于480px时的css样式
@media screen and (max-480px)
<! DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/>
<title>光标</title>
<style>
#container{
text-align:center;
margin:auto;
width:750px;
}
#container>div{
border:1px solid #aaf;
text-align:left;
box-sizing:border-box;
border-radius:12px 12px 0px 0px;
padding:5px;
}
div#left{
float:left;
width:300px;
height:260px;
}div#main{
float:left;
width:450px;
height:260px;
}div#right{
float:left;
width:750px;
}
@media screen and (min-width:1000px){
#container{
text-align:center;
margin:auto;
width:960px;
}
#container>div{
border:1px solid #aaf;
box-sizing:border-box;
border-radius:12px 12px 0px 0px;
padding:5px;
}
div#left{
float:left;
width:240px;
height:260px;
}
div#main{
float:left;
width:460px;
height:260px;
clear:none;
}
div#right{
float:left;
width:260px;
height:260px;
}
}
@media screen and (max-width:480px){
#container{
text-align:center;
margin:auto;
width:450px;
}
#container>div{
border:1px solid #aaf;
box-sizing:border-box;
border-radius:12px 12px 0px 0px;
padding:5px;
}
div#left{
float:left;
width:450px;
height:150px;
}
div#main{
float:left;
width:450px;
height:260px;
clear:both;
}
div#right{
float:left;
width:450px;
height:170px;
}
}
</style>
</head>
<body >
<div id="container">
<div id="left">
<h2>十字箭头光标</h2>
十字箭头光标十字箭头光标十字箭头光标十字箭头光标十字箭头光标十字箭头光标十字箭头光标
十字箭头光标十字箭头光标十字箭头光标十字箭头光标
</div>
<div id="main">
<h2>代表移动十字箭头光标</h2>
代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标
代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标
代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标
代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标代表移动十字箭头光标
</div>
<div id="right">
<h2>垂直文本编辑光标</h2>
垂直文本编辑光标垂直文本编辑光标垂直文本编辑光标垂直文本编辑光标
垂直文本编辑光标垂直文本编辑光标垂直文本编辑光标垂直文本编辑光标
垂直文本编辑光标垂直文本编辑光标垂直文本编辑光标
垂直文本编辑光标垂直文本编辑光标
</div>
</div>
</body>
屏幕显示
但是在浏览器小于480px时并不会显示css的样式
可以将浏览器宽度设置与手机屏幕宽度相同
<meta name="viewport" content="width=device-width,initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0" />
上一篇： 响应式布局和media query语法
下一篇： js面试题