CSS自适应布局思路
我要评论最近在做一个自适应布局的项目，所以学了下自适应，下面是总结。此总结只做效果，不关注效率和代码优化。
1.css3
html中添加
css中的整体布局
- @media screen and (min-width: 0px) {公共css可以写在这里，也可以单独写出来，公共css}
- @media screen and (min-width: 380px){大于380px,包括>413，>768,>1200}
- @media screen and (min-width: 413px){}
- @media screen and (min-width: 768px){}
- @media screen and (min-width: 1200px) {}
一般先写移动端的css min-width: 0px,
然后再写大一点的屏幕的css min-width: 380px，通过重写css覆盖之前的css达到自适应屏幕的效果。
2.整体思路
0-768px,显示移动端的效果。width:100%,自适应屏幕宽度。
768-1200px;显示pc端效果，包括ipad。屏幕宽度为固定1200px;
>1200px;显示pc端效果，屏幕主体宽度为1200px,居中显示，两边banner背景以渐变延伸。
3.banner自适应
pc端banner分三层，
一层为1200px，banner内的标题文字，小图片等内容放在这个div中。
第二层为width:100%,居中显示，banner图带有一定透明度，设为这一层的背景图,背景图居中，不重复。当屏幕超过1200px两边背景会无限延伸，直到达到最大。
第三层也为width:100%,拉一条渐变做背景 background-size:100% 100%,当屏幕超过第二层背景图片时，渐变无限延伸，切配合第二层作为banner图主体图片（第二层是半透明的）。
4.两端对齐
如今适用于大多数的浏览器，但是一些比较原生的浏览器会没有效果。听说是因为最后一行没有两端对齐效果，如一段文字的最后一行没有必要两端对齐。所以可以采用如下方式：
- .welcome1:after{
- display:inline-block;
- content:'';
- width:100%;
- height:0;
- overflow:hidden;
- }
：after 伪类 在指定元素之后添加内容。
content:'' 表示要添加的内容。
width：100%。添加一行的宽度。
height:0 这一行的高度为0；
overflow:这一行不会被撑大，height:0;
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
- 下面小编就为大家带来一篇深入理解CSS定位与层叠。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-04-15
这是一款基于纯css3绘制可爱的小猪猪样式效果源码。画面清新自然，整个代码采用纯css3实现，没有引入任何外部图像元素2016-04-15- 你需要知道的三个CSS技巧，在CSS中用attr()显示HTML属性值，使用counter()在列表中自动添加序号，使用calc()做算术，感兴趣的小伙伴们可以参考一下2016-04-15
- 这篇文章主要介绍了GitHub倡导的CSS编写风格及文件目录部署指南,包括SCSS结构部署和px的使用等方面,需要的朋友可以参考下2016-04-15
本源码是一组效果非常酷的鼠标滑过按钮背景动画特效的代码。当鼠标滑过按钮时，会产生不同背景效果2016-04-14- 这篇文章主要介绍了css三种实现div在浏览器水平居中的方法，感兴趣的小伙伴们可以参考一下2016-04-14
- 下面小编就为大家带来一篇使用CSS实现小三角形效果【附实例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-04-14
- 下面小编就为大家带来一篇CSS控制文本的长度 超过一行显示省略号的实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-04-15
最新评论