成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

響應(yīng)式網(wǎng)站開發(fā)基礎(chǔ)

fish / 3309人閱讀

摘要:搭建添加媒體查詢標簽添加標簽嵌入標簽嵌入因為性能的原因,應(yīng)該避免使用間斷點的選取彈性常見響應(yīng)模式序號模式圖解大體流動模型掉落列模型活動布局模型畫布溢出模型有時一個網(wǎng)頁同時結(jié)合幾種模式,例如掉落列和畫布溢出模型。

準備工作 遠程調(diào)試

chrome 瀏覽器設(shè)置

在 chrome 瀏覽器中打開 chrome://inspect

手機設(shè)置

打開開發(fā)者模式

打開 USB 調(diào)試模式

打開手機端 chrome 瀏覽器

基礎(chǔ)知識 視窗(viewport)

視窗是指瀏覽器能夠顯示內(nèi)容的區(qū)域。

與設(shè)備無關(guān)的像素值(DIPs)

瀏覽器并不是物理硬件的像素寬度而工作的,而是根據(jù) DIPs 寬度。DIPs (device independent pixels),與設(shè)備無關(guān)的像素值。DIPs 將像素值與實際距離聯(lián)系起來。不論顯示器的像素密度是多少,同一 DIPs 值表示屏幕上同樣大小的空間。

字體改善機制

在屏幕較小的移動設(shè)備上顯示網(wǎng)頁時,瀏覽器為了讓內(nèi)容看上去更好一些,會開啟字體改善機制。瀏覽器會試圖挑出頁面中的首要內(nèi)容,并把它們放大。也就是說有的字體會變大,這易于閱讀,但是其它字體還是會一樣小,非常難看清。

像素比(DPR)

DPR (device pixel ratio),設(shè)備像素比。DPR = hardware pixels / DIPs,即設(shè)備像素比 = 物理像素 / 相對像素。記住,像素比是一維數(shù)字比,而不是二維的數(shù)字比。

下面計算每個圖代表的 DRP:

其中,每個藍色格子代表一個物理像素,一個橘色方框代表一個相對像素。

答案:

1圖,一個實際像素點表示一個相對像素,DPR=1;

2圖,每行的兩個實際像素點表示一個相對像素,DPR=2;

3圖,三個實際像素點表示一個相對像素,DPR=3;

4圖,一又二分之一個實際像素點表示一個相對像素,DPR=1.5;

用響應(yīng)式思維思考 設(shè)置窗口

head 元素添加 viewport 標簽可以讓瀏覽器知道我們的意圖,我們需要在視窗值后面設(shè)置頁面寬度來指導(dǎo)頁面針對具體設(shè)備進行寬度調(diào)整,這使頁面可以匹配不同屏幕尺寸。

初始縮放比例設(shè)置為 1,使瀏覽器相對像素與 CSS 像素的比例是一比一。如果不把初始縮放比例設(shè)為 1 的話,有的瀏覽器會在切換為橫屏模式時依舊保持之前的頁面寬度,而且它們的內(nèi)容只是進行縮放,而無法自動調(diào)整布局。

元素的最大寬度

設(shè)置元素的最大寬度來防止溢出。

CSS

img, embed,
object, video {
  max-width: 100%;
}
點擊目標大小

我們的手指大約有 10mm 寬,差不多等于 40px CSS 像素。所以,按鈕至少應(yīng)該設(shè)置為 40 * 40px,但是與其設(shè)置那么大,更不如設(shè)置為 48 * 48px。這樣能確保元素之間有足夠的距離,以及那些手指更粗的人也能使用無礙。有些敲擊目標可以設(shè)置更小一些,但是請確保任何兩個敲擊目標之間至少有 40px 的距離,這樣能防止用戶同時點擊到兩個按鈕或者完全看不到按鈕。

從小處開始

設(shè)計從最小的屏幕做起,我們就必須仔細權(quán)衡對用戶最重要的信息,什么事情是用戶最想做的,或者什么是用戶最希望在屏幕上看到的?

