国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

立即前往

首頁(yè)/文章專欄/響應(yīng)式網(wǎng)站開發(fā)基礎(chǔ)

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

tuomao 發(fā)布于2019-08-01 16:36 / 1555人閱讀

摘要：搭建添加媒體查詢標(biāo)簽添加標(biāo)簽嵌入標(biāo)簽嵌入因?yàn)樾阅艿脑颍瑧?yīng)該避免使用間斷點(diǎn)的選取彈性常見響應(yīng)模式序號(hào)模式圖解大體流動(dòng)模型掉落列模型活動(dòng)布局模型畫布溢出模型有時(shí)一個(gè)網(wǎng)頁(yè)同時(shí)結(jié)合幾種模式，例如掉落列和畫布溢出模型。

準(zhǔn)備工作 遠(yuǎn)程調(diào)試

chrome 瀏覽器設(shè)置

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

手機(jī)設(shè)置

打開開發(fā)者模式

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

打開手機(jī)端 chrome 瀏覽器

基礎(chǔ)知識(shí) 視窗（viewport）

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

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

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

字體改善機(jī)制

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

像素比（DPR）

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

下面計(jì)算每個(gè)圖代表的 DRP：

其中，每個(gè)藍(lán)色格子代表一個(gè)物理像素，一個(gè)橘色方框代表一個(gè)相對(duì)像素。

答案：

1圖,一個(gè)實(shí)際像素點(diǎn)表示一個(gè)相對(duì)像素，DPR=1；

2圖,每行的兩個(gè)實(shí)際像素點(diǎn)表示一個(gè)相對(duì)像素，DPR=2；

3圖,三個(gè)實(shí)際像素點(diǎn)表示一個(gè)相對(duì)像素，DPR=3；

4圖,一又二分之一個(gè)實(shí)際像素點(diǎn)表示一個(gè)相對(duì)像素，DPR=1.5；

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

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

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

元素的最大寬度

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

CSS

img, embed,
object, video {
  max-width: 100%;
}

點(diǎn)擊目標(biāo)大小

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

從小處開始

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

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

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

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

搭建 添加媒體查詢

link 標(biāo)簽添加

@media 標(biāo)簽嵌入

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

@import 標(biāo)簽嵌入

@import url("no.css") only screen and (min-width:500px);
/* 因?yàn)樾阅艿脑颍瑧?yīng)該避免使用@import */

間斷點(diǎn)的選取 彈性 常見響應(yīng)模式

序號(hào)	模式	圖解
1	大體流動(dòng)模型 (mostly fluid)
2	掉落列模型 (column drop)
3	活動(dòng)布局模型 (layout shifter)
4	畫布溢出模型 (off canvas)

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

模式-掉落列模型

首先要介紹的掉落列可能是最簡(jiǎn)單的，在視窗最窄的時(shí)候，每個(gè)元素都縱向堆放，一個(gè)落一個(gè)。當(dāng)視窗變寬，元素也隨之?dāng)U展，直到到達(dá)第一個(gè)間斷點(diǎn)。

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

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

代碼示例：

HTML

CSS

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

.box {
  width: 100%;
}

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

/* 第二個(gè)間斷點(diǎn) */
@media screen and (min-width: 550px) {
  .dark_blue,
  .green {
    width: 25%;
  }
  .light_blue {
    width: 50%;
  }
}
/* 第三個(gè)間斷點(diǎn) */
@media screen and (min-width: 700px) {
  .container {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}

模式-大體流動(dòng)模型

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

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

代碼示例：

HTML

CSS

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

.box {
  width: 100%;
}

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

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

/* 第三個(gè)間斷點(diǎn) */
@media screen and (min-width: 700px) {
  .container {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}

模式-活動(dòng)布局模型

活動(dòng)布局模型應(yīng)該是最靈活的響應(yīng)式模型了，它有很多適用于不同設(shè)備的間斷點(diǎn)。但最關(guān)鍵的是它的布局變換方式，并不是單純的重排列到其它列的下方。flexbox的亮點(diǎn)在這才真正凸顯，因?yàn)槲覀兛梢岳胏ss order屬性。

代碼示例：

HTML

CSS

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

.box {
  width: 100%;
}

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

/* 第二個(gè)間斷點(diǎn) */
@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)用菜單放在屏幕以外，只有當(dāng)屏幕足夠大的時(shí)候才顯示出來(lái)。在小尺寸屏幕上，溢出畫布的內(nèi)容通常會(huì)在用戶點(diǎn)擊菜單按鈕時(shí)出現(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);
}

/* 第一個(gè)間斷點(diǎn) */
@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)式表格 隱藏列

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

不再有表格

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

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

代碼示例：

HTML

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

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

CSS

@media screen and (max-width: 500px) {
  table, thead, tbody, tr, th, td {
    display: block;
  }
  thead tr {  /* 對(duì)屏幕閱讀器友好 */
    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)滾動(dòng)

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

代碼示例：

HTML


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

CSS

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

字體

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

記住，合適的字體可以使閱讀體驗(yàn)提升很多。

次要斷點(diǎn)

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

好了，就是這樣！