HTML5+CSS3響應式設計（二）

時間 2019-11-29

標籤 html5+css3 html css 響應設計欄目 HTML5 简体版

原文原文鏈接

上一節傳送門《HTML5+CSS3響應式設計（一）》css

設置 viewport meta標籤後，任何瀏覽器都再也不縮放頁面了，這一節咱們能夠針對不一樣視口
來修正設計效果。html

1、咱們用一個ipad（1024*768）來講明這一點瀏覽器

上一節中咱們的頁面是960px寬度，咱們ipad若是是橫屏顯示1024px，頁面顯示很正常。app

若是是豎屏顯示768px，頁面會被裁剪。ide

下面咱們在樣式表中增長媒體查詢樣式：佈局

1 @media screen and (max-width: 768px) {
2     #wrapper {
3     　　width: 768px;
4     }
5     #header,#footer,#navigation {
6         width: 748px;
7     }
8 }

媒體查詢針對視口寬度不大於 768 像素的狀況，從新調整了外殼、頭部、頁腳以及導航
等頁面元素的寬度。spa

添加上面的媒體查詢後，雖然裏面並很差看，可是好歹頁面沒有被裁減，整個頁面信息都能看到！設計

一樣能夠採用該方法來調整一下局部：3d

 1 @media screen and (max-width: 768px) {
 2 　　#wrapper {
 3 　　　　width: 768px;
 4 　　}
 5 　　#header,#footer,#navigation {
 6 　　　　width: 748px;
 7 　　}
 8 　　#content,#sidebar {
 9 　　　　　padding-right: 10px;
10 　　　　padding-left: 10px;
11 　　　　width: 728px;
12 　　}
13 }

2、響應式設計中應該讓內容始終優先顯示code

再來看下以前的界面：

爲了便於以後的理解，也貼出頁面結構的代碼：

 1 <body>
 2     <div id="wrapper">
 3         <!-- the header and navigation -->
 4         <div id="header">
 5             <div id="navigation">
 6                 <ul>
 7                     <li><a href="#">navigation1</a></li>
 8                     <li><a href="#">navigation2</a></li>
 9                 </ul>
10             </div>
11         </div>
12         <!-- the sidebar -->
13         <div id="sidebar">
14             <p>here is the sidebar</p>
15         </div>
16         <!-- the content -->
17         <div id="content">
18             <p>here is the content</p>
19         </div>
20         <!-- the footer -->
21         <div id="footer">
22             <p>Here is the footer</p>
23         </div>
24     </div>
25 </body>

css以下：

 1     #wrapper {
 2         margin-right: auto;
 3         margin-left: auto;
 4         width: 960px;
 5     }
 6     
 7     #header {
 8         margin-right: 10px;
 9         margin-left: 10px;
10         width: 940px;
11         background-color: #779307;
12     }
13     
14     #navigation ul li {
15         display: inline-block;
16     }
17     
18     #sidebar {
19         margin-right: 10px;
20         margin-left: 10px;
21         float: left;
22         background-color: #fe9c00;
23         width: 220px;
24     }
25     
26     #content {
27         margin-right: 10px;
28         float: right;
29         margin-left: 10px;
30         width: 700px;
31         background-color: #dedede;
32     }
33     
34     #footer {
35         margin-right: 10px;
36         margin-left: 10px;
37         clear: both;
38         background-color: #663300;
39         width: 940px;
40     }

這裏咱們的側邊欄在正文以前，試想一下，在移動端顯示時，難道咱們會先顯示側邊欄再顯示正文嗎？（側邊欄信息的重要性不及內容）

因此在移動端，咱們會優先顯示正文，將側邊欄放在正文後面顯示。

基於此處考慮，咱們將側邊欄與正文互換一個位置：

1 <div id="content">
2 　　<p>here is the content</p>
3 </div>
4 <div id="sidebar">
5 　　<p>here is the sidebar</p>
6 </div>

互換後，對大屏幕的顯示並無什麼影響，由於咱們的側邊欄與內容用的是 float:left 和 float:right 屬性，可是在 iPad上，則變成了首先顯示內容區，下面纔是側邊欄。

如今顯示順序已是比較合理了，咱們能夠對小屏的內容追加一些樣式，讓其看起來更加漂亮一點。

3、給小屏添加一些媒體樣式

 1         @media screen and (max-width: 768px) {
 2             #wrapper,
 3             #header,
 4             #footer,
 5             #navigation {
 6                 width: 768px;
 7                 margin: 0px;
 8             }
 9             #logo {
10                 text-align: center;
11             }
12             #navigation {
13                 text-align: center;
14                 background-image: none;
15                 border-top-color: #bfbfbf;
16                 border-top-style: double;
17                 border-top-width: 4px;
18                 padding-top: 20px;
19             }
20             #navigation ul li a {
21                 background-color: #dedede;
22                 line-height: 60px;
23                 font-size: 40px;
24             }
25             #content,
26             #sidebar {
27                 margin-top: 20px;
28                 padding-right: 10px;
29                 padding-left: 10px;
30                 width: 728px;
31             }
32             .oscarMain {
33                 margin-right: 30px;
34                 margin-top: 0px;
35                 width: 150px;
36                 height: 394px;
37             }
38             #sidebar {
39                 border-right: none;
40                 border-top: 2px solid #e8e8e8;
41                 padding-top: 20px;
42                 margin-bottom: 20px;
43             }
44             .sideBlock {
45                 width: 46%;
46                 float: left;
47             }
48             .overHyped {
49                 margin-top: 0px;
50                 margin-left: 50px;
51             }
52         }