响应式布局与自适应布局总结

响应式布局

什么是响应式布局？响应式与自适应式布局的区别？

• 响应式简单来说是一个网站的布局能够兼容多个不同终端， 而并不是传统的pc端一套页面，移动端一套页面。

• 当初Ethan Marcotte在2010年5月份提出的这个概念的时候是希望响应式可以一统pc&mobile页面，同时我们也做到了。但是这样带来的问题也越发让开发者心烦意乱，最重要的一点就是兼容各种设备会导致大量累赘的代码，维护与重构较麻烦。

• 响应式布局讲究的是使用一套布局代码来在不同终端展示，根据屏幕尺寸的大小对页面的布局进行改造（即当屏幕变小时，开发者可能会让标题栏中原本显示10个子标题现在只显示5个，隐藏剩下的5个或者让其在第二行出现），而自适应布局则相反，它使用一套布局代码不会根据屏幕大小改变还改变布局结构，它只是会等比缩小或者放大对应内容的尺寸。

响应式布局采用的技术

1. 视口控制（viewport）具体实现如下

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"">

: The metadata element - HTML: HyperText Markup Language | MDN

The type of metadata provided by the element can be one of the following: If the attribute is set, the element provides document-level metadata, applying to the whole page. If the attribute is set, the element is a pragma directive, providing information equivalent to what can be given by a similarly-named HTTP header.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

1. CSS的媒体查询（media query）具体如下：

@media only screen and (max-width: 480px){
    header .top .tel,
    header .top ul li:nth-child(3),
    header .top ul li:nth-child(4){
        display: none;
    }
}

使用@media 查询，你可以针对不同的媒体类型定义不同的样式。

@media - CSS: Cascading Style Sheets | MDN

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

1. 自适应图片等素材

<picture>
<source media="(max-width: 36rem)" srcset="img/ad001-l-480w.png"/>
<source srcset="img/ad001-l-1600w.png"/>
</picture>

: The Media or Image Source element - HTML: HyperText Markup Language | MDN

The HTML element specifies multiple media resources for the , the element, or the element. It is an empty element, meaning that it has no content and does not have a closing tag.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source

自适应布局

什么是自适应布局？

<div class="main about">
	<span class="title">
		<span class="icon"></span>
		<a href="aboutUs">关于我们</a>
	</span>
	<div class="mainText">
		<a href="aboutUs">
			<p class="content"></p>
		</a>
	</div>
</div>

.container .main{
    width: 90%;
    margin: 0 auto;
}
.container .main .title{
    display: inline-block;
    margin: 1.425rem 0;
    font-size: 1.25rem;
    color: rgb(13,76,187);
}
.container .main .title .icon{
    margin-right: 1rem;
    vertical-align: middle;
}
.container .main .icon{
    display: inline-block;
    width: .25rem;
    height: 1.3rem;
    background: url(../img/indexPage/mainBtn.png);
}
.container .main .mainText img{
    width: 100%;
    height: 100%;
}
.container .main .content{
    margin: 1.2rem 0 1.425rem 0;
    text-indent: 1.7rem;
    font-size: .9rem;
    line-height: 1.35rem;
    color: #3d3d3d;
}

自适应布局采用的技术

1. rem

1. flex 布局