網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)課件

上傳人：1*** IP屬地：廣東上傳時(shí)間：2025-02-16 格式：PPTX 頁(yè)數(shù)：106 大?。?.69MB 積分：40 舉報(bào) 版權(quán)申訴

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)課件_第2頁(yè)

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)課件_第3頁(yè)

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)課件_第4頁(yè)

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)課件_第5頁(yè)

已閱讀5頁(yè)，還剩101頁(yè)未讀，繼續(xù)免費(fèi)閱讀

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第10章移動(dòng)端布局和響應(yīng)式開(kāi)發(fā)10.1移動(dòng)端布局10.2rem布局10.3響應(yīng)式開(kāi)發(fā)了解流式布局和媒體查詢了解Bootstrap框架掌握Flex布局和rem布局引言隨著手機(jī)的廣泛使用，移動(dòng)互聯(lián)網(wǎng)成為當(dāng)下熱門(mén)的話題，而移動(dòng)端開(kāi)發(fā)也成為重要的發(fā)展方向。移動(dòng)端布局和PC（電腦）端布局有很多不同之處。移動(dòng)端設(shè)備的尺寸不一，需要對(duì)設(shè)備進(jìn)行適配處理。移動(dòng)端的橫屏豎屏切換，需要有針對(duì)性的響應(yīng)式布局。移動(dòng)端布局有流式布局、Flex布局、rem布局等，不同的網(wǎng)頁(yè)可以使用不同的布局方式來(lái)呈現(xiàn)。而響應(yīng)式開(kāi)發(fā)能夠使頁(yè)面內(nèi)容可以在不同的設(shè)備上有適應(yīng)性地展現(xiàn)出來(lái)，讓用戶更方便地在不同設(shè)備上瀏覽網(wǎng)頁(yè)。10.1移動(dòng)端布局視口案例—圖書(shū)活動(dòng)Flex布局Flex布局流式布局10.1

移動(dòng)端布局視口(viewport)是瀏覽器顯示頁(yè)面內(nèi)容的屏幕區(qū)域。視口可以分為布局視口（layoutviewport）、視覺(jué)視口（visualviewport）和理想視口（idealviewport）。布局視口是指網(wǎng)頁(yè)的固定寬度，是早期為了解決PC端頁(yè)面在手機(jī)上的顯示問(wèn)題，根據(jù)不同的設(shè)備而設(shè)置的默認(rèn)寬度。視覺(jué)視口是屏幕的可視部分，不包括屏幕鍵盤(pán)，縮放外的區(qū)域，視覺(jué)視口比布局視口相同或者更小。理想視口是指對(duì)設(shè)備而言最理想的視口尺寸，能夠使網(wǎng)頁(yè)在移動(dòng)端瀏覽器上獲得最理想的瀏覽和閱讀的寬度。10.1.1

視口概述10.1

移動(dòng)端布局通過(guò)<meta>視口標(biāo)簽可以在不同的設(shè)備上設(shè)置視口，<meta>視口標(biāo)簽的語(yǔ)法格式如下所示。10.1.1

視口使用視口<metaname="viewport"content="視口的屬性"><metaname=viewportcontent="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">完整視口的寫(xiě)法如下所示。10.1

移動(dòng)端布局在上述完整視口的寫(xiě)法中，width屬性為視口的寬度，“width=device-width”表示視口寬度為當(dāng)前設(shè)備的寬度。user-scalable屬性表示用戶是否縮放，屬性值為yes或no（1或0）。initial-scale屬性為初始縮放比，屬性值為大于0的數(shù)字。minimum-scale屬性為最小縮放比，屬性值為大于0的數(shù)字。maximum-scale屬性為最大縮放比，屬性值為大于0的數(shù)字。minimal-ui屬性是<meta>標(biāo)簽新增的屬性，可以使網(wǎng)頁(yè)在加載時(shí)便可隱藏頂部的地址欄與底部的導(dǎo)航欄。10.1.1

視口使用視口10.1

移動(dòng)端布局移動(dòng)端的顯示頁(yè)面與PC端的顯示頁(yè)面是有所區(qū)別的，因此需要為全局頁(yè)面設(shè)置特殊的樣式，移動(dòng)端特殊樣式如下所示。10.1.1

視口移動(dòng)端基礎(chǔ)交互*{

-webkit-tap-highlight-color:transparent;/*清除點(diǎn)擊屏幕時(shí)的高亮顯示*/}html,body{

-webkit-user-select:none;/*禁止選中文本*/}a,img{

-webkit-touch-callout:none;/*禁止長(zhǎng)按鏈接與圖片彈出菜單*/}input{

-webkit-appearance:none;/*取消文本框或按鈕的默認(rèn)外觀樣式，以便自定義外觀*/}10.1

移動(dòng)端布局流式布局也叫百分比布局，是一種等比例縮放的布局方式，是移動(dòng)端開(kāi)發(fā)中經(jīng)常使用的布局方式之一。流式布局是對(duì)頁(yè)面以百分比方式劃分區(qū)域進(jìn)行排版，可以在不同分辨率下顯示相同的版式，將盒子的寬度設(shè)置成百分比，搭配min-*和max-*屬性使用。流式布局的實(shí)現(xiàn)方法是將CSS固定像素寬度換算為百分比寬度，換算公式為“目標(biāo)元素寬度/父盒子寬度=百分?jǐn)?shù)寬度”。10.1.2

流式布局概述10.1

移動(dòng)端布局流式布局的特點(diǎn)有以下3個(gè)方面。10.1.2

流式布局概述盒子寬度自適應(yīng)，使用百分比來(lái)定義，但高度使用固定px像素值定義。盒子內(nèi)的圖標(biāo)、字體大小等都是固定的，不是所有內(nèi)容都是自適應(yīng)。在CSS樣式中，需要使用min-*和max-*屬性來(lái)設(shè)置盒子在設(shè)備中的最小寬度和最大寬度，防止任意拉伸頁(yè)面帶來(lái)的異常問(wèn)題的發(fā)生。10.1

移動(dòng)端布局使用流式布局在移動(dòng)端頁(yè)面上分別展示3張不同比例大小的圖片，具體代碼如下。10.1.2

流式布局演示說(shuō)明<head><metacharset="UTF-8">

<metaname=viewportcontent="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui"><title>流式布局展示圖片</title></head><body><ul><li><imgsrc="../image/29.png"alt=""><span>天空</span></li><li><imgsrc="../image/30.png"alt=""><span>山水</span></li><li><imgsrc="../image/31.png"alt=""><span>陽(yáng)光</span></li></ul></body>主體代碼

例10.110.1

移動(dòng)端布局使用流式布局在移動(dòng)端頁(yè)面上分別展示3張不同比例大小的圖片，具體代碼如下。10.1.2

