响应式布局学习01

didie4038

于 2016-09-25 22:48:00 发布

阅读量98

点赞数

原文链接：http://www.cnblogs.com/xxiaonian/p/5907311.html

版权

响应式布局的开发背景：

1.了解常用移动便携设备尺寸：http://xiangying.pintuer.com/

随着各种尺寸的手机、pad的普及，普通的网站对于这些持有移动设备的用户来说，访问无疑是困难的。传统的布局已经无法满足一套代码适应所有设备的要求，而为每一种设备去单独写一套代码又不好维护。为解决移动互联网浏览，响应式布局应运而生。

2.优势和缺点：

优点：

a.面对不同分辨率设备灵活性强;b.能够快捷解决多设备显示适应问题，达到多终端视觉和操作体验风格统一;c.各个设备都使用这一份代码，节约开发成本，维护成本较轻松。

缺点：

1.需要兼容各种设备导致工作量大，效率低下;2.因而代码累赘，加载时间较长。

3.如何设计：

对于一行显示多列内容时，可以做如下处理：我个人简称：1 3 1，1 2 1，1 1 1 1 1布局，注意，对于分辨率小的设备，也可以将不重要的列省略掉（display：none）

4.如何是实现：

a.媒体查询的语法结构：@media 设备类型 only (选取条件) not (选取条件) and (设备特性)，设备二 { 样式代码 }

b.网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等布局用相对宽度，有利于针对不同分辨率进行修改。

c.内容不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。

注意：中间必须留空格（亲测）。

5.如何调试：

chrome--F12，点击调试窗口左上角第二个图标，可手动更改设备尺寸。

代码如下：针对上图的三种设备大小设计：

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>media test</title>
</head>
<style>
    body, h2 {
        margin: 0px;
        padding: 0px;
        color: white
    }

    section#main, header, aside, footer {
        background: #333;
        margin: 5px 0;
    }

    h2 {
        text-align: center;
        font-size: 3em;
    }

    section#container {
        margin: 0 auto;
        width: 960px;
    }

    header {
        float: left;
        width: 100%;
        line-height: 100px;
    }

    aside#left {
        float: left;
        width: 200px;
        line-height: 400px;
    }

    section#main {
        float: left;
        width: 540px;
        line-height: 400px;
        margin-left: 10px;
    }

    aside#right {
        float: right;
        width: 200px;
        line-height: 400px;
    }

    footer {
        float: left;
        width: 100%;
        line-height: 100px;
    }

    /*1000px 以上屏幕如何显示*/
    @media screen and (min-width: 1000px) {
        h2 {
            color: yellow;
            font-size: 4em;
        }

        section#container {
            width: 1160px;
        }

        section#main {
            width: 640px;
        }

        aside#right {
            width: 300px;
        }
    }

    /*pad 640-1000*/
    @media screen and (min-width: 640px) and (max-width: 1000px) {
        h2 {
            color: deeppink;
            font-size: 2.5em;
        }

        section#container {
            width: 640px;
        }

        aside#left {
            width: 160px;
        }

        section#main {
            width: 430px;
        }

        aside#right {
            display: none;
        }
    }

    /* phone 640px lt max-width:639px */
    @media screen and (max-width: 639px) {
        h2 {
            color: green;
            font-size: 1.5em;
        }

        section#container {
            width: 400px;
        }

        aside#left {
            float: left;
            line-height: 50px;
            width:100%;
        }

        section#main {
            float: left;
            line-height: 100px;
            width:100%;
            margin-left:0px;
        }

        aside#right {
            float: left;
            width:100%;
            line-height:50px;
        }


    }


</style>
<body>
<section id="container">
    <header>
        <h2>header</h2>
    </header>
    <aside id="left"><h2>Left</h2></aside>
    <section id="main"><h2>Main</h2></section>
    <aside id="right"><h2>Right</h2></aside>
    <footer><h2>Footer</h2></footer>
</section>

</body>

转载于:https://www.cnblogs.com/xxiaonian/p/5907311.html

didie4038

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局学习01

响应式布局的开发背景：1.了解常用移动便携设备尺寸：http://xiangying.pintuer.com/随着各种尺寸的手机、pad的普及，普通的网站对于这些持有移动设备的用户来说，访问无疑是困难的。传统的布局已经无法满足一套代码适应所有设备的要求，而为每一种设备去单独写一套代码又不好维护。为解决移动互联网浏览，响应式布局应运而生。2.优势和缺点：优点：a.面...
复制链接

扫一扫