【練習】響應式佈局

時間 2019-11-17

標籤練習響應佈局简体版

原文原文鏈接

本文參考是參考http://www.netmagazine.com/tutorials/build-basic-responsive-site-css作的練習。css

文中做者闡述了對於響應式設計不該該針對不一樣的終端顯示不一樣的內容，當用戶在pc上能夠查到的內容，在移動端卻怎麼也找不到，這是很困惑的一件事情。因此響應式設計要作的是適當的縮放，針對不一樣的設備顯示適當的佈局，而不是改變內容。因此響應式佈局的是利用流式佈局（利用百分比設置各元素寬度）和css3的Media Query來實現的。html

下面作一個簡單的響應式佈局的小練習：css3

效果能夠參考http://www.netmagazine.com/files/tutorials/demos/2013/01/build-a-basic-responsive-site-with-css/demo/demo.html瀏覽器

1.首先肯定文檔結構，兩列布局。app

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Responsive</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
</head>
<body>
    <div id="wrapper">
        <header>
            <nav id="skipTo">
                <ul>
                    <li>
                        <a href="#main" title="skip to main content">skip to main content</a>
                    </li>
                </ul>
            </nav>
            <h1>Demo</h1>
            <nav>
                <ul>
                    <li><a href="#" title="home">Home</a></li>
                    <li><a href="#" title="about">About</a></li>
                    <li><a href="#" title="work">Work</a></li>
                    <li><a href="#" title="contact">Contact</a></li>
                </ul>
            </nav>
            <div id="banner">
                <img src="images/kaws.jpg" alt="banner">
            </div>
        </header>
        <section id="main">
            <h1>Main section</h1>
            <p>Lorem （省略一些內容）</p>
        </section>
        <aside>
            <h1>Sub-section</h1>
            <p>Lorem （省略一些內容）</p>
        </aside>
    </div>
</body>
</html>

　　原做者插入respond.min.js確保ie6-8能夠運行，由於我沒作兼容性的測試，因此沒引用這個js，有興趣的同窗能夠試試。 ide

加入<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 避免瀏覽器自動縮放和用戶的縮放。（width - viewport的寬度， initial-scale - 初始的縮放比例，minimum-scale - 容許用戶縮放到的最小比例，maximum-scale - 容許用戶縮放到的最大比例，user-scalable - 用戶是否能夠手動縮放）佈局

2.加入基本樣式。#skipTo的導航是爲移動設備設置的，使用戶能夠跳過導航直接看到主要的內容，因此在基本的樣式中將其隱藏。最好設置一個max-width避免在大屏幕上過分放大，而且給image的width設置成100%，這樣能很好的適應流式佈局。測試

#wrapper{
    width: 96%;
    max-width: 920px;
    margin: 0 auto;
    padding: 2%;
}
#main{
    width: 60%;
    margin-right: 5%;
    float: left;
}
aside{
    width: 35%;
    float: right;
}
header h1{
    height: 70px;
    width: 160px;
    float: left;
    display: block;
    background: url(../images/demo.gif) 0 0 no-repeat;
    text-indent: -9999px;
}
header nav{
    float: right;
    margin-top: 40px;
}
header nav li{
    display: inline;
    margin-left: 15px;
}
#skipTo{
    display: none;
}
#skipTO li{
    background: #b1fffc;
}
#banner{
    float: left;
    margin-bottom: 15px;
    width: 100%;
}
#banner img{
    width: 100%;
}

　　3.加入適配移動設備的css。能夠用兩種方式，一種是內置在css中，在css中加入如下代碼ui

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

    #skipTo {
        display: block;
        }
    
    header nav, #main, aside {
        float: left;
        clear: left;
        margin: 0 0 10px; 
        width: 100%;
        }    
        header nav li {
            margin: 0;
            background: #efefef;
            display: block;
            margin-bottom: 3px;
            }
            header nav a {
                display: block;
                padding: 10px;
                text-align: center;
                }            
}

　　另外一種是外部引用，在html的head中加入url

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

另外也能夠針對移動設備提供減少的圖片，能夠節省移動設備的流量，減小加載時間。

好了，至此整個練習就結束了，動手練習下吧。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。