MNp28資訊網(wǎng)——每日最新資訊28at.com

1、響應(yīng)式

一套適用于手機(jī)、iPad 和 PC 的代碼。每次加載不同的樣式時(shí)，它們都能在一個(gè)項(xiàng)目中兼容。這就是所謂的響應(yīng)性。然后，我希望產(chǎn)品經(jīng)理能多考慮一下。我不想做了設(shè)計(jì)工作，最后卻說它不好看，因?yàn)槲也粫?huì)做設(shè)計(jì)。MNp28資訊網(wǎng)——每日最新資訊28at.com

2、自適應(yīng)

自適應(yīng)是一套代碼，無論屏幕尺寸如何變化，改變的只是頁(yè)面的元素尺寸，而不會(huì)出現(xiàn)三欄變兩欄的表格變化。以前，領(lǐng)導(dǎo)和設(shè)計(jì)總讓我修改頁(yè)面，說是自適應(yīng)窗口的變化。結(jié)果要求把三欄改成兩欄。為什么要把這個(gè)按鈕隱藏起來，那個(gè)按鈕改成外觀，怎么改呢？難道不需要設(shè)計(jì)一張圖片嗎？我是不是在幻想？MNp28資訊網(wǎng)——每日最新資訊28at.com

• 使用彈性布局
• 使用百分比
• 避免寫死寬度和高度
• 添加滾動(dòng)條
• 使用 rem

3、移動(dòng)終端的常用寬度和高度

MNp28資訊網(wǎng)——每日最新資訊28at.com

• 垂直屏幕的常見寬高比：1:2, 2:3, 3:4, 3:5, 5:8, 9:16
• 橫向屏幕的常見寬高比：4:3, 5:3

智能手機(jī)屏幕尺寸和分辨率列表MNp28資訊網(wǎng)——每日最新資訊28at.com

MNp28資訊網(wǎng)——每日最新資訊28at.com

4、常見布局

（1）百分比布局

• 當(dāng)改變窗口的高度和寬度時(shí)，通過給出 height, width, padding, border, 和 margin 等屬性，它們都依賴于父組件的寬度和高度（margin 和 padding 都可以使用百分比值的形式，但這與通常的想法有點(diǎn)不同，不同之處在于 margin-top, margin-bottom, padding-top, and padding-bottom 的百分比值不是指容器的高度，而是指父容器的寬度）。
• 如果為子元素的頂部和底部設(shè)置了百分比，它將相對(duì)于父元素的高度，并直接進(jìn)行非靜態(tài)定位（默認(rèn)定位）。同樣，如果為子元素的左側(cè)和右側(cè)設(shè)置了百分比，它將與父元素寬度的直接非靜態(tài)定位（默認(rèn)定位）相對(duì)應(yīng)。
• 如果子元素的 padding 和 margin 設(shè)置為百分比，無論是垂直還是水平，它們都是相對(duì)于直接父元素的寬度而言的，與父元素的高度無關(guān)。 border-radius 是一個(gè)百分比，是相對(duì)于其寬度而言的.

缺點(diǎn)計(jì)算困難。如果我們要根據(jù)設(shè)計(jì)草案定義元素的寬度和高度，必須將其轉(zhuǎn)換為百分比單位。MNp28資訊網(wǎng)——每日最新資訊28at.com

（2）媒體查詢布局

使用 @media 媒體查詢，我們可以針對(duì)不同的屏幕尺寸編寫不同的樣式，從而實(shí)現(xiàn)響應(yīng)式布局。MNp28資訊網(wǎng)——每日最新資訊28at.com

響應(yīng)式的缺點(diǎn)：如果有太多的樣式需要在瀏覽器尺寸發(fā)生變化時(shí)進(jìn)行更改，那么多套樣式代碼將非常麻煩。MNp28資訊網(wǎng)——每日最新資訊28at.com

@media mediatype and not only (media feature) { css-code; }<link rel="stylesheet" media="mediatype and not only (media feature)" href"mystylesheet.css"<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">@media screen and (max-device-width:960px){  body{background:red;}}

常用響應(yīng)斷點(diǎn)閾值設(shè)置。MNp28資訊網(wǎng)——每日最新資訊28at.com

MNp28資訊網(wǎng)——每日最新資訊28at.com

（3）Rem responsive 布局

rem 通常用于適應(yīng)移動(dòng)終端，頁(yè)面根據(jù)視口分為 10 個(gè)部分。MNp28資訊網(wǎng)——每日最新資訊28at.com

例如，現(xiàn)在有 5 個(gè)大小相同的屏幕（750 640 480 375 320），所有屏幕的總寬度被劃分為 10rem.MNp28資訊網(wǎng)——每日最新資訊28at.com

然后，我們需要獲取與這些不同屏幕相對(duì)應(yīng)的 html 根元素的字體大小。MNp28資訊網(wǎng)——每日最新資訊28at.com

MNp28資訊網(wǎng)——每日最新資訊28at.com

flexible.js 插件還可以解決以下問題。MNp28資訊網(wǎng)——每日最新資訊28at.com

em 和 rem 與之類似，它們都根據(jù) font-size 來縮放頁(yè)面布局，但 em 主要取決于直接父級(jí)標(biāo)簽 font-size 的大小，并且只會(huì)查找最近的父級(jí)標(biāo)簽，而不會(huì)直接依賴于整個(gè) html 根標(biāo)簽。MNp28資訊網(wǎng)——每日最新資訊28at.com

（4）VW、VH 響應(yīng)式布局

因?yàn)?100vw = 100 視圖窗口寬度，100vh = 100 視圖窗口高度，那么根據(jù) 750 的設(shè)計(jì)草案，100vw 就是 750。那么 1vw 就是 7.5pxMNp28資訊網(wǎng)——每日最新資訊28at.com

MNp28資訊網(wǎng)——每日最新資訊28at.com

（5）Flex 彈性布局

flex-direction, flex-wrap, justify-content, align-itemsalign-content: order, flex-grow, flex-shrink, flex-basis, align-self

（6）雙翼布局

左右兩列的寬度是恒定的，中間一列的寬度則根據(jù)瀏覽器窗口的大小自適應(yīng)調(diào)整。MNp28資訊網(wǎng)——每日最新資訊28at.com

（7）圣杯布局

與雙飛翼布局一樣，左右兩欄的寬度是恒定的，中間一欄的寬度根據(jù)瀏覽器窗口的大小自適應(yīng)，但它更加完整。MNp28資訊網(wǎng)——每日最新資訊28at.com

MNp28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-10480-0.html每個(gè)高級(jí)前端工程師都應(yīng)該知道的前端布局

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 算法基礎(chǔ)：理解和應(yīng)用計(jì)算機(jī)算法

下一篇： 使用Docker構(gòu)建輕量級(jí)Linux容器