影音體驗(yàn)是真的強(qiáng) 簡(jiǎn)單聊聊iQOO Pad
大公司的好處就是產(chǎn)品線豐富，非常細(xì)分化的東西也能給你做出來(lái)，例如早先我們看到了新的vivo Pad2，之后我們又在iQOO Neo8 Pro的發(fā)布會(huì)上看到了iQOO的首款平板產(chǎn)品iQOO Pad。雖
大家好，我是樹哥。
相信大家都知道我最近在學(xué)習(xí)前端知識(shí)，最近學(xué)到了響應(yīng)式這塊的內(nèi)容。既然學(xué)到這塊內(nèi)容，那我必然會(huì)遵循「理論 - 實(shí)踐 - 總結(jié)」的學(xué)習(xí)方法，這篇文章就是我對(duì)響應(yīng)式知識(shí)的簡(jiǎn)單總結(jié)。
響應(yīng)式布局，就是根據(jù)不同設(shè)備展示不同的布局，以免更方便用戶瀏覽頁(yè)面。 舉個(gè)很簡(jiǎn)單的例子，我們?cè)陔娔X上瀏覽網(wǎng)頁(yè)，屏幕非常大，這時(shí)候可能采用的是如下圖所示的布局方式。這種布局方式很寬敞，能夠容納的內(nèi)容也很多，能夠最大程度地傳遞信息。
美團(tuán)官網(wǎng)PC屏幕
如果是在類似于 iPad Pro 的平板電腦上，由于屏幕大小原因，我們會(huì)使用不一樣的布局。對(duì)于美團(tuán)官網(wǎng)來(lái)說(shuō)，他們就把頂部的導(dǎo)航欄隱藏起來(lái)，需要通過(guò)點(diǎn)擊左上角的菜單按鈕才能顯示，如下圖所示。
美團(tuán)官網(wǎng)iPad屏幕
如果是在更小的手機(jī)屏幕上，那不僅導(dǎo)航欄要隱藏起來(lái)，就連下面的文章列表也只能一行顯示一篇文章，如下圖所示。
美團(tuán)官網(wǎng)iPhone屏幕
總結(jié)一下，所謂的響應(yīng)式布局，就是根據(jù)不同的瀏覽介質(zhì)，制定不同的布局方案，以便于用戶更好地瀏覽信息。
了解完響應(yīng)式布局原理，我們從代碼層面來(lái)看看如何實(shí)現(xiàn)這樣的響應(yīng)式布局。
在 CSS3 中，定義了 @media 這個(gè)屬性來(lái)實(shí)現(xiàn)響應(yīng)式效果。例如我們希望在屏幕尺寸低于 768px 的時(shí)候顯示黑色，大于 768px 的時(shí)候顯示紅色，那么我們可以這么寫。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>響應(yīng)式布局例子</title> <style type="text/css"> body { background-color: black; } @media (min-width:768px) { body { background-color: red; } } </style></head><body></body></html>上面代碼的運(yùn)行效果如下圖所示。我們手動(dòng)改變窗口的大小，當(dāng)窗口的大小大于 768px 的時(shí)候，窗口的背景顏色變成了紅色。當(dāng)窗口大小小于 768px 的時(shí)候，窗口背景顏色變回了黑色。
響應(yīng)式布局小案例
在上面的代碼中，最核心的代碼是如下這段代碼，如下代碼所示。
@media (min-width:768px) { body { background-color: red; }}上面這段 CSS 表示：當(dāng)寬度最小為 768px 的時(shí)候，窗口的背景顏色設(shè)置為紅色。
這個(gè)例子只是為了簡(jiǎn)潔地向大家解釋響應(yīng)式布局的使用，在實(shí)際的項(xiàng)目使用中，響應(yīng)式布局的使用會(huì)更加復(fù)雜一些。但無(wú)論如何復(fù)雜，它都是由最基本的單元組成。你理解了這個(gè)例子，你就能理解實(shí)戰(zhàn)項(xiàng)目中的響應(yīng)式布局。
上面舉了一個(gè)小案例，向大家簡(jiǎn)單說(shuō)明了如何使用 @media 實(shí)現(xiàn)響應(yīng)式布局。這里我再舉一個(gè)實(shí)戰(zhàn)項(xiàng)目的例子，讓大家更深刻地理解響應(yīng)式布局。
我們還是舉美團(tuán)官網(wǎng)這個(gè)例子：美團(tuán)官網(wǎng)在瀏覽器寬度小于 1280px 的時(shí)候，會(huì)將導(dǎo)航欄隱藏起來(lái)。在導(dǎo)航欄寬度大于 1280px 的時(shí)候，會(huì)將導(dǎo)航欄顯示出來(lái)，如下圖所示。
美團(tuán)官網(wǎng)導(dǎo)航欄-PC與iPad對(duì)比
為了較好地解釋實(shí)現(xiàn)原理，我們用如下的 html 代碼代表美團(tuán)導(dǎo)航欄的實(shí)現(xiàn)。
<div> <div class="pc"></div> <div class="ipad"></div></div>那么美團(tuán)官網(wǎng)是如何去實(shí)現(xiàn)這樣的響應(yīng)式效果的呢？
其實(shí)實(shí)現(xiàn)這樣的效果很簡(jiǎn)單，只需要實(shí)現(xiàn)這樣的邏輯即可：默認(rèn)情況下，顯示 ipad 類對(duì)應(yīng)的 div 塊，隱藏 pc 類對(duì)應(yīng)的 div 塊。當(dāng)瀏覽器的寬度大于 1280px，那就隱藏 ipad 類對(duì)應(yīng)的 div 塊，顯示 pc 類對(duì)應(yīng)的 div 塊。實(shí)現(xiàn)的 CSS 代碼如下所示。
.pc { display: none;}.ipad { display: block;}@media (min-width:1280px) { .pc { display: block; } .ipad { display: none; }}隨后，我們?cè)倮^續(xù)在 pc 和 ipad 對(duì)應(yīng)的 div 塊中實(shí)現(xiàn)相應(yīng)的 html 結(jié)構(gòu)和 CSS 樣式即可。在這個(gè)過(guò)程中，可能不僅涉及到隱藏，還會(huì)涉及到其他的布局變動(dòng)，例如：在小屏幕時(shí)是 display: block，而在大屏幕的時(shí)候則是 display: flex。在小屏幕的時(shí)候可能是 flex-direction: column，而在大屏幕的時(shí)候則是 flex-direction: row等等。
對(duì)于設(shè)計(jì)師來(lái)說(shuō)，響應(yīng)式布局就是針對(duì)不同的屏幕媒介，設(shè)計(jì)不同的布局方式，讓用戶更簡(jiǎn)單方便地閱讀信息。對(duì)于開發(fā)者來(lái)說(shuō)，響應(yīng)式布局就是使用 @media、display:none、display: flex 等各種工具，來(lái)實(shí)現(xiàn)設(shè)計(jì)師想要的各種布局方式。
弄清楚了響應(yīng)式布局的道，我們還需要弄清楚響應(yīng)式布局的術(shù) —— 也就是語(yǔ)法！
對(duì)于響應(yīng)式布局來(lái)說(shuō)，它就只有一個(gè)語(yǔ)法 —— @media，它的語(yǔ)法格式如下所示。
@media not|only mediatype and (mediafeature and|or|not mediafeature) { CSS-Code;}上述語(yǔ)法可以分為兩部分，分別是 mediatype 部分和 mediafeature 部分。
mediatype 代表媒體類型，例如：電腦屏幕、平板電腦、打印機(jī)等。對(duì)于 mediatype 部分來(lái)說(shuō)，其前面可以加上 not 或者 only 修飾符來(lái)分別表示「否」或者「只有」的意思。mediatype 常用取值有如下幾個(gè)：
更多的媒體類型取值可參考：@media - CSS: Cascading Style Sheets | MDN。
舉個(gè)很簡(jiǎn)單的例子，我們只想針對(duì)打印機(jī)或打印機(jī)預(yù)覽使用某些 CSS 樣式，那么我們可以這么寫：
@media print { /* … */}如果我們只想對(duì)除了打印機(jī)或打印機(jī)預(yù)覽之外的其他所有設(shè)備適用，那么我們可以這么寫：
@media not print { /* … */}mediatype 部分可以不填，不填的時(shí)候默認(rèn)取 all 值，表示對(duì)于所有設(shè)備都適用。
mediafeature 代表媒體特性，例如：顏色、寬度、高度等。對(duì)于 mediafeature 部分來(lái)說(shuō)，其可以使用 and、or、not 來(lái)組成一組判斷語(yǔ)句，從而實(shí)現(xiàn)更加復(fù)雜的功能。mediafeature 常用取值有如下幾個(gè)：
更多的媒體特性取值可參考：@media - CSS: Cascading Style Sheets | MDN
舉個(gè)很簡(jiǎn)單的例子，我們想針對(duì)所有屏幕寬度小于768px的設(shè)備應(yīng)用某些樣式，那么我們可以這么寫：
@media (max-width:768px) { /* … */}如果我們想針對(duì)所有屏幕寬度小于 768px 并且屏幕高度小于 500px 的設(shè)備應(yīng)用某些樣式，那么我們可以這么寫：
@media (max-width:768px and max-height: 500px) { /* … */}看到這里，相信大家都已經(jīng)能理解響應(yīng)式布局的含義了。
其實(shí)響應(yīng)式布局并不難，其語(yǔ)法也很簡(jiǎn)單，更重要的是理解響應(yīng)式布局背后的重要意義 —— 信息傳遞。在不同的信息傳遞媒介，為了閱讀者的體驗(yàn)，我們應(yīng)該設(shè)計(jì)不同的布局方式，需要思考應(yīng)該傳遞哪些信息。我們只有擁有了這樣的意識(shí)，我們才能做出讓用戶拍手叫好的產(chǎn)品，做出讓用戶用著感覺(jué)酣暢淋漓的作品！
目前響應(yīng)式布局更多還是在各類官網(wǎng)的使用上，因?yàn)檫@些場(chǎng)景更看懂信息的傳遞，需要在不同的信息傳遞媒介都能有很好的體驗(yàn)效果。除此之外，其他的類似于管理后臺(tái)、工具類站點(diǎn)，使用到響應(yīng)式布局的需求還是非常少的。
本文鏈接：http://www.www897cc.com/showinfo-26-46354-0.html關(guān)于響應(yīng)式布局，你需要了解的知識(shí)點(diǎn)
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 基于數(shù)據(jù)源驅(qū)動(dòng)的跨組件通信最佳實(shí)踐(低碼篇)
下一篇： 聽說(shuō)你會(huì)架構(gòu)設(shè)計(jì)？來(lái)，弄一個(gè)紅包系統(tǒng)
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)