流式布局演示說(shuō)明/*清除頁(yè)面默認(rèn)邊距*/*{margin:0;padding:0;

-webkit-tap-highlight-color:transparent;/*清除點(diǎn)擊屏幕時(shí)的高亮顯示*/}html,body{

-webkit-user-select:none;/*禁止選中文本*/}a,img{

-webkit-touch-callout:none;/*禁止長(zhǎng)按鏈接與圖片彈出菜單*/}input{

-webkit-appearance:none;/*取消文本框或按鈕的默認(rèn)外觀樣式，以便自定義外觀*/}

CSS代碼

例10.1/*設(shè)置整個(gè)頁(yè)面*/body{

width:100%;

min-width:240px;/*移動(dòng)端視口的最小寬度*/max-width:600px;/*最大寬度*/margin:0auto;font-size:16px;/*字體大小*/color:#778899;/*文字顏色*/font-family:-apple-system,Helvetica,sans-serif;/*字體風(fēng)格*/}/*設(shè)置移動(dòng)端頁(yè)面中的無(wú)序列表盒子*/ul{

width:100%;/*寬度100%*/height:200px;/*高度*/

list-style:none;/*取消項(xiàng)目列表標(biāo)記*/}

10.1

移動(dòng)端布局使用流式布局在移動(dòng)端頁(yè)面上分別展示3張不同比例大小的圖片，具體代碼如下。10.1.2

流式布局演示說(shuō)明CSS代碼

例10.1/*設(shè)置每一個(gè)子元素*/ulli{height:200px;

float:left;/*向左浮動(dòng)*/text-align:center;/*內(nèi)容居中對(duì)齊*/}/*分別設(shè)置第1~3個(gè)子元素在父盒子中的百分比寬度*/

ulli:nth-child(1){

width:45%;}

ulli:nth-child(2){

width:30%;}

ulli:nth-child(3){

width:25%;}/*統(tǒng)一設(shè)置每一個(gè)子元素中的圖片*/ulliimg{

width:100%;/*圖片寬度為自身父元素的100%*/height:180px;

vertical-align:top;/*清除圖片底部空白間隙*/}10.1

移動(dòng)端布局使用流式布局在移動(dòng)端頁(yè)面上分別展示3張不同比例大小的圖片，運(yùn)行效果如下。10.1.2

流式布局演示說(shuō)明10.1

移動(dòng)端布局Flex是FlexibleBox的縮寫(xiě)，意為“彈性布局”，可為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以使用display屬性指定為Flex布局，示例代碼如下所示。10.1.3

Flex布局概述塊級(jí)元素display:flex;內(nèi)聯(lián)元素display:inline-flex;10.1

移動(dòng)端布局10.1.3

Flex布局概述采用Flex布局的元素，稱(chēng)為Flex容器（flexcontainer），簡(jiǎn)稱(chēng)”容器”。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為Flex項(xiàng)目（flexitem），簡(jiǎn)稱(chēng)”項(xiàng)目”。容器默認(rèn)存在兩根軸，即水平的主軸（mainaxis）和垂直的交叉軸（也稱(chēng)為側(cè)軸，crossaxis）。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做mainstart，結(jié)束位置叫做mainend；交叉軸的開(kāi)始位置叫做crossstart，結(jié)束位置叫做crossend。項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做mainsize，占據(jù)的交叉軸空間叫做crosssize。10.1

移動(dòng)端布局10.1.3

Flex布局概述Flex布局如圖所示。10.1

移動(dòng)端布局10.1.3

Flex布局容器屬性Flex布局的容器屬性有6個(gè)，分別為flex-direction屬性、flex-wrap屬性、flex-flow屬性、justify-content屬性、align-items屬性和align-content屬性。10.1

移動(dòng)端布局10.1.3

Flex布局容器屬性flex-direction屬性決定主軸的方向，即項(xiàng)目的排列方向，其語(yǔ)法格式如下所示。1.flex-direction屬性flex-direction:row|row-reverse|column|column-reverse;10.1

移動(dòng)端布局10.1.3

Flex布局容器屬性在上述語(yǔ)法中，flex-direction屬性有4個(gè)屬性值，其4個(gè)屬性值的具體說(shuō)明如表所示。1.flex-direction屬性屬性值說(shuō)明row默認(rèn)值，主軸為水平方向，起點(diǎn)在左端row-reverse主軸為水平方向，起點(diǎn)在右端column主軸為垂直方向，起點(diǎn)在上沿column-reverse主軸為垂直方向，起點(diǎn)在下沿10.1

移動(dòng)端布局10.1.3

Flex布局容器屬性在默認(rèn)情況下，項(xiàng)目都是排在一條軸線上。flex-wrap屬性定義，如果一條軸線排不下，該如何換行。flex-wrap屬性的語(yǔ)法格式如下所示。2.flex-wrap屬性flex-wrap:nowrap|wrap|wrap-reverse;10.1

移動(dòng)端布局10.1.3

Flex布局容器屬性在上述語(yǔ)法中，flex-wrap屬性有3個(gè)屬性值，其3個(gè)屬性值的具體說(shuō)明如表所示。2.flex-wrap屬性屬性值說(shuō)明nowrap默認(rèn)值，不換行wrap換行，第一行在上方wrap-reverse換行，第一行在下方10.1

移動(dòng)端布局10.1.3

Flex布局容器屬性justify-content屬性定義項(xiàng)目在主軸上的對(duì)齊方式，具體對(duì)齊方式與軸的方向有關(guān)，其語(yǔ)法格式如下所示。3.justify-content屬性justify-content:flex-start|flex-end|center|space-between|space-around;10.1

移動(dòng)端布局10.1.3

Flex布局容器屬性在上述語(yǔ)法中，justify-content屬性有5個(gè)屬性值，其5個(gè)屬性值的具體說(shuō)明如表所示。3.justify-content屬性屬性值說(shuō)明flex-start默認(rèn)值，左對(duì)齊flex-end右對(duì)齊center居中space-between兩端對(duì)齊，項(xiàng)目之間的間隔都相等space-around每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等，因此項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍10.1

移動(dòng)端布局10.1.3

Flex布局容器屬性align-items屬性定義項(xiàng)目在交叉軸（側(cè)軸）上如何對(duì)齊，在子項(xiàng)為單項(xiàng)時(shí)使用，具體的對(duì)齊方式與交叉軸的方向有關(guān)，其語(yǔ)法格式如下所示。4.align-items屬性align-items:flex-start|flex-end|center|baseline|stretch;10.1

移動(dòng)端布局10.1.3

