• 
    

    
    

      99热精品在线国产_美女午夜性视频免费_国产精品国产高清国产av_av欧美777_自拍偷自拍亚洲精品老妇_亚洲熟女精品中文字幕_www日本黄色视频网_国产精品野战在线观看

      ?

      基于HTML5和CSS3的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)

      2020-07-13 06:34:08李念武漢東湖學(xué)院計(jì)算機(jī)科學(xué)學(xué)院
      消費(fèi)導(dǎo)刊 2020年29期
      關(guān)鍵詞:終端設(shè)備網(wǎng)頁(yè)頁(yè)面

      李念 武漢東湖學(xué)院計(jì)算機(jī)科學(xué)學(xué)院

      一、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)理念

      隨著智能手機(jī)和各種便攜式電子產(chǎn)品的出現(xiàn),傳統(tǒng)針對(duì)電腦端的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)無(wú)法保證網(wǎng)頁(yè)在這些移動(dòng)設(shè)備上有很好的顯示效果和用戶體驗(yàn),但是如果針對(duì)每一款設(shè)備單獨(dú)開(kāi)發(fā)一個(gè)網(wǎng)站這樣不僅增加了開(kāi)發(fā)的成本,也給網(wǎng)頁(yè)設(shè)計(jì)師們帶來(lái)了許多重復(fù)性的工作。而響應(yīng)式Web 開(kāi)發(fā)技術(shù)的出現(xiàn)正好緩解了這一尷尬現(xiàn)狀。

      響應(yīng)式Web設(shè)計(jì)開(kāi)發(fā)思想,最早在2010年5月由國(guó)外著名網(wǎng)頁(yè)設(shè)計(jì)師提出。核心思想是頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及所使用設(shè)備的軟硬件環(huán)境進(jìn)行自動(dòng)調(diào)整,這些軟硬件環(huán)境包括:平臺(tái)的系統(tǒng),瀏覽器窗口,屏幕大小,屏幕定向等。

      響應(yīng)式網(wǎng)頁(yè)開(kāi)發(fā)的核心是指在對(duì)頁(yè)面進(jìn)行設(shè)計(jì)時(shí),充分考慮移動(dòng)設(shè)備的屏幕大小、分辨率的特性等。應(yīng)優(yōu)先考慮移動(dòng)設(shè)備的這些特性,然后在設(shè)計(jì)頁(yè)面時(shí)從最小尺寸的展示效果入手進(jìn)行版面設(shè)計(jì)與布局,在布局滿足了最小尺寸的屏幕顯示以后再逐漸加大顯示尺寸,調(diào)整布局內(nèi)的各個(gè)模塊的排列方式,使每個(gè)元素的顯示效果,長(zhǎng)寬高等參數(shù)能自動(dòng)適應(yīng)瀏覽器窗口及終端設(shè)備的屏幕分辨率。在小尺寸顯示時(shí),可以適當(dāng)降低圖片素材的分辨率,文字內(nèi)容部分可以盡量以標(biāo)題的形式少量出現(xiàn),具體內(nèi)容可以放在子頁(yè)面中展示。然后當(dāng)窗口或設(shè)備的顯示尺寸變大時(shí),內(nèi)容慢慢豐富,圖片逐漸清晰。

      二、核心技術(shù)

      (一)HTML5

      HTML5是一種具有跨平臺(tái)特點(diǎn)的網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言,其語(yǔ)法結(jié)構(gòu)不受任何平臺(tái)和系統(tǒng)的限制,編寫(xiě)靈活簡(jiǎn)單,且適用于現(xiàn)有的主流操作系統(tǒng)、主流的終端設(shè)備。這一特點(diǎn)正好與“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”中的跨平臺(tái)不謀而合,HTML5語(yǔ)言跨平臺(tái)的兼容性使得它在響應(yīng)式開(kāi)發(fā)中有著得天獨(dú)厚的優(yōu)勢(shì)。

      (二)CSS3

      CSS3 中新增的媒體查詢 (Media Queries) 模塊提供了向終端設(shè)備或顯示平臺(tái)查詢媒體類型的功能,通過(guò)添加規(guī)范的查詢表達(dá)式來(lái)實(shí)現(xiàn)對(duì)當(dāng)前媒體顯示效果的自動(dòng)匹配。

      (三)流動(dòng)網(wǎng)格

      流動(dòng)網(wǎng)格布局使得各層塊的位置具有浮動(dòng)特性,圖片、文字等網(wǎng)頁(yè)元素的屬性單位會(huì)由以前的像素為轉(zhuǎn)變成以百分比或者是字體比例的形式。如:某DIV塊的寬由100px變成20%等。這樣一來(lái)網(wǎng)頁(yè)元素的尺寸就能靈活地根據(jù)媒體查詢的結(jié)果來(lái)自動(dòng)調(diào)整顯示值。

      (四)彈性圖片

      彈性圖片是指圖片的大小具有彈性?;蛞环鶊D片在800像素以上寬度的設(shè)備上顯示為 480px*480px,那么用彈性圖片的設(shè)計(jì)原則,其寬和高則可以同時(shí)設(shè)置為60%。這樣一來(lái)當(dāng)頁(yè)面在320像素寬的設(shè)備上顯示時(shí),圖片的大小則會(huì)自動(dòng)調(diào)整為192px*192px。

      三、網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)

      (一)布局設(shè)計(jì)

      本文以企業(yè)網(wǎng)站面面為便來(lái)完成響應(yīng)式網(wǎng)頁(yè)的設(shè)計(jì)與實(shí)現(xiàn)。網(wǎng)頁(yè)的布局應(yīng)達(dá)到自動(dòng)適應(yīng)PC機(jī)、平板電腦、手機(jī)等終端設(shè)備的顯示效果。整個(gè)頁(yè)面分為七大模塊:#header-wrap(logo)、#main navigation、#layerslider、#home-intro、#feature-block、#intro-features、#copyrights。七大模塊在頁(yè)面中分布于七行,占滿瀏覽器整個(gè)窗口寬度。其中#feature-block模塊被分成三列,#intro-features模塊包含四列。這兩上模塊將會(huì)通過(guò)媒體查詢來(lái)改變其列寬,以實(shí)現(xiàn)響應(yīng)式布局的效果。

      (二)viewport設(shè)計(jì)

      自動(dòng)適應(yīng)終端設(shè)備的顯示效果,首先必須要通過(guò)視口viewport來(lái)獲取到顯示設(shè)備或窗口的當(dāng)前寬度值,同時(shí)還可以調(diào)整顯示窗口的大小以適應(yīng)設(shè)備,然后設(shè)置窗口大小固定,禁止用戶對(duì)顯示窗口進(jìn)行放大縮小操作。

      (三)媒體查詢?cè)O(shè)計(jì)

      本網(wǎng)站設(shè)置了三種不同的媒體查詢功能,分別適用于窗口寬度介于768px-959px的PC端、480px-767px、320px-479px的移動(dòng)終端。在移動(dòng)終端設(shè)備上原有的導(dǎo)航欄將被設(shè)置為不可見(jiàn),將菜單放置于一個(gè)“

          石楼县| 宜兰市| 东阿县| 延寿县| 昆山市| 富顺县| 怀来县| 浏阳市| 荥阳市| 大田县| 房山区| 黄骅市| 长子县| 北宁市| 布拖县| 望江县| 靖州| 临洮县| 常德市| 将乐县| 四川省| 海原县| 凉城县| 云安县| 江华| 嵊泗县| 卓资县| 应城市| 龙胜| 龙山县| 满洲里市| 永福县| 嘉义市| 广州市| 筠连县| 唐海县| 镇平县| 常宁市| 九江市| 临洮县| 长汀县|