如果是從最大的屏幕開始設(shè)計,一些重要的信息很可能會被輕易刪掉。相反,明確內(nèi)容的優(yōu)先級,然后從小到大的設(shè)計,最重要的內(nèi)容永遠都會留在頁面上。無論用戶使用什么樣的設(shè)備,都能得到最完整的體驗。

比如一個賣硬件的商店的設(shè)計,優(yōu)先考慮的信息是最近商店的地址、營業(yè)時間和聯(lián)系方式,把這些信息放在頁面頂部可以讓我更好的看到。

除了從小到大的設(shè)計,代碼編寫最好也是從小到大的,這樣就能知道主要風(fēng)格和布局是否能夠兼容任何設(shè)備,甚至是古老的不支持媒體查詢的瀏覽器。但是最好的理由是性能,如果從最小的設(shè)備開始,就必須一開始就去考慮性能的問題,需要我們有意識的去做一些決定來確定內(nèi)容優(yōu)先級以及要為用戶提供多少信息。

搭建 添加媒體查詢

link 標簽添加

@media 標簽嵌入

@media screen and (min-width: 500px) {
body { background: blue; }
}

@import 標簽嵌入

@import url("no.css") only screen and (min-width:500px);
/* 因為性能的原因,應(yīng)該避免使用@import */

間斷點的選取 彈性 常見響應(yīng)模式
序號 模式 圖解
1 大體流動模型 (mostly fluid)
2 掉落列模型 (column drop)
3 活動布局模型 (layout shifter)
4 畫布溢出模型 (off canvas)

有時一個網(wǎng)頁同時結(jié)合幾種模式,例如掉落列和畫布溢出模型。

模式-掉落列模型

首先要介紹的掉落列可能是最簡單的,在視窗最窄的時候,每個元素都縱向堆放,一個落一個。當視窗變寬,元素也隨之擴展,直到到達第一個間斷點。

在第一個間斷點,所有元素不再豎直堆放,而是前兩個元素并排顯示,第三個元素在它們下面。這些元素會繼續(xù)隨著視窗而延展,直到到達下一個間斷點

接著,它們會重排列成一個三列的布局。通常,當視窗達到最大寬度,列也達到最大寬度。然后,它們便不會隨視窗延展,而是在兩側(cè)添加外邊距。

代碼示例:

HTML

CSS

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

.box {
  width: 100%;
}

/* 第一個間斷點 */
@media screen and (min-width: 450px) {
  .dark_blue {
    width: 25%;
  }
  .light_blue {
    width: 75%;
  }
}

/* 第二個間斷點 */
@media screen and (min-width: 550px) {
  .dark_blue,
  .green {
    width: 25%;
  }
  .light_blue {
    width: 50%;
  }
}
/* 第三個間斷點 */
@media screen and (min-width: 700px) {
  .container {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}
模式-大體流動模型

大體流動模型與掉落列模型非常相似,但是它更像網(wǎng)格系統(tǒng),它有更多的列,而且列的響應(yīng)方式也不相同,這要取決于視窗寬度。

在視窗寬度最窄時,與掉落列模型一樣,為豎直堆放布局。但是隨著視窗變寬,網(wǎng)絡(luò)模型開始出現(xiàn)。最終,當視窗達到最大寬度,兩邊會出現(xiàn)外邊距,而內(nèi)容不再延展。

代碼示例:

HTML

CSS

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

.box {
  width: 100%;
}

/* 第一個間斷點 */
@media screen and (min-width: 450px) {
  .dark_blue,
  .green {
    width: 50%;
  }
}

/* 第二個間斷點 */
@media screen and (min-width: 500px) {
  .dark_blue,
  .light_blue {
    width: 50%;
  }
  .green,
  .red,
  .orange {
    width: 33.333333%;
  }
}

/* 第三個間斷點 */
@media screen and (min-width: 700px) {
  .container {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}
模式-活動布局模型

活動布局模型應(yīng)該是最靈活的響應(yīng)式模型了,它有很多適用于不同設(shè)備的間斷點。但最關(guān)鍵的是它的布局變換方式,并不是單純的重排列到其它列的下方。flexbox的亮點在這才真正凸顯,因為我們可以利用css order屬性。

代碼示例:

HTML

CSS

.container {
  width: 100%;
  display: flex;
  flex-wrap: flex;
}

.box {
  width: 100%;
}

/* 第一個間斷點 */
@media screen and (min-width: 500px) {
  .dark_blue {
    width: 50%;
  }
  #container2 {
    width: 50%;
  }
}

/* 第二個間斷點 */
@media screen and (min-width: 600px) {
  .dark_blue {
    width: 25%;
    order: 1;
  }
  #container2 {
    width: 50%;
  }
  .red {
    width: 25%;
    order: -1;
  }
}
模式-畫布溢出模型