Flex布局容器屬性在上述語(yǔ)法中，align-items屬性有5個(gè)屬性值，其5個(gè)屬性值的具體說(shuō)明如表所示。4.align-items屬性屬性值說(shuō)明flex-start交叉軸的起點(diǎn)對(duì)齊flex-end交叉軸的終點(diǎn)對(duì)齊center交叉軸的中點(diǎn)對(duì)齊baseline項(xiàng)目的第一行文字的基線對(duì)齊stretch默認(rèn)值，伸縮，如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度10.1

移動(dòng)端布局10.1.3

移動(dòng)端布局10.1.3

Flex布局容器屬性在上述語(yǔ)法中，align-content屬性有6個(gè)屬性值，其6個(gè)屬性值的具體說(shuō)明如表所示。5.align-content屬性屬性值說(shuō)明flex-start與交叉軸的起點(diǎn)對(duì)齊flex-end與交叉軸的終點(diǎn)對(duì)齊center與交叉軸的中點(diǎn)對(duì)齊space-between與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布space-around每根軸線兩側(cè)的間隔都相等，因此軸線之間的間隔比軸線與邊框的間隔大一倍stretch默認(rèn)值，拉伸，軸線占滿整個(gè)交叉軸10.1

移動(dòng)端布局10.1.3

Flex布局容器屬性flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為rownowrap。flex-flow屬性的語(yǔ)法格式如下所示。6.flex-flow屬性flex-flow:<flex-direction>||<flex-wrap>;10.1

移動(dòng)端布局10.1.3

Flex布局項(xiàng)目屬性上述的6個(gè)容器屬性都是添加在父元素上的，而子元素也帶有一些相關(guān)屬性。Flex布局的項(xiàng)目屬性有6個(gè)，分別為order屬性、flex-grow屬性、flex-shrink屬性、flex-basis屬性、flex屬性和align-self屬性。10.1

移動(dòng)端布局10.1.3

Flex布局項(xiàng)目屬性order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。order屬性的語(yǔ)法格式如下所示。1.order屬性order:<integer>;10.1

移動(dòng)端布局10.1.3

Flex布局項(xiàng)目屬性flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。flex-grow屬性的語(yǔ)法格式如下所示。2.flex-grow屬性flex-grow:<number>;/*default0*/如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。10.1

移動(dòng)端布局10.1.3

Flex布局項(xiàng)目屬性flex-shrink屬性定義項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。flex-shrink屬性的語(yǔ)法格式如下所示。3.flex-shrink屬性flex-shrink:<number>;/*default1*/如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。負(fù)值對(duì)flex-shrink屬性無(wú)效。10.1

移動(dòng)端布局10.1.3

Flex布局項(xiàng)目屬性flex-basis屬性定義在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（mainsize）。瀏覽器根據(jù)flex-basis屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。flex-basis屬性的語(yǔ)法格式如下所示。4.flex-basis屬性flex-basis:<length>|auto;/*defaultauto*/flex-basis屬性如果設(shè)為跟width屬性或height屬性一樣的值（例如360px），則項(xiàng)目將占據(jù)固定空間。10.1

移動(dòng)端布局10.1.3

Flex布局項(xiàng)目屬性flex屬性是flex-grow屬性、flex-shrink屬性和flex-basis屬性的簡(jiǎn)寫(xiě)，默認(rèn)值為01auto。flex-shrink屬性和flex-basis屬性為可選屬性。當(dāng)flex屬性只寫(xiě)一個(gè)數(shù)值時(shí)，該數(shù)值代表項(xiàng)目中元素占據(jù)的份數(shù)，如“flex:1;”表示項(xiàng)目中的各個(gè)子元素平均分配該項(xiàng)目的空間。flex屬性的語(yǔ)法格式如下所示。5.flex屬性flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]flex屬性有2個(gè)快捷值，即auto(11auto)和none(00auto)。建議優(yōu)先使用flex屬性，而不是單獨(dú)寫(xiě)3個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。10.1

移動(dòng)端布局10.1.3

Flex布局項(xiàng)目屬性align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。align-self屬性的語(yǔ)法如下所示。6.align-self屬性align-self:auto|flex-start|flex-end|center|baseline|stretch;align-self屬性可以取6個(gè)值，除了auto，其他都與align-items屬性完全一致。10.1移動(dòng)端布局10.1.4

案例-圖書(shū)活動(dòng)Flex布局本實(shí)例是使用Flex布局制作一個(gè)圖書(shū)活動(dòng)專(zhuān)區(qū)的移動(dòng)端頁(yè)面。該頁(yè)面主要由<div>塊元素、<ul>無(wú)序列表和<img>圖像標(biāo)簽構(gòu)成，圖書(shū)活動(dòng)專(zhuān)區(qū)的移動(dòng)端頁(yè)面結(jié)構(gòu)簡(jiǎn)圖如圖所示。<head><metacharset="UTF-8"><title>圖書(shū)活動(dòng)flex布局</title>

<metaname=viewportcontent="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui"><linktype="text/css"rel="stylesheet"href="flex.css"></head><body><divid="container">

<ulclass="nav">

代碼實(shí)現(xiàn)10.1移動(dòng)端布局10.1.4案例-圖書(shū)活動(dòng)Flex布局主體代碼

例10.2<li><ahref="#">圖書(shū)</a></li></ul>

<divclass="ban-lg"><imgsrc="../image/book.jpg"alt=""></div>

<ulclass="ban-sm"><li><imgsrc="../image/shu-1.png"alt=""></li></ul></div></body>/*設(shè)置整個(gè)body頁(yè)面*/body{

max-width:540px;/*最大寬度*/min-width:320px;/*最小寬度*/color:#000;background-color:#f2f2f2;overflow-x:hidden;

-webkit-tap-highlight-color:transparent;}/*設(shè)置容器*/#container{

max-width:540px;min-width:320px;margin:0auto;/*設(shè)置上下外邊距為10px，左右處于居中位置*/}/*設(shè)置頂部導(dǎo)航欄*/.nav{

display:flex;/*作為li元素的父容器，指定為flex布局*/width:100%;height:40px;}代碼實(shí)現(xiàn)10.1移動(dòng)端布局10.1.4案例-圖書(shū)活動(dòng)Flex布局CSS部分代碼

