网页各种设备自适应

🍒本篇是一篇十分优秀的案例，走过路过是千万不能错过~

电脑全屏1920px

手机尺寸375×667

ipad 768×102尺寸 也能轻松应对

🍑🍑🍑 这简直太秀了叭 爱了爱了

代码分析:

第一部分：header部分

正常显示：

缩放后显示：

代码：

htnl部分

<header id="header"> <section class="menu"> menu <ul> <li><a href="#">文章</a></li> <li><a href="#">素材</a></li> <li><a href="#">活动</a></li> <li><a href="#">素材</a></li> <li><a href="#">活动</a></li> <li><a href="#">更多</a></li> </ul> </section> <section class="logo"> <h1><a href="#" title="觉唯设计">觉唯设计</a></h1> </section> <!-- 中间菜单选项 --> <nav class="nav"> <a href="#">文章</a> <a href="#">素材</a> <a href="#">活动</a> <a href="#">素材</a> <a href="#">活动</a> <a href="#">更多</a> </nav> <a href="#" class="login">登录</a> </header> <!-- 放后面背景图片 --> <section id="banner"></section>

css部分

/* 设置头部固定 */ #header{ position: fixed; /* 宽通栏自适应 */ width: 100%; height: 50px; /* 透明度 */ background: rgba(53, 50, 50, 0.5); /* 转为弹性盒 */ display: flex; /* 调整边距位置与justify-content相配合 */ padding:0 50px; /* 转为怪异盒模型，不被padding影响计算 */ box-sizing: border-box; /* 水平方向位置 */ justify-content: space-between; /* 垂直方向位置 */ align-items: center; } #header a{ color: #fff; } .logo a{ display: block; width: 150px; height: 50px; background: url(../images/logo.png) no-repeat; background-size: cover; text-indent: -9999px; } .nav{ display: flex; } .nav a{ line-height: 50px; padding: 0 26px; } /* 隐藏菜单 */ .menu{ display:none; } /* 设置顶部背景图片 */ #banner{ height: 250px; background: url(../images/top-bg.png) no-repeat center top; /* 等比例缩放图片 */ background-size: cover; }

第二部分

正常显示：

缩放后显示：

代码：

html部分

<!-- 主体内容，可以什么都不写 --> <section id="main"> <!-- 主体内容第一部分 --> <section class="pic"> <!-- 分为左右两部分 各占一半--> <!-- 左边一张大图 --> <div class="pic-left"> <a href="#"><img src="images/swiper1.jpeg" alt=""></a> </div> <!-- 右边两张小图 --> <div class="pic-right"> <a href="#"><img src="images/1.png" alt=""></a> <a href="#"><img src="images/2.png" alt=""></a> </div> </section> <!-- 主体内容第二部分 --> <section class="photobox"> <!-- 图文结构 --> <figure> <img src="images/1.jpg" alt=""> <figcaption> <strong>迷你微型摄影展</strong> <div> <span>2016-12-12</span><span>作者：tom </span> </div> </figcaption> </figure> <figure> <img src="images/4.jpg" alt=""> <figcaption> <strong>迷你微型摄影展</strong> <div> <span>2016-12-12</span><span>作者：tom </span> </div> </figcaption> </figure> <figure> <img src="images/2.jpg" alt=""> <figcaption> <strong>迷你微型摄影展</strong> <div> <span>2016-12-12</span><span>作者：tom </span> </div> </figcaption> </figure> <figure> <img src="images/2.jpg" alt=""> <figcaption> <strong>迷你微型摄影展</strong> <div> <span>2016-12-12</span><span>作者：tom </span> </div> </figcaption> </figure> <figure> <img src="images/2.jpg" alt=""> <figcaption> <strong>迷你微型摄影展</strong> <div> <span>2016-12-12</span><span>作者：tom </span> </div> </figcaption> </figure> </section> </section>

css部分

/* 主体内容第一部分 */ .pic{ /* 变弹性盒 */ display: flex; /* space-around不能使用,左右两边明显不对称.只能使用padding调整 */ padding: 0 10px; /* 中间出现距离,两部分两边分布 */ justify-content: space-between; /* 缩放让他自动换行 */ flex-wrap: wrap; /* 换行之后侧轴不会留空隙 */ align-content: flex-start; /* 与上面留有间隙空白 */ margin-top: 10px; } /* 主体第一部分左边大图 */ .pic-left{ /* 留空隙 */ width: 49%; } .pic-left a{ /* 转块元素宽高由里面图片撑起 */ display: block; } .pic-left a img{ /* 图片只写宽不写高等比例缩放 */ width: 100%; } /* 主体第一部分右边两张小图 */ .pic-right{ /* 留空隙 */ width: 49%; /* 两个a横向摆放 */ display: flex; /* 两个a也需要两边分布,中间留有空白 */ justify-content: space-between; } .pic-right a{ display: block; /* 里面两个a每个都是49% */ width: 49%; } .pic-right a img{ width: 100%; } /* 主体内容第二部分 */ .photobox{ /* 弹性盒 */ display: flex; /* 留有空间平均分布 */ justify-content: space-around; /* 换行 */ flex-wrap: wrap; /* 避免父元素有高出现问题 */ align-content: flex-start; } .photobox figure{ /* 每个部分占24%剩下4%做间隔 */ width: 24%; padding: 5px; /* 把5px收在24%之内 */ box-sizing: border-box; /* 加阴影 */ box-shadow: 3px 3px 10px #999; /* 解决与上方间隔 */ margin-top: 10px; } .photobox figure img{ width: 100%; } /* 媒体查询 */ @media only screen and (max-width:1024px){ .nav{ display: none; } .menu{ display:block; height: 50px; line-height: 50px; color: #fff; cursor: pointer; } .menu ul{ position: absolute; left: 0; top: 50px; width: 100%; display: none; } .menu:hover>ul{ display: block; } .menu ul li{ border-top: 1px solid #777777; } .menu ul li a{ display: block; height: 50px; background: rgba(0,0,0,0.5); text-align: center; } .pic{ justify-content: center; } .pic-left{ width: 98%; margin-top: 10px; } .pic-right{ width: 98%; margin-top: 10px; } .photobox figure{ /* 换行从24%变成45% */ width: 48%; } } /* 当屏幕宽度低于767px时主体第二部分的figure宽度 */ @media only screen and (max-width:767px){ .photobox figure{ width: 96%; } }