H5响应式布局 响应式图片 响应式布局网站怎么写？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5响应式布局 响应式图片 响应式布局网站怎么写？相关的知识，希望对你有一定的参考价值。
有很多中写法,1.媒体查询(@media),具体怎么使用可以去w3c去查询,很好用,这个相当于css中的js命令,可以规定在浏览器可视窗口的宽度分辨率在多少的情况下执行那部分的css代码.一般用于与其他css并排使用.
2.vw,vh布局,同样可以查查w3c里面有vw和vh详细解释,简单说就是可视化窗口的百分比长度,比如20vw指可视化窗口的20%长度,经过浏览器计算,最终换算为px单位, 一般用于长度单位使用,如果你会less的话,还可以声明less变量,将一个固定设计图的尺寸写在里面供其他使用,
例子:
@vw:19.2vw//此处声明变量,并将@vw赋值为19.2vw,比如设计图的尺寸为1920px,当然 没有这么大的,1920/100就是vw前面的由来
.box
height:20/@vw; width:100/@vw
//这里这么写就是说,你设计图本身是1920px,里面其中的一个各自为宽度100px,高度 20px,那么可以将px固定单位换成/@vw这种可变单位,从而达到页面内容跟随网页可 视区域大小去变动
3.用js去控制font-size的值,这个可以在网上去搜索,有相应的js文件,直接引入,然后类似于上面
将px单位换成rem即可,不过按照需要你自己需要手动更改换算比例,因为一般都是750px的 设计图为基础,具体我这不细说了哈
4.百分布局,很久不用了,高度控制不好整体网页瘫痪,反正我是不用了,有了vh和vw,百分布局原理与这个类似,当有浏览器不支持vw,vh命令的时候可以使用百分布局,不过ie现在谁还用........
暂时说这些把,还有别的话,望大牛补充 参考技术A html部分：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name='viewport' content='width=device-width,height=device-height,initial-scale=1.0'>
<title>易驰－响应式</title>
<link rel="stylesheet" type="text/css" href="css/normailze.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<!--[if lte IE 8]>
<h1>您的浏览器版本过低</h1>
<![endif]-->
<header>
<div>
<div>
<span>Tel : 010-6246-6684</span>
<span>地址 : 北京大兴区</span>
</div>
<ul>
<li><a href='#'>登陆</a></li>
<li><a href='#'>注册</a></li>
</ul>
</div>
<nav>
<a href=""><img src="img/logo.png"></a>
<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>
</nav>
</header>
<div>
<section class="ad owl-carousel">
<div>
<picture>
<source srcset="img/banner1-1.jpg" media="(min-width:50em)">
<source srcset="img/banner1-2.jpg" media="(min-width: 30em)">
<img srcset="img/banner1-3.jpg">
</picture>
</div>
<div>
<picture>
<source srcset="img/banner2-1.jpg" media="(min-width:50em)">
<source srcset="img/banner2-2.jpg" media="(min-width: 30em)">
<img srcset="img/banner2-3.jpg">
</picture>
</div>
<div>
<picture>
<source srcset="img/banner3-1.jpg" media="(min-width:50em)">
<source srcset="img/banner3-2.jpg" media="(min-width: 30em)">
<img srcset="img/banner3-3.jpg">
</picture>
</div>
</section>
<section>
<div>
<h1>热门课程</h1>
<div>
<a href=""><img src="img/jquery.jpg"></a>
<p>
<em>jQuery</em><br/>Each-left
</p>
</div>
<div>
<a href=""><img src="img/jquery.jpg"></a>
<p>
<em>jQuery</em><br/>Each-left
</p>
</div>
<div>
<a href=""><img src="img/jquery.jpg"></a>
<p>
<em>jQuery</em><br/>Each-left
</p>
</div>
</div>
</section>
<section>
<div>
<h1>我们一直在努力</h1>
<h3>在这里你可以查看我们培训中心的教育资源统计</h3>
<div>
<p><span>865,211</span><br />全球学员</p>
</div>
<div>
<p><span>865,211</span><br />全球学员</p>
</div>
<div>
<p><span>865,211</span><br />全球学员</p>
</div>
<div>
<p><span>865,211</span><br />全球学员</p>
</div>
<p>联系我们</p>
</div>
</section>
</div>
<footer>
<div>
<span>Copyright © 2017 易驰教育 | Powered By 易驰教育
</span>
<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>
</ul>
</div>
</footer>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/picturefill.js"></script>
<script src='js/main.js'></script>
</body>
</html>
CSS（main.css）部分：
* margin:0; padding:0;ul padding: 0; margin: 0; list-style: none;html font-size:62.5%; background: #fff;body line-height: 1.5; font-size: 1.2rem;::selection background: #b3d4fc;a color:#666; text-decoration: none;.clearfix:after content: ""; display: table; clear: both; /* header*/header width:100%;header .top background: #555555; line-height: 5rem;header .top .top-content float:left; padding: 0 2rem; color:#aaaaaa;header .top .top-content span padding: 0 1.5rem;header .top ul text-align: right;header .top ul li display: inline-block; padding: 0 1.5rem;header .top ul li + li border-left:1px solid #fff; line-height: 1rem;header .top ul li a display: inline-block; color:#aaaaaa; @media only screen and (max-width: 30em) header .top .top-content .dz display: none; header .top ul li display: inline-block; padding: 0 1rem; header .main background: #999999;header .main .logo float:left; padding: 2rem 0;header .main .logo img width:257px; height: 56px;header .main ul text-align: right;header .main ul li display: inline-block; padding: 4rem 1.5rem;header .main ul li a display: inline-block; color: #fff; font-size: 1.6rem;@media only screen and (max-width: 50em) header .main .logo float:none; display: block; text-align: center; header .main ul text-align: center; header .main ul li display: inline-block; padding: 2rem 1rem; @media only screen and (max-width: 30em) header .main ul li:nth-child(1) display: none; header .main ul li display: inline-block; padding: 2rem .5rem; /* 主体*/ .container width:100%; .fire-content width:90%; margin:5rem auto; font-size: 0;.fire-content h1 text-align: center; font-size: 4rem;.fire-content .item display: inline-block; width:calc(33.3333333% - 3rem); padding: 2rem 1rem;.fire-content .item + .item margin-left:1.5rem;.fire-content .item p,.fire-content .item a text-align: center; display: block; margin: 0 auto; font-size:1.8rem; @media only screen and (max-width: 50em) .fire-content .item display: inline-block; width:100%; padding:2rem 0; text-align: center; .fire-content .item + .item margin-left:0; .strtive padding:3rem 0; background: #555555; border-bottom:1px solid #fff; font-size:0;.strtive-content width:90%; margin: 0 auto; color: #fff;.strtive-content h1 text-align: center; font-size: 5rem; color: orange; font-weight: bold;.strtive-content h3 text-align: center; font-size: 1.8rem; padding:2rem 0; .strtive-content .item display: inline-block; width:calc(25%); padding:2rem 0; .strtive-content .item p font-size:1.6rem; text-align: center;.strtive-content .item p span font-size: 3rem; color: orange; font-weight: bold;.strtive-content p text-align: center; font-size: 1.8rem;@media only screen and (max-width: 50em) .strtive-content .item width:calc(33.333333%); .strtive-content .item:nth-child(3) display:none; @media only screen and (max-width: 30em) .strtive-content .item:nth-child(4) display:none; .strtive-content .item width:calc(50%); .strtive-content h1 font-size: 2.1rem; .strtive-content h3 font-size: 1.2rem; /* footer*/ footer width:100%; background:#555555;footer .footer-content width:90%; line-height: 5rem; margin: 0 auto;footer .footer-content span float:left; color:#fff;footer .footer-content ul text-align: right;footer .footer-content ul li display: inline-block; padding: 0 .5rem;footer .footer-content ul li a display: inline-block; color:#fff;@media only screen and (max-width: 50em) footer .footer-content ul li:nth-child(3), footer .footer-content ul li:nth-child(4) display: none; footer .footer-content ul li display: inline-block; padding: 0 .3rem; @media only screen and (max-width: 30em) footer .footer-content span display: none; footer .footer-content ul li display: inline-block; padding: 0 .3rem;
js（main.js）部分：
$(document).ready(function() $(".owl-carousel").owlCarousel( items:1, autoplay:true, autoplayTimeout:1000, loop:true, autoplayHoverPause:true ););
by三人行慕课
以上是关于H5响应式布局 响应式图片 响应式布局网站怎么写？的主要内容，如果未能解决你的问题，请参考以下文章