項目9響應式網(wǎng)頁網(wǎng)站建設(shè)與管理項目概述ontents目錄學習目標核心知識任務實施進階提高CPART1項目概述使用@media媒體類型、添加斷點、移動端優(yōu)先和屏幕方向設(shè)置等相關(guān)知識點，完成響應式頁面“名勝古跡頁”和“招生就業(yè)”網(wǎng)頁，自動適應手機、PAD、電腦等不同終端。9.1項目概述PART2學習目標知識目標技能目標9.2成果目標掌握@media查詢標簽，設(shè)置斷點、優(yōu)先移動端顯示、屏幕方向了解bootstrap框架完成響應式頁面“名勝古跡頁”和“招生就業(yè)”網(wǎng)頁技能目標知識目標PART3核心知識9.3.1媒體@media規(guī)則9.3核心知識

使用@media媒體類型規(guī)則，可以為不同媒體設(shè)置不同的樣式，表示指定文件將在哪種媒體上呈現(xiàn)。常見的媒體類型有screen顯示器屏幕、print打印機印刷媒體、aural語音和音頻合成器和braille盲人用點字法觸覺回饋設(shè)備等。將文件以不同的方式顯示在屏幕上，在紙張上，或聽覺瀏覽器上。@mediascreen{p{font-size:16px;}}@mediaprint{p{font-size:12px;}}標簽解釋說明：如果在瀏覽器屏幕上顯示，則頁面段落文字為16像素，如果在打印機中打印頁面，則打印顯示為12像素的段落文字。9.3.2添加斷點9.3核心知識

通過使用@media，讓瀏覽器在不同寬度查看同一網(wǎng)頁時，顯示出不同的變化。針對不同的媒體類型設(shè)置不同的樣式，中間添加斷點，不同的屏幕尺寸設(shè)置不同的樣式(col-和col-m-)，顯示不同的效果，以適應不同的設(shè)備。添加斷點如：@mediaonlyscreenand(max-width:768px){ [class*="col-"]{width:100%;}}//設(shè)置最大屏幕@mediaonlyscreenand(min-width:768px){ [class*="col-"]{width:100%;}}//設(shè)置最小屏幕@mediascreenand(min-width:768px)and(max-width:1023px){ [class*="col-"]{width:100%;}}//設(shè)置屏幕區(qū)間9.3.3橫屏和豎屏方向9.3核心知識

考慮到移動終端設(shè)備在使用時有橫屏和豎屏，不同的兩種狀態(tài)，為適應設(shè)備的不同方向的特點，可用屬性orientation：landscape|portrait可以分別設(shè)置設(shè)備顯示時為橫屏landscape或者豎屏portrait，默認狀態(tài)是豎屏。當屏幕為橫屏時，網(wǎng)頁背景顏色是淡綠色，字體為40號，對應的CSS標簽如下：body{background-color:yellow;}@mediaonlyscreenand(orientation:landscape){body{background-color:lightblue;}}Bootstrap是基于HTML、CSS、JAVASCRIPT的受歡迎的前端框架，它簡潔靈活，使得Web開發(fā)更加快捷。Bootstrap框架包括Bootstrap基本結(jié)構(gòu)、BootstrapCSS、Bootstrap布局組件和Bootstrap插件幾個部分。只有先在網(wǎng)頁頭部引入Bootstrap文件后，才可以后面使用bootstrap框架。下面分別介紹在線直接引入方式和下載插件后直接在頭部引入兩種方式。(1)國內(nèi)推薦使用StaticfileCDN上的庫，分別包括

新Bootstrap核心CSS文件<linkhref="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"> jQuery文件。務必在bootstrap.min.js之前引入<scriptsrc="/jquery/2.1.1/jquery.min.js"></script>

最新的Bootstrap核心JavaScript文件<scriptsrc="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>9.3核心知識Bootstrap介紹PART4項目實施9.4項目實施9.4項目實施PART5進階提高9.5進階提高在微信的通信錄中直接進入企業(yè)號。也可以通過下載微信企業(yè)APP加入，一起體驗課后延伸學習的過程進入“微加云學院”，選擇課件內(nèi)容再次學習、在線做練習題、考試。進入“企微云任務”，查看并完成本章學習任務，查看任務，領(lǐng)取任務，登記任務進展情況，方便教師隨時查看學生任務的完成進度。進入“投票調(diào)研”“問卷星”，參與調(diào)查問卷互動，反饋教學效果。進入“教學論壇”，下