例10.2/*設(shè)置導(dǎo)航欄中的li元素*/.navli{

display:flex;/*作為a超鏈接的父容器，指定為flex布局*/flex:1;/*每個(gè)li平均分配ul的空間*/justify-content:center;/*每一個(gè)a，主軸方向居中對(duì)齊*/align-items:center;/*每一個(gè)a，側(cè)軸方向居中對(duì)齊*/}.navlia{color:#666;}/*設(shè)置大廣告部分的圖片*/.ban-lgimg{

width:100%;vertical-align:top;/*取消圖片底部空白間隙*/}/*設(shè)置小廣告部分*/.ban-sm{

display:flex;/*指定為flex布局*/flex-wrap:wrap;/*換行*/}.ban-smli{

flex:50%;/*在同一行內(nèi)，每一個(gè)li分別占父容器的50%空間*/}.ban-smliimg{width:100%;}10.1移動(dòng)端布局10.1.4案例-圖書(shū)活動(dòng)Flex布局代碼實(shí)現(xiàn)在上述CSS代碼中，首先為整個(gè)body規(guī)定最大和最小寬度。然后，將頂部的導(dǎo)航欄指定為Flex布局，使每個(gè)<li>元素平均分配<ul>的空間。再將導(dǎo)航欄中的<li>元素指定為Flex布局，使用justify-content屬性和align-items屬性將<a>元素設(shè)置到<li>元素的中心位置。最后將小廣告部分的<ul>無(wú)序列表指定為Flex布局，并使用flex-wrap屬性進(jìn)行換行，以及使用flex屬性讓一行中的每一個(gè)<li>元素分別占據(jù)父容器的50%空間。本節(jié)小結(jié)本節(jié)內(nèi)容主要講解了視口的相關(guān)內(nèi)容、流式布局的使用、Flex布局中的容器屬性和項(xiàng)目屬性。通過(guò)本節(jié)的學(xué)習(xí)，希望讀者可以了解移動(dòng)端的基本布局方式，掌握移動(dòng)端布局的使用。10.2rem布局rem單位案例—模擬圖書(shū)官網(wǎng)移動(dòng)端首頁(yè)Less媒體查詢10.2

rem布局rem布局的本質(zhì)是等比縮放，一般是基于寬度，能使整個(gè)頁(yè)面等的寬度、高度和字體隨著頁(yè)面的伸縮進(jìn)行改變。rem單位+媒體查詢可實(shí)現(xiàn)rem布局，媒體查詢根據(jù)不同的屏幕大小，設(shè)置不同的html標(biāo)簽的字體大小，rem能將需要改變大小的盒子或字體根據(jù)屏幕大小調(diào)整為相應(yīng)的rem單位，從而在不同的設(shè)備上實(shí)現(xiàn)頁(yè)面大小的動(dòng)態(tài)變化。10.2

rem布局rem(rootem)是一個(gè)相對(duì)單位，類(lèi)似于em。em作為font-size的單位時(shí)，代表其父元素的字體大??；em作為其他屬性單位時(shí)，代表自身字體大小。rem作用于非根元素時(shí)，相對(duì)于根元素（html）字體大??；rem作用于根元素字體大小時(shí)，相對(duì)于其初始字體大小。例如，根元素設(shè)置fontsize=14px，非根元素設(shè)置width:2rem，則非根元素的px像素值為28px。rem優(yōu)點(diǎn)是可以通過(guò)修改根元素（html）里面的文字大小來(lái)修改頁(yè)面里面的元素大小，通過(guò)rem既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。例如，瀏覽器默認(rèn)的html字體大小為16px，即font-size=16px，如果需要設(shè)置元素字體大小為14px，通過(guò)計(jì)算可得14/16=0.875，因此元素只需設(shè)置font-size=0.875rem。10.2.1

rem單位10.2rem布局響應(yīng)式開(kāi)發(fā)是利用CSS中的媒體查詢功能來(lái)實(shí)現(xiàn)的，即@media方式。使用@media查詢，可以針對(duì)不同的媒體類(lèi)型和屏幕尺寸來(lái)定義不同的樣式操作。媒體查詢的語(yǔ)法格式如下所示。10.2.2

媒體查詢概述@media媒體類(lèi)型and|not|only媒體特性{CSScode}10.2rem布局媒體類(lèi)型是將不同的終端設(shè)備劃分成不同的類(lèi)型。and（與）、not（非）和only（只有）為關(guān)鍵字，可將媒體類(lèi)型或多個(gè)媒體特性連接在一起作為媒體查詢的條件。and可將多個(gè)媒體特性連接在一起；not可排除某個(gè)媒體類(lèi)型，可以省略；only可指定某個(gè)特定的媒體類(lèi)型，可以省略。媒體特性是設(shè)備自身具有的特性，如屏幕尺寸等。10.2.2

媒體查詢概述10.2rem布局媒體類(lèi)型的取值說(shuō)明如表所示。10.2.2

媒體查詢概述值說(shuō)明all用于所有設(shè)備print用于打印機(jī)和打印瀏覽screen用于電腦屏幕、平板電腦、智能手機(jī)等speech應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備10.2rem布局媒體特性的取值說(shuō)明如表所示。10.2.2

媒體查詢概述值說(shuō)明max-width定義最大可見(jiàn)區(qū)域?qū)挾萴in-width定義最小可見(jiàn)區(qū)域?qū)挾萴ax-height定義最大可見(jiàn)區(qū)域高度min-height定義最小可見(jiàn)區(qū)域高度orientation定義輸出設(shè)備中的頁(yè)面為portrait豎屏還是landscape橫屏10.2rem布局媒體查詢有2點(diǎn)需要注意的事項(xiàng)，如下所述。10.2.2

媒體查詢注意事項(xiàng)媒體查詢通常是根據(jù)屏幕的尺寸按照從大到小或者從小到大的順序來(lái)編寫(xiě)代碼，建議按照從小到大的順序，這是由于后面的樣式會(huì)覆蓋前面的樣式，當(dāng)屏幕尺寸區(qū)間有重合的地方時(shí)，可以省略重合區(qū)間的代碼。min-width最小值和max-width最大值都是包含等于的，在賦值時(shí)，一定要注意這一點(diǎn)。10.2rem布局在網(wǎng)頁(yè)上，根據(jù)不同的屏幕尺寸將文字設(shè)置為不同的顏色。當(dāng)屏幕尺寸小于600px時(shí)，文字顏色為黑色；當(dāng)屏幕尺寸在600px~800px時(shí)，文字顏色為紅色；當(dāng)屏幕尺寸大于800px時(shí)，文字顏色為綠色。具體代碼如下所示。10.2.2

媒體查詢演示說(shuō)明主體代碼

例10.3<body><p>登鸛雀樓（唐·王之渙）<br>白日依山盡，<br>黃河入海流。<br>欲窮千里目，<br>更上一層樓。<br></p></body>10.2rem布局在網(wǎng)頁(yè)上，根據(jù)不同的屏幕尺寸將文字設(shè)置為不同的顏色。當(dāng)屏幕尺寸小于600px時(shí)，文字顏色為黑色；當(dāng)屏幕尺寸在600px~800px時(shí)，文字顏色為紅色；當(dāng)屏幕尺寸大于800px時(shí)，文字顏色為綠色。具體代碼如下所示。10.2.2

媒體查詢演示說(shuō)明

