響應式設計三部曲

時間 2020-05-21

標籤響應設計三部曲简体版

原文原文鏈接

隨着智能手機的流行，響應式網頁設計無疑成爲了現在網頁設計的大趨勢。對於新手來時,響應設計聽起來有點複雜,但它其實是比你想象的更簡單。只需下面的3個步驟便可構建一個響應式的網頁！css

1.Meta Taghtml

大多數移動瀏覽器擴展的HTML頁面到寬視口寬度，以便在屏幕上適合。您能夠使用viewport meta標籤來重設此。下面的視口標籤告訴使用該設備的寬度視口寬度和禁用初始規模瀏覽器。css3

<meta name="viewport" content="width=device-width, initial-scale=1.0">
注：IE8或更低版本的IE能夠引入以下語句讓其支持

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

viewpoint說明

width 控制viewpoint的寬度，能夠是固定值，也能夠是device-width，即設備的寬度
height 高度
initial-scale 控制初始化縮放比例，1.0表示不能夠縮放
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否能夠縮放

可見若是不定義viewpoint的話，頁面寬度以屏幕分辨率爲基準，而設置之後能夠根據設備寬度來調整頁面，達到適配終端大小的效果瀏覽器

2.HTML頁面結構less

html代碼爲：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>響應式佈局</title>
<!-- css3-mediaqueries.js for IE8 or older -->
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>

<body>

<div id="pagewrap">

    <div id="header">
        <h1>Header</h1>
    </div>

    <div id="content">
        <h2>Content</h2>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
    </div>

    <div id="sidebar">
        <h3>Sidebar</h3>
        <p>text</p>
        <p>text</p>
    </div>
    
    <div id="footer">
        <h4>Footer</h4>
    </div>
</div>
</body>
</html>

3.設置css

<style type="text/css">

body {
    font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
    color: #669;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
h1 {
    font: bold 36px/100% Arial, Helvetica, sans-serif;
}

/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
    padding: 5px;
    width: 960px;
    margin: 20px auto;
}
#header {
    height: 180px;
}
#content {
    width: 600px;
    float: left;
}
#sidebar {
    width: 300px;
    float: right;
}
#footer {
    clear: both;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
    
    #pagewrap {
        width: 94%;
    }
    #content {
        width: 65%;
    }
    #sidebar {
        width: 30%;
    }

}

/* for 700px or less */
@media screen and (max-width: 700px) {

    #content {
        width: auto;
        float: none;
    }
    #sidebar {
        width: auto;
        float: none;
    }

}

/* for 480px or less */
@media screen and (max-width: 480px) {

    #header {
        height: auto;
    }
    h1 {
        font-size: 24px;
    }
    #sidebar {
        display: none;
    }

}

/* border & guideline (you can ignore these) */
#content {
    background: #f8f8f8;
}
#sidebar {
    background: #f0efef;
}
#header, #content, #sidebar {
    margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
    border: solid 1px #ccc;
}

</style>

相關標籤/搜索

每日一句

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