简单的响应式页面小示例

最新推荐文章于 2022-10-20 13:47:25 发布

weixin_34387284

最新推荐文章于 2022-10-20 13:47:25 发布

阅读量314

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/sallency/blog/393274

版权

2019独角兽企业重金招聘Python工程师标准>>>

media query的简单小演示，关于media query的相关说明可以看这里 CSS3 Media Query的使用方法

这里没做太多的工作，只是展示档横向菜单无法完全显示时会自动更换为侧滑菜单，对应PC到移动的场景转换。

保存成html在本地打开就好

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>请用webkit内核的做演示</title>
<style type="text/css">
body, a{
margin: 0px 0px;
padding: 0px 0px;
text-decoration: none;
color:#000;
font:18px MicroSoft Yahei;
}

p{
font:18px MicroSoft Yahei;
padding: 5px 10px;
}
.navi{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 65px;
background: #F5F7FA;
border: 3px solid #E6E9ED;
z-index: 2;
line-height: 65px;
padding-left: 10px;
}

#container{
position: fixed;
left: 0px;
top: 65px;
width: 100%;
height: 900px;
background-color: rgba(0,200,255,0.7);
z-index: 1;
transition-delay: 0.5s;
transition-duration: 1s;
margin: 0px 0px;
}


@media screen and (min-width: 570px){

#mobile_menu_btn{
display: none;
}

#mobile_menu{
display: none;
}

.pc{
list-style: none;
height: 100%;
margin: 0px 0px;
width: 900px;
padding-left: 10px;
}

.pc > li{
display: inline-block;
width: 100px;
margin: 15px 0px;
text-align: center;
border: 1px solid #ccc;
height: 30px;
line-height: 30px;
border-radius: 5px;
background: #ccc;
cursor: pointer;
}

.pc > li:hover{
background: #ccd;
}

}

@media screen and (max-width: 569px){

#mobile_menu{
position: fixed;
left: 0px;
top: 65px;
width: 300px;
background: rgba(200,200,200,0.1);
z-index: 0;
height: 800px;
display: block;
}

.mobile{
list-style: none;
padding: 0px 10px;
}

.mobile li{
margin: 10px 0px;
width: 100%;
border-bottom: 1px solid #ccc;
border-radius: 5px;
background: #ccc;
padding:5px 5px;
cursor: pointer;
}

.mobile > li:hover{
background: #ccd;
}
#mobile_menu_btn{
border:1px solid #ccc;
border-radius: 5px;
width: 50px;
height: 50px;
outline: none;
transition-duration: 1s;
}

#mobile_menu_btn:hover{
-webkit-transform: rotate(360deg);
background: #aab;
cursor: pointer;
}

.pc{
display: none;
}

}
</style>
</head>
<body>

<nav>
<div>
<button id="mobile_menu_btn" onclick="toggle()">Menu</button>
<ul>
<li><a href="http://my.oschina.net/sallency" target="_blank">首页</a></li>
<li><a href="#">新鲜事</a></li>
<li><a href="#">画册墙</a></li>
<li><a href="#">微小站</a></li>
<li><a href="http://my.oschina.net/sallency" target="_blank">关于我们</a></li>
</ul>
</div>
</nav>

<div id="container">
<p>纯html+css+js控制，没写那么全面，做个小演示而已，所以你得用webkit内核的浏览器看，但别用360，谢谢，这货是浏览器？別開玩笑了！<a href="http://my.oschina.net/sallency" target="_blank">【我的博客】</a></p>
</div>

<div id="mobile_menu">
<ul>
<li><a href="http://my.oschina.net/sallency" target="_blank">首页</a></li>
<li><a href="#">新鲜事</a></li>
<li><a href="#">画册墙</a></li>
<li><a href="#">微小站</a></li>
<li><a href="http://my.oschina.net/sallency" target="_blank">关于我们</a></li>
</ul>
</div>

<script type="text/javascript">
function toggle(){
var container = document.getElementById("container");
if(container.style.WebkitTransform  == ''){
container.style.WebkitTransform  = 'translateX(300px)';
} else {
container.style.WebkitTransform  = '';
}
}
</script>
</body>
</html>

转载于:https://my.oschina.net/sallency/blog/393274