CSS自适应布局思路

前端  /  管理员 发布于 7年前   203

最近在做一个自适应布局的项目，所以学了下自适应，下面是总结。此总结只做效果，不关注效率和代码优化。

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中的整体布局

CSS Code复制内容到剪贴板

1. @media  screen and (min-width: 0px) {公共css可以写在这里，也可以单独写出来，公共css}   
2.   
3. @media screen and (min-width: 380px){大于380px,包括>413，>768,>1200}   
4.   
5. @media screen and (min-width: 413px){}   
6.   
7. @media  screen and  (min-width: 768px){}   
8.   
9. @media  screen and  (min-width: 1200px) {}   
10.   

一般先写移动端的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.两端对齐
复制代码代码如下:<div class="welcome1" style="text-align:justify;text-align-last:justify;padding:0 34px;"></p><p>text-align:justify;text-align-last:justify;

如今适用于大多数的浏览器，但是一些比较原生的浏览器会没有效果。听说是因为最后一行没有两端对齐效果，如一段文字的最后一行没有必要两端对齐。所以可以采用如下方式：

CSS Code复制内容到剪贴板

1. .welcome1:after{   
2.         display:inline-block;   
3.         content:'';   
4.         width:100%;   
5.         height:0;   
6.         overflow:hidden;   
7.         }   
8.   

：after 伪类 在指定元素之后添加内容。

content:'' 表示要添加的内容。

width：100%。添加一行的宽度。

height:0 这一行的高度为0；

overflow:这一行不会被撑大，height:0;

以上就是本文的全部内容，希望对大家的学习有所帮助。