最近在做一个自适应布局的项目,所以学了下自适应,下面是总结。此总结只做效果,不关注效率和代码优化。
1.css3
html中添加
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
//感觉很多人写的不一样,具体意思还不是很了解,感觉影响不大,不会写可以去各大牛逼网站去查看源代码拷贝
css中的整体布局
@media screen and (min- 0px) } @media screen and (min- 768px){} @media screen and (min- 1200px) {}
公共css
2.整体思路。
0-768px,显示移动端的效果。100%,自适应屏幕宽度。
768-1200px;显示pc端效果,包括ipad。屏幕宽度为固定1200px;
>1200px;显示pc端效果,屏幕主体宽度为1200px,居中显示,两边banner背景以渐变延伸。
3.banner自适应
pc端banner分三层,
一层为1200px,banner内的标题文字,小图片等内容放在这个div中。
第二层为100%,居中显示,banner图带有一定透明度,设为这一层的背景图,背景图居中,不重复。当屏幕超过1200px两边背景会无限延伸,直到达到最大。
第三层也为100%,拉一条渐变做背景 background-size:100% 100%,当屏幕超过第二层背景图片时,渐变无限延伸,切配合第二层作为banner图主体图片(第二层是半透明的)。
4.两端对齐
<div class="welcome1" style="text-align:justify;text-align-last:justify;padding:0 34px;">
text-align:justify;text-align-last:justify;如今适用于大多数的浏览器,但是一些比较原生的浏览器会没有效果。听说是因为最后一行没有两端对齐效果,如一段文字的最后一行没有必要两端对齐。所以可以采用如下方式:
.welcome1:after{ display:inline-block; content:''; 100%; height:0; overflow:hidden; }
:after 伪类 在指定元素之后添加内容。
content:'' 表示要添加的内容。
width:100%。添加一行的宽度。
height:0 这一行的高度为0;
overflow:这一行不会被撑大,height:0;
5.兼容ie8
ie8不支持 @media 等标签,所以要下一个js。
应用js http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js 或者 respond.js(我用的是前者,但是感觉后者用的人多,以后试一下再更新这里)
说明:这个不能用,因为用的是谷歌的东西。另外找一个链接吧,我是翻出去,下载到本地的,没找到其他链接。
ps:不仅仅是自适应,很多牛逼的,好用的css属性都不兼容ie8,比如第4条。ie8兼容性个人觉得是web前端必备技能。
6.手机浏览器不兼容html5 和css3的某些属性
手机不支持vw尺寸格式。
宽度用百分比自适应。
高度用js操作,js的缺点是只有加载的时候有效,在pc端拉大缩小不起作用,所以可以在Pc端保留vw尺寸,手机端不存在拉升问题,可以在加载的时候用js算出高度,然后操作css属性。
7.先搭建上下结构的框架。
自适应布局包含很多position:absolute,如过没有一个整体的div包含,会出很多兼容性和浮动问题。
8、手机浏览器兼容大部分新的技术,但是浏览器IE8很多不兼容。
IE8不兼容<section></section>标签,慎用。
IE8不兼容JQ trim()方法。
IE8不兼容JSON.Parse()和Json.stringify()。