web网页 页面布局的几种方式

网页基本布局方式：

（1）流式布局 Fluid

流布局使用的是百分比，这位网页提供了很强的可塑性和流动性。

通过设置百分比，我们不需要考虑设备尺寸或者屏幕宽度大小了，可以为每种情形找到一种可行的方案，应为你的设计尺寸将适应所有的设备尺寸。

流布局与媒体查询和优化样式技术密切相关。

（2）固定布局 Fixed

在固定布局中，网页的宽度是必须指定为一个像素值，一般为960px。因为960可以整除3，4，5，6，8，10，12和15。

这种布局具有很强的稳定性与可控性。

但固定宽度必须考虑网站是否可以适用于不同的屏幕宽度。

（3）弹性布局 Elastic

弹性布局跟流布局很像，主要不同是大小单位。弹性布局的大小单位不是像素或者百分比，而是em或者rem，避免了根据px局部在高分辨率下几乎无法辨识的缺点，又相对于%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，需要一段时间适应而且不易从其他布局转换过来。

（4）伸缩 Flex box

使用css3 Flex系列属性进行相对布局。对于富媒体和复杂排版的支持非常大，但是存在兼容性问题。

（5）响应式

使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。优秀的响应范围设计可以给适配范围内的设备做好的体验。

步骤：先完成非响应式布局，再完成响应式布局。

1、粘贴以下代码。

设置屏幕按1：1尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。

user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。

2、通过媒体查询设置样式media query

media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写

 @media screen and (max-width:980px){
     #head { …; }
     #content { …; }
     #footer { …; }
}

这里面的样式会覆盖掉之前所定义的样式。

3、设置多种视图宽度

假如我们要兼容ipad和iphone视图，我们可以这样设置：

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
 @media only screen and (width:320px)and (width:768px){}

4、响应式设计需要注意的问题

1.宽度不固定，可以使用百分比

#head{width:100%;}
#content{width:50%;}

2.图片处理

在html页面中的图片，比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的最大宽度，如：

#wrap img{
    max-width:100%;
    height:auto;
}

如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充，height为auto的设置是为了保证图片原始的高宽比例，以至于图片不会失真。

除了img标签的图片外我们经常会遇到背景图片，比如logo为背景图片：

#log a{display:block;
        width:100%;
        height:40px;
        text-indent:55rem;
        background-img:url(logo.png);
        background-repeat:no-repeat;
        background-size:100% 100%;
        }
background-size是css3的新属性，用于设置背景图片的大小，有两个可选值，
第一个值用于指定背景图的width,
第2个值用于指定背景图的height,
如果只指定一个值，那么另一个值默认为auto。

background-size:cover; 等比扩展图片来填满元素
background-size:contain; 等比缩小图片来适应元素的尺寸