在畫布溢出模型中,內(nèi)容并不是豎直堆放的,而是將不常用的內(nèi)容,比如導(dǎo)航欄或者應(yīng)用菜單放在屏幕以外,只有當屏幕足夠大的時候才顯示出來。在小尺寸屏幕上,溢出畫布的內(nèi)容通常會在用戶點擊菜單按鈕時出現(xiàn)。

代碼示例:

HTML


...

CSS

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

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

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

/* 第一個間斷點 */
@media screen and (min-width: 600px) {
  nav {
    position: relative;
    transform: translate(0, 0);
  }
  body {
    display: flex;
    flex-flow: row nowrap;
  }
  main {
    width: auto;
    flex-grow: 1;
  }
}

JavaScript

menu.addEventListener("click", function (e) {
  drawer.classList.toggle("open");
  e.stopPropagation();
});
優(yōu)化更多 響應(yīng)式圖片 響應(yīng)式表格 隱藏列

當視窗尺寸縮小時,隱藏列實質(zhì)上是根據(jù)它們的重要性來進行的。在較小屏幕上選擇隱藏某些內(nèi)容來達到我們的目的。

不再有表格

用“不再有表格”技術(shù),當視窗寬度小于一定值,表格會瓦解重組成長列表。與數(shù)據(jù)表不同,這種技術(shù)的好處是所有的數(shù)據(jù)都是可見的,不管視窗的尺寸是多大。

在一個較寬的窗口時,所有東西都正常顯示。但是當視窗縮小,表格瓦解,每個縱列實際上變成獨立一行,表頭在旁邊。使用媒體查詢,需要告訴表格當視窗小于一定寬度,讓表格不再顯示為“表格”。在媒體查詢里,強制所有的 table、thead、tbody、tr、th、td 執(zhí)行塊級顯示

代碼示例:

HTML

...
... ... ... ... ... ... ... ...

CSS

