分针网
简单的响应式布局
伍晓辉 2017-07-19 09:19:45
阅读 0 点赞   阅读 写了0文章
前端开发
一:媒体类型

screen(屏幕),print(打印机)

二:操作符:

1.and操作符 连接不同的媒体查询,使媒体查询更加复杂化
@media screen and (min-width: 480px) and (max-width: 767px){
body{
background: #27ae60;
}
}

操作的设备是屏幕,并且可视区的宽度在480到767之间时,屏幕变为绿色

2.or操作符

@media screen and ( orientation : landscape), screen and (min-width : 320px){
body{
background: #ef0089;
}
}

3.not操作符
@media not screen and ( orientation : landscape){
body{
background: #ef0089;
}
}
not操作符后面必须紧跟着媒体的类型,比如screen或者print,如果没有设备类型,将永远返回假
only操作符后面也必须跟着媒体的类型
not操作符会否定所有的操作,后面所有的条件得出的结果如果是真,整个返回的就是假

三:一些概念

device-aspect-ratio是设备的宽高比例
sapect-ratio是可视区的宽高比例
resolution设备的像素密度

@media screen and ( max-resolution : 1dppx ), screen and ( -webkit-device-pixel-ratio : 1){
body{
background: #c039b2;
}
}

如果操作的是屏幕,并且最大的像素密度是1dppx
orientation : 判断设备的方向
水平方向:landscape
垂直方向:portrait
media queries : 当页面的宽度达到设置的值时,就运用某个样式的操作

四:一个小实例

html部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单的响应式布局</title>
<link rel="stylesheet" type="text/css" href="css/vp1.css">
</head>
<body>
<div class="container">
<header id="header">
<h3>页头</h3>
</header>
<nav id="navigation">
<h3>导航</h3>
</nav>
<section id="mainbody">
<h3>主体</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem erat, egestas quis luctus ut, rhoncus vitae risus. Integer venenatis libero sit amet sapien dictum, quis bibendum mi volutpat. Cras pretium quam quis magna facilisis, eget feugiat nisi lacinia.</p>
</section>
<aside id="sidebar">
<h3>边栏</h3>
<p>Donec dolor arcu, interdum sed turpis faucibus, placerat ultricies felis. Donec pulvinar gravida rhoncus. Suspendisse vestibulum est eget dolor lobortis.</p>
</aside>
<footer id="footer">
<h3>页脚</h3>
</footer>
</div>
</body>
</html>

css部分

body{
margin-top: 35px;
text-align: center;
}
h3,p{
padding: 20px;
}
.container{
width: 960px;
margin: 0 auto;
}
#header, #navigation, #footer, #mainbody, #sidebar{
height: 100px;
line-height: 25px;
background: #eee;
margin-bottom: 20px;
}
#mainbody,#sidebar{
height: 300px;
float: left;
}
#mainbody{
width: 620px;
margin-right: 20px;
background: #ddefcb;
}
#sidebar{
width: 320px;
background: #ffcbdd;
}
#footer{
clear: both;
}
@media (min-width: 1200px) {
.container{
width: 1170px;
}
#mainbody{
width: 770px;
margin-right: 30px;
}
#sidebar{
width: 370px;
}
}
@media (max-width: 959px){ /*当width变为百分比,布局就会变成流动的布局*/
.container{
width: 100%;
}
#mainbody{
width: 67%;
}
#sidebar{
width: 30%;
float: right;
}
}
@media (max-width: 767px){
#mainbody, #sidebar{
float: none;
width: 100%;
}
}

第二个实例:HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/nav.css">
<script src="https://use.fontawesome.com/38237ad276.js"></script>
<script type="text/javascript" src="js/picturefill.js"></script>
<script type="text/javascript" src="js/swipe.js"></script>
<title>响应式导航</title>
</head>
<body id="top">
<div class="wrapper">
<header id="header">
<div class="container">
<h1>Nacigation</h1>
<h2>Responsive Toggle Navigation</h2>
</div>
</header>
<div class="container">
<a href="#nav" class="open toggle-btn">
<!-- 显示三个横杠小图标的代码 -->
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
<nav id="nav">
<ul>
<li><a href="#" class="active">项目 1</a></li>
<li><a href="#">项目 2</a></li>
<li><a href="#">项目 3</a></li>
<li><a href="#">项目 4</a></li>
<li><a href="#">项目 5</a></li>
</ul>
<a href="#top" class="close toggle-btn">
<!-- 关闭小图标 -->
<i class="fa fa-times-circle" aria-hidden="true"></i>
</a>
</nav>
<div id="showcase">
<div id="slider" class="swipe">
<div class="swipe-wrap">
<div>![](img/01.jpg)</div>
<div>![](img/02.jpg)</div>
<div>![](img/03.jpg)</div>
</div>
<div class="slider-control">
<button class="left" onclick="mySwipe.prev()"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
<button class="right" onclick="mySwipe.next()"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
</div>
</div>
</div>
<script>
window.mySwipe = Swipe(document.getElementById('slider'));
</script>
<article id="mainbody">
<h3>主体</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem erat, egestas quis luctus ut, rhoncus vitae risus. Integer venenatis libero sit amet sapien dictum, quis bibendum mi volutpat. Cras pretium quam quis magna facilisis, eget feugiat nisi lacinia.</p>
</article>
<sidebar id="sidebar">
<h3>边栏</h3>
<p>Donec dolor arcu, interdum sed turpis faucibus, placerat ultricies felis. Donec pulvinar gravida rhoncus. </p>
</sidebar>
</div>
<footer id="footer">
<div class="container">
<h5>&copy; Copyright Ninghao.net</h5>
</div>
</footer>
</div>
</body>
</html>

