css3自适应布局如何实现

这篇文章主要介绍“css3自适应布局如何实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css3自适应布局如何实现”文章能帮助大家解决问题。

专注于为中小企业提供网站设计、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业钟山免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

自适应布局又称“响应式布局”，是指可以自动识别屏幕宽度、并做出相应调整的网页布局；这样的网页能够兼容多个不同的终端，而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的，能够为使用不同终端的用户提供很好的用户体验。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

什么是自适应布局

自适应布局又称“响应式布局”，可以自动识别屏幕宽度、并做出相应调整的网页布局，简单来讲就是网页能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。

其实简单来讲自适应与非自适应的不同就是一个页面不管在什么设备的分辨率下都能自动识别适应，为浏览的用户带来了更好的体验效果。

这个概念是为解决移动端浏览网页而诞生的。自适应布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。

css3实现自适应布局的方法

常用的方式有以下几种：

• 使用 CSS 中的媒体查询（最简单）；

• 使用 JavaScript（使用成本比较高）；

• 使用第三方开源框架（例如 bootstrap，可以很好的支持各种浏览器）。

接下来我们以媒体查询为例来具体演示一下自适应布局的实现。

1、设置 meta 标签

首先，我们需要设置 meta 标签来告诉浏览器，让视口（网页的可视区域）的宽度等于设备的宽度，并禁止用户对页面的缩放，如下所示：

在设置视口时需要注意，视口就是网页可见区域的尺寸，设置视口时只设置宽度就行，不用在乎高度，具体高度由网页内容自动撑开。上面 meta 标签中内容的含义如下：

• viewport：即视口，表示网页的可视区域；

• width：控制 viewport 的大小，可以指定一个具体的值，例如 600，也可以是由关键字组成的特殊值，例如 device-width 就表示设备的宽度；

• initial-scale：表示初始缩放比例，也就是页面第一次加载时的缩放比例；

• maximum-scale：表示允许用户缩放的最大比例，范围从 0 到 10.0；

• minimum-scale：表示允许用户缩放到最小比例，范围从 0 到 10.0；

• user-scalable：表示用户是否可以手动缩放，“yes”表示允许缩放，“no”表示禁止缩放。

2、媒体查询

CSS 媒体查询可以根据指定的条件，针对不同的媒体类型（screen print）定义不同的 CSS 样式，让使用不同设备的用户都能得到最佳的体验。

关于媒体查询有以下三种实现方式：

1）、直接在 CSS 文件中使用，示例代码如下：

@media (max-width: 320px) {
    /*0~320*/
    body {
        background: pink;
    }
}
@media (min-width: 321px) and (max-width: 375px) {
    /*321~768*/
    body {
        background: red;
    }
}
@media (min-width: 376px) and (max-width: 425px) {
    /*376~425*/
    body {
        background: yellow;
    }
}
@media (min-width: 426px) and (max-width: 768px) {
    /*426~768*/
    body {
        background: blue;
    }
}
@media (min-width: 769px) {
    /*769~+∞*/
    body {
        background: green;
    }
}

2）、使用 @import 导入，示例代码如下：

@import 'index01.css' screen and (max-width:1024px) and (min-width:720px)
@import 'index02.css' screen and (max-width:720px)

3）、在 link 标签中使用，示例代码如下：

下面通过一个综合的示例来演示一下响应式布局的实现：

    
        
        
        
           
    
    
        

            
                

                    
header1
                    
header2
                    
header2
                    
header2
                    
header2
                
                
icon
            
            
                
                    left
                
                
                    center