• 技术文章 >web前端 >前端问答

    css3什么是自适应布局

    青灯夜游青灯夜游2022-06-02 12:05:24原创257

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

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

    什么是自适应布局

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

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

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

    css3实现自适应布局的方法

    常用的方式有以下几种:

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

    1、设置 meta 标签

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

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

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

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

    <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)"/>

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

    <!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 像素时的样式是不同的

    1.gif

    (学习视频分享:css视频教程web前端

    以上就是css3什么是自适应布局的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS3 css
    上一篇:jquery怎么改变h3内容 下一篇:css是一种用于什么的技术
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css3怎么设置动画旋转速度• css3怎么设置input不可编辑• css3怎么实现元素过渡效果• css3怎么实现高度渐变效果• css3给盒子设置阴影的属性是什么
    1/1

    PHP中文网