css部分

body{
margin-top: 35px;
text-align: center;
margin: 0;
padding: 0;
}
ul, ol{
padding: 0;
list-style: none;
}
h3, p{
padding: 20px;
}
img{
width: 100%;
/*max-width防止图片被拉伸*/
max-width: 100%;
}
/*#showcase{
background-image: url(../img/01.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
响应式很重要的一点:background-size: 100%;
-webkit-background-size: 100%;
cover的意思是,即使不是所有的都是56%,别的图像照样可以填满整个区域
background-size: cover;
margin-top: 20px;
经过计算得到的值,使得可视区无论怎么变化都不会留下空白
padding-top: 56%;
width:500px; 这样缩小可视区,图像的上下就会留下很大的空白
}
*/
.container{
widows: 960px;
margin: 0 auto;
}
#header, #nav, #footer, #mainbody, #sidebar{
line-height: 25px;
background: #eee;
margin-bottom: 20px;
padding-bottom: 20px;
color: #999;
}
#mainbody, #sidebar{
height: 300px;
float: left;
margin-bottom: 35px;
}
#mainbody{
width: 620px;
margin-right: 20px;
}
#sidebar{
width: 320px;
}
#footer{
clear: both;
}
#footer h5{
padding-top: 20px;
}
#footer{
background: none;
border-top: 1px solid #eee;
}
#header{
background: none;
border-bottom: 1px solid #eee;
}
#heaader h1{
font-size: 2.5em;
margin-top: 50px;
color: #3c3c3c;
}
#header h2{
font-size: 1em;
color: #ccc
}
/*导航菜单*/
ul{
list-style: none;
padding: 0;
}
#nav li, #nav li a{
display: inline-block;
padding: 7px 15px;
text-decoration: none;
color: #3b3b3b;
}
#nav li a:hover{
background: #eee;
}
#nav{
background: none;
z-index:9999;
}
#nav .active{
background: #eee;
}
.toggle-btn{
display: none;
}
/*swipe幻灯片*/
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
.slider-control .left{
position: absolute;
left: 30px;
top: 45%;
}
.slider-control .right{
position: absolute;
right: 30px;
top: 45%;
}
.slider-control button{
width: 50px;
height: 50px;
font-size: 20px;
cursor: pointer;
background: #000;
color: #fff;
border: 3px solid #fff;
border-radius: 50%;
opacity: 0.7;
display: none;
}
.swipe:hover button{
display: block;
}
.silder-control button:hover{
opacity: 0.5;
}
@media(min-width: 1200px){
.container{
width: 1170px;
}
#mainbody{
width: 770px;
margin-right: 30px;
}
#sidebar{
width: 370px;
}
}
@media(max-width: 959px){
.container{
width: 100%;
}
#mainbody{
width: 67%;
}
#sidebar{
width: 30%;
float: right;
}
}
@media(max-width: 767px){
#mainbody, #sidebar{
width: 100%;
float: none;
}
#header{
font-size: 12px;
text-align: left;
padding-left: 20px;
}
/*按钮切换*/
.toggle-btn{
display: inline-block;
font-size: 25px;
text-decoration: none;
background: #000;
color: #fff;
padding: 7px 10px;
position: absolute;
right: 10px;
top: 50px;
}
/*隐藏关闭按钮*/
#nav .close{
display: none;
}
/*导航为目标状态的桑畅显示关闭按钮*/
#nav:target .close{
display: inline-block;
}
/*初始时隐藏导航*/
#nav{
display: none;
}
/*导航为目标状态时的样式*/
#nav:target{
display: block;
position: absolute;
top: 0;
padding-top: 70px;
width: 100%;
}
/*目标状态下的导航的ul标签*/
#nav:target ul{
background: #000;
}
/* 目标状态下的导航的 li 与 a */
#nav:target li, #nav:target li a{
display: block;
color: #eee;
text-align: left;
}
/*目标状态下的导航的列表下的a标签的悬停样式*/
#nav:target li a:hover{
background: #3b3b3b;
}
/*目标状态下导航的激活状态的样式*/
#nav:target .active{
background: #272727;
}
}
/*
@media(max-width: 480px){
#showcase{
background-image: url(../img/01_s.jpg);
}
}
@media(max-width: 480px) and (min-resolution : 2dppx), (max-width: 480px) and (-webkit-min-device-pixel-ratio : 2){
#showcase{
background-image: url(../img/01_s_2x.jpg);
}
}
*/
/*当可视区变小时,用像素低的图片*/




©著作权归作者所有
18650135259
客服微信