響應式開發

時間 2019-11-29

標籤響應開發简体版

原文原文鏈接

一：網頁佈局方式

一、固定寬度佈局：爲網頁設置一個固定的寬度，一般以px作爲長度單位，常見於PC端網頁。css

二、流式佈局：爲網頁設置一個相對的寬度，一般以百分比作爲長度單位。html

三、柵格化佈局：將網頁寬度人爲的劃分紅均等的長度，而後排版佈局時則以這些均等的長度作爲度量單位，一般利用百分比作爲長度單位來劃分紅均等的長度。前端

四、響應式佈局：經過檢測設備信息，決定網頁佈局方式，即用戶若是採用不一樣的設備訪問同一個網頁，有可能會看到不同的內容，通常狀況下是檢測設備屏幕的寬度來實現。node

注：以上幾種佈局方式並非獨立存在的，實際開發過程當中每每是相互結合使用的。css3

二：響應式佈局

Responsive design，意在實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式。經過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。git

屏幕尺寸不同展現給用戶的網頁內容也不同，咱們利用媒體查詢能夠檢測到屏幕的尺寸（主要檢測寬度），並設置不一樣的CSS樣式，就能夠實現響應式的佈局。github

咱們利用響應式佈局能夠知足不一樣尺寸的終端設備很是完美的展示網頁內容，使得用戶體驗獲得了很大的提高，可是爲了實現這一目的咱們不得不利用媒體查詢寫不少冗餘的代碼，使總體網頁的體積變大，應用在移動設備上就會帶來嚴重的性能問題。web

響應式佈局經常使用於企業的官網、博客、新聞資訊類型網站，這些網站以瀏覽內容爲主，沒有複雜的交互。npm

三：響應式開發移動web開發

什麼是響應式開發

a) 在移動互聯日益成熟的時候，桌面瀏覽器上開發的網頁已經不能知足移動端的設備的展現和閱讀

b) 以前，一般的作法是對移動端單獨開發一套特定的版本

c) 可是，若是移動終端設備起來越多的時候賦發成本太大，是由於須要作全部屏幕的適配

d) 響應式開發的目的就是:一個網站可以兼容多種終端

e) 在新建的網站上通常都會使用響應式開發

f) 移動web開發和響應式開發是必須具有的技能

g) 演示響應者頁面

響應式開發的原理：媒體查詢：

a) 查詢媒介，查詢到當前屏幕(媒介媒體)的寬度，針對不一樣的屏幕寬度設置不一樣的樣式來適應不一樣屏幕。當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面。簡單說，你能夠設置不一樣屏幕下面的不一樣的樣式，達到適配不一樣的屏幕的目的。

b) 實現方式：經過查詢screen的寬度來指定某個寬度區間的網頁佈局。

超小屏幕（移動設備） w<768px

小屏設備 768px-992px 768 <= w <992

中等屏幕 992px-1200px 992 =< w <1200

寬屏設備 1200px以上 w>=1200

媒體查詢的基本實現方式：經常使用屬性設置: http://www.runoob.com/cssref/css3-pr-mediaquery.html

a) CSS 語法

@media mediatype and|not|only (media feature) {

CSS-Code;

}

你也能夠針對不一樣的媒體使用不一樣 stylesheets :

b) 媒體類型

值描述

all 用於全部設備

print 用於打印機和打印預覽

screen 用於電腦屏幕，平板電腦，智能手機等。

speech 應用於屏幕閱讀器等發聲設備

c) 媒體功能

值描述

device-height 定義輸出設備的屏幕可見高度。

device-width 定義輸出設備的屏幕可見寬度。

max-device-height 定義輸出設備的屏幕可見的最大高度。

max-device-width 定義輸出設備的屏幕最大可見寬度。

min-device-width 定義輸出設備的屏幕最小可見寬度。

min-device-height 定義輸出設備的屏幕的最小可見高度。

max-height 定義輸出設備中的頁面最大可見區域高度。

max-width 定義輸出設備中的頁面最大可見區域寬度。

min-height 定義輸出設備中的頁面最小可見區域高度。

min-width 定義輸出設備中的頁面最小可見區域寬度。

d) 簡單案例說明：控制不一樣屏幕尺寸下的屏幕背景色

<style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒體查詢：注意and後面空格的添加*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768 && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992 && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
</style>