@media screen and (max-width: 500px) {
  table, thead, tbody, tr, th, td {
    display: block;
  }
  thead tr {  /* 對屏幕閱讀器友好 */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  td {
    position: relative;
    padding-left: 50%;
  }
  td:before {
    position: absolute;
    left: 6px;
    content: attr(data-th);
    font-weight: bold;
  }
}
表格內(nèi)滾動

為了把表格放在視窗里,可以做的最簡單的事情是把它放在一個 div 里面,然后設(shè)置寬度為 100%,溢出滾動。

代碼示例:

HTML

...
Team 1st 2nd 3rd 4th 5th

CSS

div.contained_table {
  width: 100%;
  overflow-x: auto;
}
字體

在閱讀是,一行文字太少或太多都是不合理的。因此,行的長度是在建立網(wǎng)站時的重要參考因素,這也是在選擇斷點的時候經(jīng)常要拿來參考的。使字體足夠大以適應(yīng)不同設(shè)備的閱讀效果是很重要的。建議基本字體設(shè)置至少 16px,行高至少有 1.2em。根據(jù)具體情況,可以在文本很多的網(wǎng)站增加更多行高。

記住,合適的字體可以使閱讀體驗提升很多。

次要斷點

除了選擇主要斷點,就是布局顯著改變的地方,增加副斷點來實現(xiàn)一些小的改變也是很有幫助的。例如,在主要斷點之間調(diào)整元素的外邊距和內(nèi)邊距可能是很有幫助的?;蛘呓o一些內(nèi)容增加字號會更容易閱讀,而且布局上會感到更自然。

好了,就是這樣!

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/111811.html

相關(guān)文章

  • 響應(yīng)編程的思維藝術(shù)】 (1)Rxjs專題學(xué)習(xí)計劃

    摘要:由于技術(shù)棧的學(xué)習(xí),筆者需要在原來函數(shù)式編程知識的基礎(chǔ)上,學(xué)習(xí)的使用。筆者在社區(qū)發(fā)現(xiàn)了一個非常高質(zhì)量的響應(yīng)式編程系列教程共篇,從基礎(chǔ)概念到實際應(yīng)用講解的非常詳細,有大量直觀的大理石圖來輔助理解流的處理,對培養(yǎng)響應(yīng)式編程的思維方式有很大幫助。 showImg(https://segmentfault.com/img/bVus8n); [TOC] 一. 響應(yīng)式編程 響應(yīng)式編程,也稱為流式編程...

    lscho 評論0 收藏0
  • 前端基礎(chǔ)之-響應(yīng),flex,適配(px、em、rem、%、vm)

    摘要:屏幕分辨率指在橫縱向上的像素點數(shù),單位是,個像素點。屏幕像素密度與屏幕尺寸和屏幕分辨率有關(guān)物理像素像素設(shè)備像素物理像素分辨率買手機的時候會有一個的分辨率,那是屏幕的個呈像的點,一個點小方格為一個物理像素。 響應(yīng)式-@media 響應(yīng)式就是一個網(wǎng)站能夠兼容多個終端—而不是為每個終端做一個特定的版本(響應(yīng)式開發(fā)一套界面);隨之而來的就是我們熟知的自適應(yīng),自適應(yīng)設(shè)計指能使網(wǎng)頁自適應(yīng)顯示在不同...

    Rocture 評論0 收藏0
  • 前端基礎(chǔ)之-響應(yīng),flex,適配(px、em、rem、%、vm)

    摘要:屏幕分辨率指在橫縱向上的像素點數(shù),單位是,個像素點。屏幕像素密度與屏幕尺寸和屏幕分辨率有關(guān)物理像素像素設(shè)備像素物理像素分辨率買手機的時候會有一個的分辨率,那是屏幕的個呈像的點,一個點小方格為一個物理像素。 響應(yīng)式-@media 響應(yīng)式就是一個網(wǎng)站能夠兼容多個終端—而不是為每個終端做一個特定的版本(響應(yīng)式開發(fā)一套界面);隨之而來的就是我們熟知的自適應(yīng),自適應(yīng)設(shè)計指能使網(wǎng)頁自適應(yīng)顯示在不同...

    int64 評論0 收藏0
  • Web前端開發(fā)學(xué)習(xí)推薦--菜鳥必看

    Web前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。第一階段:前端基礎(chǔ)(HTML / CSS / JavaScript / jQuery)初識HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識——標簽詳解html基礎(chǔ)知識——與用戶交互!(表單標簽)html基礎(chǔ)知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

    JerryWangSAP 評論0 收藏0
  • Web前端開發(fā)學(xué)習(xí)推薦--菜鳥必看

    Web前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。第一階段:前端基礎(chǔ)(HTML / CSS / JavaScript / jQuery)初識HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識——標簽詳解html基礎(chǔ)知識——與用戶交互!(表單標簽)html基礎(chǔ)知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

    shadajin 評論0 收藏0

發(fā)表評論

0條評論

fish

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<