響應式網站

時間  2020-08-06
標籤 響應 網站 欄目 網站開發 简体版
原文   原文鏈接

咱們的眼睛在看東西時會天然地遵循必定的模式。一般從左上開始，而後從左到右，再從上到下。css

不少網頁都是基於網格設計的，這說明網頁是按列來佈局的。html

響應式網格視圖一般是 12 列，寬度爲100%，在瀏覽器窗口大小調整時會自動伸縮。web

爲何是12列呢，由於12能夠被二、三、四、6整除，能二、三、四、6等分。瀏覽器

建立網格視圖

CSS.css
* {
    -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;

}

* {
 border: 1px solid red !important;

}


.row{
 width:100%;
 display: flex;
 flex-wrap: wrap;
 text-align: center;
}
.col-1{
 width:8.3%;
}
.col-2{
 width:16.6%;
}
.col-3{
 width:25%;
 padding: 0.5%;
}
.col-4{
 width:33.33%;
}
.col-5{
 width:41.66%;
}
.col-6{
 width:50%;
}
.col-7{
 width:58.33%;
}
.col-8{
 width:66.66%;
}
.col-9{
 width:75%;
 padding: 0.5%;
}
.col-10{
 width:83.33%;
}
.col-11{
 width:91.66%;
}
.col-12{
 width:100%;
}

Html.html
 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Title</title>
 <link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>

<div class="row">
 <div class="col-6">6 Columns</div>
 <div class="col-6">6 Columns</div>
</div>

<div class="row">
 <div class="col-3">3 Columns</div>
 <div class="col-3">3 Columns</div>
 <div class="col-3">3 Columns</div>
 <div class="col-3">3 Columns</div>
</div>

 <div class="row">
 <div class="col-4">4 Columns</div>
 <div class="col-4">4 Columns</div>
 <div class="col-4">4 Columns</div>
 </div>

</body>
</html>



效果：



 

Viewport
 

viewport 是用戶網頁的可視區域。服務器
 

手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，一般這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。svg
 

 
 

一個經常使用的針對移動網頁優化過的頁面的 viewport meta 標籤大體以下：佈局
 

<meta name="viewport" content="width=device-width, initial-scale=1.0">flex
 

     
 
  • width：控制 viewport 的大小，能夠指定的一個值，如 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
    •  

 

     
 
  • initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。
    •  

 

 

若是不加initial-scale=1.0,有的瀏覽器會在切換到橫屏模式時，仍就保持以前的頁面寬度，並且他們還會使內容只是進行縮放，而沒法自動調整佈局優化
 

 
 

媒體查詢
 

使用 @media 查詢，你能夠針對不一樣的媒體類型定義不一樣的樣式。spa
 

若是瀏覽器窗口小於 500px, 背景將變爲淺藍色：
 

@media only screen and (max-width: 500px) {
     body {
         background-color: lightblue;
     }
 }
 

 
 

添加斷點
 

以前咱們使用行和列來製做網頁，它是響應式的，但在小屏幕上並不能友好的展現。
 

媒體查詢能夠幫咱們解決這個問題。咱們能夠在設計稿的中間添加斷點，不一樣的斷點有不一樣的效果。
 

 
 

1.掉落列模型
 

 

html:
 

 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Title</title>
 <link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>


 <div class="row">
 <div class="box-darkBlue"></div>
 <div class="box-blue"></div>
 <div class="box-green"></div>

 </div>

</body>
</html>


css：
 

 

* {
    -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;

}

html,body{
 margin: 0;
 padding: 0;

}

.row{
 display: flex;
 flex-wrap: wrap;
}


div{
 width: 100%;
 min-height: 150px;
}

.box-darkBlue{
 background-color: darkblue;
}


.box-blue{
 background-color: blue;
}

.box-green{
 background-color: green;
}


@media only screen and (min-width: 500px){
 .box-darkBlue{
 width: 25%;}
 .box-blue{
 width: 75%;}
}

@media only screen and (min-width: 850px){
 .box-darkBlue,.box-green{
 width: 25%;
 }
 .box-blue{
 width: 50%;
 }
}

 

 
 

2.大致流動模型
 


與掉落列模型很是類似，但更像網格系統。
html:
 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Title</title>
 <link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>


 <div class="row">
 <div class="box-darkBlue"></div>
 <div class="box-blue"></div>
 <div class="box-green"></div>
 <div class="box-red"></div>
 <div class="box-orange"></div>
 </div>

</body>
</html>


css:
 

* {
    -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;

}

html,body{
 margin: 0;
 padding: 0;

}

.row{
 display: flex;
 flex-wrap: wrap;
}


div{
 width: 100%;
 min-height: 150px;
}

.box-darkBlue{
 background-color: darkblue;
}


.box-blue{
 background-color: blue;
}

.box-green{
 background-color: green;
}

