因为最近在做自适应布局的项目，所以学习了自适应。 总结如下。 这个总结只做效果，不关注效率和代码的优化。
1.css3
添加到html
css中的总体布局
CSS代码将内容复制到剪贴板
@ mediascreenand (最小宽度：0 px )公共css可以写在这里，也可以单独写，公共css )。
大于@ mediascreenand (最小宽度：380px ) 380 px，包含413，768，1200 )
@ mediascreenand (最小宽度：413 px ) }
@ mediascreenand (最小宽度：768 px ) }
@ mediascreenand (最小宽度：1200 px ) }
一般先写移动端的css min-width: 0px，
然后，写下更大屏幕的css min-width: 380px，重写css覆盖前的css，获得适应屏幕的效果。
2 .总体思路
0-768px，显示移动端效果。 width:100%，适合屏幕宽度。
768-1200px； 显示包含ipad的pc端的效果。 画面宽度固定为1200px；
1200px； 显示电脑侧的效果，屏幕主体宽度为1200px，显示在中央，两侧横幅的背景渐变延伸。
3.banner自适应
pc侧银行分为三层，
1楼为1200px，banner内的标题文字、小图像等内容包含在该div中。
第二个级别为width:100%，居中。 banner图具有一定的透明度，设置为该级别的背景图。 背景图居中，不重复。 当屏幕超过1200px时，它将无限延伸，直到背景达到最大。
第三层也是width:100%，渐变减去背景背景background-size : % 100 %，当屏幕超过第二层背景图像时，渐变无限延伸，与第二层紧密配合，成为babar
4 .两端对齐
文本对齐： justify； 文本对齐-最后： justify；
目前，它适用于大多数浏览器，但某些本机浏览器没有效果。 据说是因为最后一行没有两端对齐的效果。 例如，一个字符的最后一行不需要两端对齐。 因此，可以采用以下方法：
CSS代码将内容复制到剪贴板
. welcome1:after{
display :在线区块；
内容： '；
width:100%；
高清：0；
Overflow :隐藏；
}
: after伪类在指定元素后添加内容。
content: ' '表示要添加的内容。
宽度： 100 %。 添加一行宽度。
名为height:0的行高为0
overflow:这一行无法支撑，height:0；
希望以上是正文的全部内容，对大家的学习有帮助。