CSS响应式布局

CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5

月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验,而且随着大屏智能手机的普及,用"大势所趋"来形容也不为过。

要实现响应式布局,常用的方式有以下几种:

  • 使用 CSS 中的媒体查询(最简单);
  • 使用 JavaScript(使用成本比较高);
  • 使用第三方开源框架(例如 bootstrap,可以很好的支持各种浏览器)。

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

设置 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"表示禁止缩放。

媒体查询

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 标签中使用,示例代码如下:

<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>

<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>

更多关于媒体查询的介绍大家可以查阅《CSS媒体查询》一节。

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>响应式布局</title>

        <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />

        <style>

            *{

                margin: 0px;

                padding: 0px;

                font-family: "微软雅黑";

            }

            #head, #foot, #main

            {

                height: 100px;

                width: 1200px;

                /*width: 85%;*/

                background-color: goldenrod;

                text-align: center;

                font-size: 48px;

                line-height: 100px;

                margin: 0 auto;

            }

            #head div{

                display: none;

                font-size: 20px;

                height: 30px;

                width: 100px;

                background-color: green;

                float: right;

                line-height: 30px;

                margin-top: 35px;

            }

            #head ul{

                width: 80%;

            }

            #head ul li{

                width: 20%;

                float: left;

                text-align: center;

                list-style: none;font-size: 20px;

            }

            #main{

                height: auto;

                margin: 10px auto;

                overflow: hidden;

            }

            .left, .center, .right{

                height: 600px;

                line-height: 600px;

                float: left;

                width: 20%;

                background-color: red

            }

            .center{

                width: 60%;

                border-left: 10px solid #FFF;

                border-right: 10px solid #FFF;

                box-sizing: border-box;

            }

            @media only screen and (max-width: 1200px) {

                #head, #foot, #main{

                width: 100%;

                }

            }

            @media only screen and (max-width: 980px) {

                .right{

                    display: none;

                }

                .left{

                    width: 30%;

                }

                .center{

                    width: 70%;

                    border-right: hidden;

                }

            }

            @media only screen and (max-width: 640px) {

                .left, .center, .right{

                    width: 100%;

                    display: block;

                    height: 200px;

                    line-height: 200px;

                }

                .center{

                    border: hidden;

                    border-top: 10px  solid #FFFFFF;

                    border-bottom: 10px solid #FFFFFF;

                    height: 600px;

                    line-height: 600px;

                }

                #head ul{

                    display: none;

                }

                #head div{

                    display: block;

                }

            }

        </style>   

    </head>

    <body>

        <div>

            <header id="head">

                <ul>

                    <li>header1</li>

                    <li>header2</li>

                    <li>header2</li>

                    <li>header2</li>

                    <li>header2</li>

                </ul>

                <div>icon</div>

            </header>

            <section id="main">

                <div class="left">

                    left

                </div>

                <div class="center">

                    center

                </div>

                <div class="right">

                    right

                </div>

            </section>

            <footer id="foot">

                footer

            </footer>

        </div>

    </body>

</html>

当浏览器窗口小于 1200 像素大于 980 像素时,页面的样式如下图所示:

当浏览器窗口大于 640 像素小于 980 像素时,页面的样式如下图所示:

当浏览器窗口小于 640 像素时,页面的样式如下图所示:

原文地址CSS响应式布局

相关推荐
guokanglun19 分钟前
Vue.js动态组件使用
前端·javascript·vue.js
-seventy-31 分钟前
Ajax 与 Vue 框架应用点——随笔谈
前端
我认不到你1 小时前
antd proFromSelect 懒加载+模糊查询
前端·javascript·react.js·typescript
集成显卡1 小时前
axios平替!用浏览器自带的fetch处理AJAX(兼容表单/JSON/文件上传)
前端·ajax·json
焚琴煮鹤的熊熊野火1 小时前
前端垂直居中的多种实现方式及应用分析
前端
我是苏苏1 小时前
C# Main函数中调用异步方法
前端·javascript·c#
转角羊儿1 小时前
uni-app文章列表制作⑧
前端·javascript·uni-app
大G哥2 小时前
python 数据类型----可变数据类型
linux·服务器·开发语言·前端·python
hong_zc2 小时前
初始 html
前端·html
前端Hardy2 小时前
探索 HTML 和 CSS 实现的 3D 开关按钮
css·3d·html