响应式布局

一、什么是响应式网页设计

　　响应式网站设计的理念是：

页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整

 二、媒体查询

　　媒体查询的具体应用：

　设置五个不同的盒子用来包裹文字：

 <div id="widescreen">
        <h1>Widescreen</h1>
    </div>
    <div id="normal">
        <h1>normal</h1>
    </div>
    <div id="table">
        <h1>Table</h1>
    </div>
    <div id="samrtphone">
        <h1>Samrtphone</h1>
    </div>
    <div id="landscape">
        <h1>Landscape</h1>
    </div>

　然后给整体的body设置样式;

 body {
            font-family: Arial, Helvetica, sans-serif;
            background: gray;
            color: white;
            text-align: center;
            padding-top: 100px;
        }

　然后我们去到网页上就会发现无论怎样变换浏览器界面的大小文字依旧居中

设置媒体查询：

　媒体查询语法：

        @media(需要的屏幕尺寸)

/* samrtphone */
        /* 媒体查询 */
        @media(max-width:500px) {
            /* 当所用设备的宽超过500px样式不改变 当所用设备的宽不超过500px时 默认为手机端 */
            body {
                background: red;
            }
        }

 

然后根据所需要的所有设备的高宽设置最大的高度和宽度

　依次设置：

 /* samrtphone */
        /* 媒体查询 */
        @media(max-width:500px) {

            /* 当所用设备的宽超过500px样式不改变 当所用设备的宽不超过500px时 默认为手机端 */
            body {
                background: red;
            }

            #samrtphone h1 {
                display: block;
            }
        }

        /* table */
        /* 媒体查询 */
        @media (min-width: 501px) and (max-width:768px) {

            /* 当所用设备的宽超过500px样式不改变 当所用设备的宽不超过500px时 默认为手机端 */
            body {
                background: blue;
            }

            #table h1 {
                display: block;
            }
        }

        /* normal */
        /* 媒体查询 */
        @media (min-width: 769px) and (max-width:1200px) {

            /* 当所用设备的宽超过500px样式不改变 当所用设备的宽不超过500px时 默认为手机端 */
            body {
                background: greenyellow;
            }

            #normal h1 {
                display: block;
            }
        }

        /* widescreen */
        /* 媒体查询 */
        @media screen and (min-width: 1201px) {

            /* 当所用设备的宽超过500px样式不改变 当所用设备的宽不超过500px时 默认为手机端 */
            body {
                background: black;
            }

            #widescreen h1 {
                display: block;
            }
        }

        /* landscape */
        /* 媒体查询 */
        @media screen and (max-height: 500px) {

            /* 当所用设备的宽超过500px样式不改变 当所用设备的宽不超过500px时 默认为手机端 */
            body {
                background: orange;
            }

            #landscape h1 {
                display: block;
            }
        }

三、认Em & Rem单位

Em单位：

是由px(像素)换算过来的

16px = 1em

em单位在ul列表嵌套时也会进行嵌套 例：

HTML：

<div id="box-1">
    <h3>Box-One</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio accusantium repellat dolores
        quam, dolorum autem tempore nesciunt optio blanditiis illum rerum quia perferendis assumenda dicta?
        Dolore, explicabo. Debitis, laboriosam repellendus.
    </p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </li>
        </ul>
        <li>4</li>
    </ul>
</div>

CSS：

 #box-1 {
            font-size: 20px;
        }

        #box-1 p {
            font-size: 1.5em;
            padding: 1em;
        }

        #box-1 ul {
            font-size: 1.2em;
        }

rem会随着浏览器的变化而变化

更推荐使用rem：

css样式：

        html {
            font-size: 62.5%;
        }

        #box-2 h3 {
            font-size: 2rem;
        }

        #box-2 p {
            font-size: 1.6rem;
            line-height: 1.7rem;
        }

HTML：

<div id="box-2">
    <h3>Box-Two</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio accusantium repellat dolores
        quam, dolorum autem tempore nesciunt optio blanditiis illum rerum quia perferendis assumenda dicta?
        Dolore, explicabo. Debitis, laboriosam repellendus.
    </p>
</div>

四、认识Vh和Vw单位

　　Vh将页面高度等分为100份：如果是50Vh就是占了50份

HTML：

 

<header>
        <h1>欢迎来到秋裤在线</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium maiores ipsum tempore optio nihil
            minima.</p>
        <a href="#">关于秋裤</a>
    </header>

 

CSS：

* {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        header {
            background: url('./img/111.jpg') no-repeat center center/cover;
            color: #fff;
            height: 100vh;
        }

　　Vw将页面宽度等分为100份：如果是50Vw就是占了50份

HTML：

<header>
        <h1>欢迎来到秋裤在线</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium maiores ipsum tempore optio nihil
            minima.</p>
        <a href="#" class="btn">关于秋裤</a>
    </header>

CSS：

     * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        header {
            background: url('./img/111.jpg') no-repeat center center/cover;
            color: #fff;
            height: 100vh;
            text-align: center;
            padding: 2rem;
            padding-top: 15rem;
        }

        header h1 {
            font-size: 3rem;
        }

        header p {
            margin: 1rem 0;
        }

        .btn {
            display: inline-block;
            text-decoration: none;
            background: #F4F4F4;
            color: #333;
            padding: 0.7rem 2rem;
        }

以上的css并没有用到vw 我们需要使用时再使用

五、实现mywesite页面的响应式设计

 

使用上一个项目：秋裤在线的项目进行响应式设计 

　　创建一个css文件

　　将刚创建好的css文件引入到首页、关于我们、联系我们中

　　之后添加媒体查询

    <link rel="stylesheet" media="screen and (max-width:768px)" href="css/mobile.css">

　　之后更改样式：

/* navbar */
#navbar h1{
    float: none;
    text-align: center;
}
#navbar ul,
#navbar ul li{
float: none;
}
#navbar ul li a{
    padding: 5px;
    border-bottom: #444 dotted 1px;
}
/* showcase */
#showcase .showcase-content{
    padding: 70px;
    padding-bottom: 30px;
}
#showcase .showcase-content h1{
    font-size: 40px;
}
/* home-info */
#home-info .info-img{
    display: none;
}
#home-info .info-content{
    width: 100%;
}
/* features */
.box{
    float: none;
    width: 100%;
}
/* about-info */
#about-info .info-left,
#about-info .info-right{
    float: none;
    width: 100%;
}
.l-heading{
    text-align: center;
}
#about-info .info-right{
    margin-top: 30px;
}
/* contact-info */
#contact-info .box{
    border-bottom: gray dotted 1px;
}