/*設(shè)置屏幕背景顏色*/body{background-color:#ccc;}/*設(shè)置文字段落*/p{width:100%;/*寬度為屏幕的100%*/text-align:center;/*文字居中顯示*/font-size:25px;}/*屏幕小于600px時(shí)*/

@mediascreenand(max-width:599px){p{color:#000;

CSS代碼

例10.3}}/*屏幕在600px~800px時(shí)*/

@mediascreenand(min-width:600px){p{color:#ee0000;}}/*屏幕大于800px時(shí)*/

@mediascreenand(min-width:801px){p{color:#99CC66;}}10.2rem布局在網(wǎng)頁(yè)上，根據(jù)不同的屏幕尺寸將文字設(shè)置為不同的顏色。當(dāng)屏幕尺寸小于600px時(shí)，文字顏色為黑色；當(dāng)屏幕尺寸在600px~800px時(shí)，文字顏色為紅色；當(dāng)屏幕尺寸大于800px時(shí)，文字顏色為綠色。當(dāng)屏幕尺寸在600px~800px時(shí)，文字顏色變?yōu)榧t色，媒體查詢的運(yùn)行結(jié)果如圖所示。10.2.2

媒體查詢演示說(shuō)明10.2rem布局Less是一種動(dòng)態(tài)樣式語(yǔ)言，屬于CSS預(yù)處理語(yǔ)言的一種。它使用類(lèi)似CSS的語(yǔ)法為CSS的賦予了動(dòng)態(tài)的特性，如變量、繼承、運(yùn)算、函數(shù)等，更方便CSS的編寫(xiě)和維護(hù)實(shí)現(xiàn)CSS模塊化。Less可以在多種語(yǔ)言，環(huán)境中使用，包括瀏覽器端、桌面客戶端、服務(wù)端。通過(guò)CSS預(yù)處理技術(shù)可以很好的提升CSS的編程性，提高CSS代碼的開(kāi)發(fā)效率和可維護(hù)性，目前比較熱門(mén)的相關(guān)技術(shù)有Sass、LessCSS、Stylus、Compass等。10.2.3

Less概述10.2rem布局10.2.3

LessLess安裝1.下載Node.js通過(guò)npm（node的包管理器）在服務(wù)器端安裝Less需要先下載Node.js。Node.js的下載地址為/download/，安裝Node.js的時(shí)候會(huì)自動(dòng)安裝npm。2.安裝lessc模塊打開(kāi)cmd控制臺(tái)，輸入“npminstall-gless”npm命令，安裝less模塊，-g是全局安裝，如果不加會(huì)安裝在當(dāng)前目錄。10.2rem布局10.2.3

LessLess安裝3.在Webstorm中設(shè)置less打開(kāi)Webstorm，找到File->Settings->Tools->FileWatchers，添加一個(gè)less選項(xiàng)，如圖所示。10.2rem布局在Less中，可以將一個(gè)在樣式中多次重復(fù)的出現(xiàn)的值定義為一個(gè)變量，以方便在計(jì)算數(shù)值時(shí)使用，減少代碼的重復(fù)率，容易對(duì)代碼進(jìn)行維護(hù)。Less變量的語(yǔ)法格式如下所示。10.2.3Less語(yǔ)法格式@變量名:值;10.2rem布局Less變量的命名規(guī)范如下所示。10.2.3Less命名規(guī)范使用@為前綴。不能包含特殊字符。不能以數(shù)字開(kāi)頭。區(qū)分大小寫(xiě)。10.2rem布局Less提供了使用嵌套（nesting）代替層疊或與層疊結(jié)合使用的能力。用Less書(shū)寫(xiě)的代碼不僅更加簡(jiǎn)潔，而且模仿了HTML的組織結(jié)構(gòu)。例如，將一段CSS代碼使用Less進(jìn)行書(shū)寫(xiě)。CSS代碼如下所示。10.2.3LessLess嵌套/*CSS代碼*/#header{color:#ccc;}#header.nav{font-size:14px;}10.2rem布局使用Less進(jìn)行書(shū)寫(xiě)，如下所示。10.2.3LessLess嵌套/*Less書(shū)寫(xiě)*/#header{color:#ccc;.nav{font-size:14px;}}值得注意的是，如果CSS代碼中有偽類(lèi)選擇器、偽元素選擇器、交集選擇器等，使用less進(jìn)行書(shū)寫(xiě)時(shí)，需要在內(nèi)層選擇器前面添加“&”符號(hào)。若內(nèi)層選擇器前面沒(méi)有“&”符號(hào)，則會(huì)被解析為父選擇器的后代。10.2rem布局在Less中，算術(shù)運(yùn)算符“+（加）”、“-（減）”、“*（乘）”、“/（除）”可以對(duì)任何數(shù)字、顏色或變量進(jìn)行運(yùn)算。如果可能的話，算術(shù)運(yùn)算符在加、減或比較之前會(huì)進(jìn)行單位換算。計(jì)算的結(jié)果以最左側(cè)操作數(shù)的單位類(lèi)型為準(zhǔn)。如果單位換算無(wú)效或失去意義，則忽略單位。無(wú)效的單位換算，例如，px到cm或rad到%的轉(zhuǎn)換。10.2.3LessLess運(yùn)算10.2rem布局Less運(yùn)算的示例代碼如下所示。10.2.3LessLess運(yùn)算@size:50px;div{width:(@size+10)*2;height:150px;border:@size/10solid#ccc;}值得注意的是，運(yùn)算符的左右兩側(cè)必須使用空格隔開(kāi)。10.2rem布局10.2.4

案例-模擬圖書(shū)官網(wǎng)移動(dòng)端首頁(yè)本實(shí)例是使用rem布局模擬制作一個(gè)圖書(shū)官網(wǎng)移動(dòng)端首頁(yè)的頁(yè)面。在不同的屏幕尺寸下，頁(yè)面能夠等比例進(jìn)行縮放。該頁(yè)面主要由<div>塊元素、<a>超鏈接、<img>圖像標(biāo)簽、<span>行內(nèi)元素和<input>標(biāo)簽構(gòu)成。頁(yè)面結(jié)構(gòu)簡(jiǎn)圖如圖所示。<head><title>模擬圖書(shū)官網(wǎng)移動(dòng)端頁(yè)面</title>

<metaname=viewportcontent="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">

<linktype="text/css"rel="stylesheet"href="rem.css"></head><body><divclass="search">

<ahref="#"class="look"></a><divclass="text">

<formaction=""><inputtype="search"value="開(kāi)學(xué)季"></form></div>

代碼實(shí)現(xiàn)10.2rem布局10.2.4案例-模擬圖書(shū)官網(wǎng)移動(dòng)端首頁(yè)主體代碼

例10.4<ahref="#"class="sweep"></a></div><divclass="banner"><imgsrc="../image/start.jpg"alt=""></div><divclass="nav">

<ahref="#"><imgsrc="../image/nav-1.png"alt=""><span>圖書(shū)</span></a></div><divclass="book"><imgsrc="../image/hui.jpg"alt=""></div></body>10.2rem布局10.2.4案例-模擬圖書(shū)官網(wǎng)移動(dòng)端首頁(yè)代碼實(shí)現(xiàn)在上述主體代碼中，頁(yè)面主要分為4個(gè)模塊。頂部搜索框模塊由3部分組成，即放大鏡、輸入框和掃一掃部分。廣告模塊中嵌入1張圖片。中部導(dǎo)航模塊有10個(gè)<a>超鏈接，每個(gè)<a>超鏈接中有圖片和文字?；顒?dòng)專(zhuān)區(qū)模塊中嵌入1張圖片。/*首先定義初始化html文字大小*/html{

font-size:50px;}/*根據(jù)瀏覽器中一些常見(jiàn)的屏幕尺寸，設(shè)置html的文字大小，其中頁(yè)面劃分的份數(shù)為15*/@mediascreenand(min-width:320px){html{

font-size:21.3px;/*字體大小為頁(yè)面元素值/劃分的份數(shù)（15）*/}}@mediascreenand(min-width:360px){html{

font-size:24px;}}@mediascreenand(min-width:375px){html{

font-size:25px;}}代碼實(shí)現(xiàn)10.2rem布局10.2.4案例-模擬圖書(shū)官網(wǎng)移動(dòng)端首頁(yè)CSS部分代碼

例10.4@mediascreenand(min-width:390px){html{

font-size:26px;}}@mediascreenand(min-width:414px){html{

font-size:27.6px;}}@mediascreenand(min-width:480px){html{

font-size:32px;}}@mediascreenand(min-width:540px){html{

font-size:36px;}}@mediascreenand(min-width:750px){html{

font-size:50px;}}/*設(shè)置整個(gè)body頁(yè)面*/body{

min-width:320px;/*規(guī)定最小和最大寬度*/max-width:750px;

width:15rem;/*設(shè)置寬度的rem值，頁(yè)面元素值/html字體大?。ㄔ擁?yè)面為50px）*/

line-height:1.5;/*1.5倍行高*/margin:0auto;background-color:#f2f2f2;}/*頂部搜索框*/.search{

display:flex;/*指定為flex布局*/

width:15rem;height:1.2rem;background-color:#fafae3;

position:fixed;/*固定定位在頁(yè)面頂部*/top:0;left:50%;/*距離左側(cè)偏移50%*/

transform:translateX(-50%);/*向左位移自身50%寬度*/border-radius:0.6rem;/*添加圓角*/}代碼實(shí)現(xiàn)10.2rem布局10.2.4案例-模擬圖書(shū)官網(wǎng)移動(dòng)端首頁(yè)CSS部分代碼

例10.4/*放大鏡*/.search.look{width:0.64rem;height:0.64rem;margin:0.28rem1rem;background:url("../image/glass.png")no-repeat;/*添加背景圖片*/

background-size:0.64rem0.64rem;/*設(shè)置背景圖片尺寸*/}/*輸入框的父元素*/.search.text{

position:relative;/*添加相對(duì)定位*/

flex:1;/*得到搜索框模塊的所有剩余空間*/height:0.7rem;background-color:#CCCCFF;

margin:0.25remauto;border-radius:0.15rem;overflow:hidden;/*消除添加圓角之后的異常問(wèn)題*/}/*輸入框*/.search.textinput{

position:absolute;/*添加絕對(duì)定位*/top:0;left:0;

width:100%;height:100%;

outline:none;/*取消點(diǎn)擊文本框時(shí)的邊框效果*/

border:0;/*取消邊框*/font-size:0.36rem;}/*掃一掃*/.search.sweep{width:0.64rem;height:0.64rem;margin:0.28rem1rem;background:url("../image/sao.png")no-repeat;background-size:0.64rem0.64rem;}/*廣告模塊*/.banner{width:15rem;height:6rem;}代碼實(shí)現(xiàn)10.2rem布局10.2.4案例-模擬圖書(shū)官網(wǎng)移動(dòng)端首頁(yè)CSS部分代碼

例10.4/*廣告模塊中的圖片*/.bannerimg{width:100%;height:100%;}/*中部導(dǎo)航模塊*/.nav{

width:15rem;}/*導(dǎo)航模塊中的<a>超鏈接*/.nava{

float:left;/*向左浮動(dòng)*/width:3rem;height:2.8rem;text-align:center;text-decoration:none;background-color:#a6e1ec;}/*超鏈接中的圖片*/.navaimg{

display:block;/*轉(zhuǎn)為塊級(jí)元素*/width:1.7rem;height:1.7rem;margin:0.2remauto0;}/*超鏈接中的文字*/.navaspan{display:block;

font-size:0.44rem;color:#333;}/*活動(dòng)專(zhuān)區(qū)模塊*/.book{

width:15rem;height:10rem;}.bookimg{width:100%;height:100%;}10.2rem布局10.2.4案例-模擬圖書(shū)官網(wǎng)移動(dòng)端首頁(yè)代碼實(shí)現(xiàn)在上述CSS代碼中，首先定義初始化html文字大小，再根據(jù)瀏覽器中一些常見(jiàn)的屏幕尺寸，設(shè)置html的文字大小，其中頁(yè)面劃分的份數(shù)為15。接著，為整個(gè)body規(guī)定最大和最小寬度，在Less中為元素計(jì)算rem值。然后通過(guò)rem布局設(shè)置頁(yè)面，使其等比例縮放。在頂部搜索框模塊中，使用固定定位將頂部搜索框固定在頁(yè)面頂部，為放大鏡和掃一掃部分添加背景圖標(biāo)，使用Flex布局設(shè)置輸入框父元素的位置，并通過(guò)定位將輸入框定位到其父元素內(nèi)部。在廣告模塊和活動(dòng)專(zhuān)區(qū)模塊中，通過(guò)rem布局使其內(nèi)部圖片自適應(yīng)大小縮放。在中部導(dǎo)航模塊中，使用float屬性將<a>超鏈接依次排列，并結(jié)合rem布局使其等比例分布。10.2rem布局10.2.4案例-模擬圖書(shū)官網(wǎng)移動(dòng)端首頁(yè)代碼實(shí)現(xiàn)less文件中的部分代碼如圖所示。本節(jié)小結(jié)本節(jié)內(nèi)容主要講解了rem單位和媒體查詢，以及Less的介紹和使用。通過(guò)本節(jié)的學(xué)習(xí)，希望讀者可以了解Less的使用，掌握rem布局在移動(dòng)端的使用，在移動(dòng)端中設(shè)計(jì)適配的布局。10.3rem布局Bootstrap框架案例—響應(yīng)式頁(yè)面設(shè)計(jì)Bootstrap柵格系統(tǒng)10.3

響應(yīng)式開(kāi)發(fā)10.3.1

Bootstrap框架響應(yīng)式開(kāi)發(fā)原理響應(yīng)式開(kāi)發(fā)需要一個(gè)父級(jí)元素作為布局容器，來(lái)配合子級(jí)元素實(shí)現(xiàn)變化效果。響應(yīng)式開(kāi)發(fā)的目的是使用媒體查詢針對(duì)不同設(shè)備進(jìn)行布局以適配不同寬度的設(shè)備，改變布局容器中子元素的排列方式和大小，使一個(gè)網(wǎng)頁(yè)能夠在不同設(shè)備上顯示不同的頁(yè)面布局和樣式變化，優(yōu)化用戶在不同設(shè)備上的使用體驗(yàn)。10.3

響應(yīng)式開(kāi)發(fā)10.3.1

Bootstrap框架響應(yīng)式開(kāi)發(fā)原理響應(yīng)式尺寸的劃分如下所示。在超小屏幕（手機(jī)，小于768px）下，可設(shè)置寬度為100%。在小屏幕（平板，大于等于768px），可設(shè)置寬度為750px。在中等屏幕（桌面顯示器，大于等于992px）下，可設(shè)置寬度為970px。在大屏幕（大桌面顯示器，大于等于1200px）下，可設(shè)置寬度為1170px。10.3

響應(yīng)式開(kāi)發(fā)10.3.1

Bootstrap框架Bootstrap概述Bootstrap是美國(guó)Twitter（推特）公司的設(shè)計(jì)師MarkOtto和JacobThornton合作基于HTML、CSS和JavaScript開(kāi)發(fā)的簡(jiǎn)潔、直觀、強(qiáng)悍的前端開(kāi)發(fā)框架，使得Web開(kāi)發(fā)更加快捷。Bootstrap有一套標(biāo)準(zhǔn)化的html+css編碼規(guī)范，有自己的生態(tài)圈，能夠不斷的更新迭代，并提供了一套簡(jiǎn)潔、直觀強(qiáng)悍的組件，讓開(kāi)發(fā)更簡(jiǎn)單，極大地提高開(kāi)發(fā)的效率。在本書(shū)編著時(shí)，Bootstrap的當(dāng)前版本是v3.4.1。10.3

響應(yīng)式開(kāi)發(fā)10.3.1

Bootstrap框架Bootstrap的使用Bootstrap框架的控制權(quán)在框架本身，具有預(yù)制的樣式庫(kù)、組件和插件，使用者要按照框架的規(guī)范進(jìn)行開(kāi)發(fā)。Bootstrap的使用有以下幾個(gè)步驟。1.下載Bootstrap首先打開(kāi)谷歌瀏覽器，訪問(wèn)Bootstrap的中文網(wǎng)址“/”，下載Bootstrap的最新版本。下載Bootstrap的CSS、JavaScript和字體的預(yù)編譯壓縮版本，不包含文檔和源碼文件。下載成功后，解壓縮ZIP文件，得到Bootstrap的文件和目錄結(jié)構(gòu)。10.3

響應(yīng)式開(kāi)發(fā)10.3.1

Bootstrap框架Bootstrap的使用2.引入bootstrap文件新建一個(gè)bootstrap文件夾，將解壓完成的css、fonts和js文件粘貼復(fù)制到新建的bootstrap文件夾，編寫(xiě)網(wǎng)頁(yè)時(shí)只需引入相應(yīng)的css、js即可使用Bootstrap的樣式。bootstrap文件夾中的目錄結(jié)構(gòu)如圖所示。10.3

響應(yīng)式開(kāi)發(fā)10.3.1

Bootstrap框架Bootstrap的使用3.創(chuàng)建基礎(chǔ)模板Bootstrap的HTML基礎(chǔ)模板如下所示。<!doctypehtml><htmllang="en"><head><metacharset="utf-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Bootstrap</title><!--[ifltIE9]>//解決ie9以下瀏覽器對(duì)html5新增標(biāo)簽的不識(shí)別，并導(dǎo)致CSS不起作用的問(wèn)題

<scriptsrc="/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>//解決ie9以下瀏覽器對(duì)Css3MediaQuery的不識(shí)別

<scriptsrc="/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--></head><body></body></html>10.3

響應(yīng)式開(kāi)發(fā)10.3.1

Bootstrap框架Bootstrap的使用4.引入相關(guān)文件在HTML文件中引入Bootstrap的樣式文件，如下所示。<linkrel="stylesheet"href="bootstrap/css/bootstrap.min.css">上述基本配置的準(zhǔn)備工作做好之后，即可書(shū)寫(xiě)內(nèi)容。10.3

響應(yīng)式開(kāi)發(fā)10.3.1

Bootstrap框架布局容器在使用Bootstrap時(shí)，需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè).container容器。Bootstarp提供了2個(gè)作此用處的容器類(lèi)，即.container類(lèi)和.container-fluid類(lèi)。值得注意的是，由于padding等屬性的原因，這2種容器類(lèi)不能互相嵌套。.container類(lèi)用于固定寬度并支持響應(yīng)式布局的容器。值得注意的是，此處的固定寬度已在類(lèi)里內(nèi)置好，不可以自定義寬度。.container容器類(lèi)如下所示。<divclass="container">...</div>10.3

響應(yīng)式開(kāi)發(fā)10.3.1

Bootstrap框架布局容器.container-fluid類(lèi)用于100%寬度，占據(jù)全部視口（viewport）的容器，適合用于移動(dòng)端開(kāi)發(fā)。.container-fluid容器類(lèi)如下所示。<divclass="container-fluid">...</div>10.3

響應(yīng)式開(kāi)發(fā)10.3.2

Bootstrap柵格系統(tǒng)概述Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。柵格系統(tǒng)包含了易于使用的預(yù)定義類(lèi)，還有強(qiáng)大的mixin用于生成更具語(yǔ)義的布局。柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（column）的組合來(lái)創(chuàng)建頁(yè)面布局，在開(kāi)發(fā)過(guò)程中，可將內(nèi)容直接放入這些創(chuàng)建好的布局中。10.3

響應(yīng)式開(kāi)發(fā)10.3.2

Bootstrap柵格系統(tǒng)概述Bootstrap柵格系統(tǒng)的工作原理如下所示。（1）“行（row）”必須包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。（2）通過(guò)“行（row）”在水平方向創(chuàng)建一組“列（column）”。（3）內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。（4）類(lèi)似“.row”和“.col-xs-4”這種預(yù)定義的類(lèi)，可以用來(lái)快速創(chuàng)建柵格布局。Bootstrap源碼中定義的mixin也可以用來(lái)創(chuàng)建語(yǔ)義化的布局。10.3

響應(yīng)式開(kāi)發(fā)10.3.2

Bootstrap柵格系統(tǒng)概述Bootstrap柵格系統(tǒng)的工作原理如下所示。（5）通過(guò)為“列（column）”設(shè)置padding屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過(guò)為.row元素設(shè)置負(fù)值margin從而抵消掉為.container元素設(shè)置的padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。（6）柵格系統(tǒng)中的列是通過(guò)指定1到12的值來(lái)表示其跨越的范圍。例如，3個(gè)等寬的列可以使用3個(gè)“.col-xs-4”來(lái)創(chuàng)建。（7）如果一“行（row）”中包含的“列（column）”大于12，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列。（8）Bootstrap柵格系統(tǒng)為不同屏幕寬度定義了不同的類(lèi)。10.3

響應(yīng)式開(kāi)發(fā)10.3.2

Bootstrap柵格系統(tǒng)柵格參數(shù)Bootstrap柵格系統(tǒng)在多種屏幕設(shè)備上的工作參數(shù)如圖所示。為了適應(yīng)在不同屏幕寬度下，對(duì)列進(jìn)行不同份數(shù)的劃分，可以同時(shí)為同一列指定多個(gè)設(shè)備的類(lèi)名，類(lèi)名之間以空格隔開(kāi)，例如class="col-md-4col-sm-6"。10.3

響應(yīng)式開(kāi)發(fā)10.3.2

Bootstrap柵格系統(tǒng)列偏移使用“.col-md-offset-*”類(lèi)可以將列向右側(cè)偏移。這些類(lèi)實(shí)際是通過(guò)使用“*”選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）。例如，“.col-md-offset-4”類(lèi)將“.col-md-4”元素向右側(cè)偏移了4個(gè)列（column）的寬度。10.3

響應(yīng)式開(kāi)發(fā)10.3.2

Bootstrap柵格系統(tǒng)嵌套列為了使用內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套，可以通過(guò)添加一個(gè)新的.row元素和一系列.col-sm-*元素到已經(jīng)存在的.col-sm-*元素內(nèi)。被嵌套的行（row）所包含的列（column）的個(gè)數(shù)不能超過(guò)12。10.3

響應(yīng)式開(kāi)發(fā)10.3.2

Bootstrap柵格系統(tǒng)嵌套列演示說(shuō)明。在Bootstrap柵格系統(tǒng)中制作嵌套列，在大屏幕（1200px）的寬度下，一行中展示4列，每1列的份數(shù)分別為3、4、2和3，其中，在第2列中再嵌套2列，每1列的份數(shù)分別為6；在小屏幕（768px）的寬度下，一行中展示2列，第1列的份數(shù)分別為4和8，第2列的份數(shù)分別為6和6，其中，在第1行的第2列中再嵌套2列，每1列的份數(shù)分別為6和6。具體代碼如下所示。<head>

<metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>柵格系統(tǒng)</title><!--[ifltIE9]>

<scriptsrc="/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><scriptsrc="/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]-->

主體代碼

例10.510.3

響應(yīng)式開(kāi)發(fā)10.3.2

Bootstrap柵格系統(tǒng)嵌套列演示說(shuō)明。具體代碼如下所示。

<linkrel="stylesheet"href="bootstrap/css/bootstrap.min.css"><style>[class^="col"]{background-color:#a6d2ff;}</style></head><body><divclass="container">

<divclass="row">主體代碼

例10.5

<divclass="col-lg-3col-sm-4">1</div><divclass="col-lg-4col-sm-8"><divclass="row">

<divclass="col-lg-6col-sm-6">2.1</div><divclass="col-lg-6col-sm-6">2.2</div></div></div>

<divclass="col-lg-2col-sm-6">3</div><divclass="col-lg-3col-sm-6">4</div></div></div></body>10.3

響應(yīng)式開(kāi)發(fā)10.3.2

Bootstrap柵格系統(tǒng)嵌套列演示說(shuō)明。在Bootstrap柵格系統(tǒng)中制作嵌套列，在大屏幕（1200px）的寬度下，一行中展示4列，每1列的份數(shù)分別為3、4、2和3，其中，在第2列中再嵌套2列，每1列的份數(shù)分別為6；在小屏幕（768px）的寬度下，一行中展示2列，第1列的份數(shù)分別為4和8，第2列的份數(shù)分別為6和6，其中，在第1行的第2列中再嵌套2列，每1列的份數(shù)分別為6和6。在大屏幕下，Bootstrap柵格系統(tǒng)中嵌套列的運(yùn)行效果如圖所示。10.3

響應(yīng)式開(kāi)發(fā)10.3.2

Bootstrap柵格系統(tǒng)嵌套列演示說(shuō)明。在小屏幕下，Bootstrap柵格系統(tǒng)中嵌套列的運(yùn)行效果如圖所示。10.3

響應(yīng)式開(kāi)發(fā)10.3.2

Bootstrap柵格系統(tǒng)列排序通過(guò)使用“.col-md-push-*”和“.col-md-pull-*”類(lèi)可以很容易的改變列（column）的順序。例如，將2個(gè)分別占5列和7列份數(shù)的塊元素改變順序。示例代碼如下所示。<divclass="row"><divclass="col-md-5col-md-push-7">1.占5列</div><divclass="col-md-7col-md-pull-5">2.占7列</div></div>10.3

響應(yīng)式開(kāi)發(fā)10.3.2

Bootstrap柵格系統(tǒng)列排序通過(guò)使用“.col-md-push-*”和“.col-md-pull-*”類(lèi)可以很容易的改變列（column）的順序。例如，將2個(gè)分別占5列和7列份數(shù)的塊元素改變順序。列排序的效果如圖所示。10.3

響應(yīng)式開(kāi)發(fā)10.3.2

Bootstrap柵格系統(tǒng)響應(yīng)式工具利用媒體查詢功能，并使用一些工具類(lèi)針對(duì)不同設(shè)備展示或隱藏頁(yè)面內(nèi)容，可使移動(dòng)端頁(yè)面的開(kāi)發(fā)工作變得更便捷。顯示或隱藏頁(yè)面內(nèi)容的工具類(lèi)如下所示。（1）在超小屏幕下顯示或隱藏頁(yè)面內(nèi)容的工具類(lèi)為“.visible-xs（超小屏幕下顯示）”和“.hidden-xs（超小屏幕下隱藏）”。（2）在小屏幕下顯示或隱藏頁(yè)面內(nèi)容的工具類(lèi)為“.visible-sm（小屏幕下顯示

人人文庫(kù)> 全部分類(lèi)> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)課件

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)課件

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