.box-red{
 background-color:red;
}

.box-orange{
 background-color: orange;
}


@media only screen and (min-width: 500px) {
 .box-blue, .box-green {
 width: 50%;
 }
}
@media only screen and (min-width: 650px){
 .box-darkBlue,.box-blue{
 width: 50%;
 }
 .box-green,.box-red,.box-orange{
 width: 33.333333%;

 }
}


@media only screen and (min-width: 850px){
 .row{
 width: 800px;
 margin-left: auto;
 margin-right: auto;
 }
}


 

3.活動佈局模型
 


活動佈局應該是最靈活的響應式模型了，它的佈局方式並非單純的重排到其餘列的下列，咱們能夠利用css順序屬性。
 


html:
 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Title</title>
 <link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>


 <div class="row">
 <div class="box-darkBlue"></div>

 <div class="row2">
 <div class="box-blue"></div>
 <div class="box-green"></div>
 </div>

 <div class="box-red"></div>
 </div>

</body>
</html>


css:
 

* {
    -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;

}

html,body{
 margin: 0;
 padding: 0;

}

.row{
 display: flex;
 flex-wrap: wrap;
}


div{
 width: 100%;
 min-height: 150px;
}

.box-darkBlue{
 background-color: darkblue;
}


.box-blue{
 background-color: blue;
}

.box-green{
 background-color: green;
}

.box-red{
 background-color:red;
}

.box-orange{
 background-color: orange;
}


@media only screen and (min-width: 500px) {
 .box-darkBlue{
 width: 50%;
 }
 .row2{
 width: 50%;
 }
}



@media only screen and (min-width: 850px){
 .box-red{
 width: 25%;
 order: -1;
 }
 .row2{
 width: 50%;
 }
 .box-darkBlue{
 width: 25%;
 order: 1;
 }
 
}


 

 
 

4.畫布溢出模型
 


在畫布溢出模型中，內容並非豎直堆放的，而是將不經常使用的內容，好比導航欄或者應用菜單，放在屏幕之外，只有當屏幕足夠大的時候，才顯示出來。

html:
 

 
 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Title</title>
 <link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body>


 <nav id="drawer" class="dark-blue">
 </nav>

 <main clss="light-blue">
 <a id="menu">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"></path>
 </svg>
 </a>
 </main>

<script> /* * 單擊菜單圖標時打開抽屜. */
var menu = document.querySelector('#menu');
var main = document.querySelector('main');
var drawer = document.querySelector('#drawer');
menu.addEventListener('click', function(e) {
 drawer.classList.toggle('open');
 e.stopPropagation(); });
main.addEventListener('click', function() {
 drawer.classList.remove('open'); });
</script>

</body>
</html>


 

* {
    -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;

}

html,body,main{
 padding: 0;
 margin: 0;
 height: 100%;
 width: 100%;
}

nav,main{
 padding: 1em;
}



.dark-blue{
 background-color: darkblue;
}

main{
 background-color: lightblue;
}

a#menu svg{
 width: 40px;
 fill: #000;
}

nav{
 width: 300px;
 height: 100%;
 position: absolute;
 transform:translate(-300px.0);
 -webkit-transform: translate(-300px, 0);
 transition: transform 0.3s ease;
}

nav.open{
 transform: translate(0,0);
 -webkit-transform: translate(0, 0);
}


/* 若是有足夠的空間(>600 px)，咱們老是把抽屜打開。*/
@media (min-width: 600px) {

 /* 咱們打開抽屜. */
 nav{
 position:relative;
 -webkit-transform: translate(0, 0);
 transform: translate(0, 0);
 }

 /* 咱們在父服務器上使用 Flexbox. */
 body {
 display: -webkit-flex;
 display: flex;
 -webkit-flex-flow: row nowrap;
 flex-flow: row nowrap;
 }

 main {
 width: auto;
 /* flex-grow 主要內容填充全部可用空間。 */
 flex-grow: 1;
 }

 main > #menu:after {
 content: '若是寬度超過 600px，抽屜就會保持打開狀態。';
 }



 

響應式圖片
 

未改進
  body {
      margin: 0;
    }
    img {
      float: left;


改進：   
 body {
      margin: 0;
    }
    img {
      float: left;
      margin-right: 10px;
      width: calc((100% - 20px)/3);
 
   
}

img:last-of-type{
  margin-right: 0;
}




 

不爲人知的CSS單位
 

當你設置行內元素height:100%時,你必須使body、框內元素的height爲100%，多麼麻煩。
你能夠直接設置 100vh，1個vh表明着1%的視圖高度。
同理，1vw是1%的視圖寬度。

高度和寬度能夠設置 vmin單位使視圖區域最小化，vmax使視圖區域最大化。


 

不一樣設備顯示分辨率的圖片
 

 
 <picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture> 



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

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







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程