• <ol id="uopva"></ol>
  • <legend id="uopva"></legend>

    <acronym id="uopva"></acronym>
    <acronym id="uopva"></acronym>
  • 赤峰 鼎好職業技術學校--專注計算機教育27年官方網站!

    赤峰鼎好職業技術學校

    赤峰鼎好職業技術學校


    CHIFENG DINGHAO ZHIYE JISHU XUEXIAO

    全國咨詢熱線
    0476-2892015
    赤峰鼎好職業技術學校,赤峰計算機學校!
    當前位置:首頁 > 教育教學> 實戰課

    三步完成自適應網頁設計

    人氣:   發表時間:2017-04-12 09:57:24   【

    自適應網頁設計近來很流行,如果你接觸比較少請參見 responsive sites。當然,對一個新手來說可能聽起來有點復雜,其實它比你想象的簡單多了。這里是一個快速教程,通過學習你會自適應網頁和media queries的基本原理(前提你有css基礎)。

    查看演示 Demo

    Step 1:Meta 標簽

    為了適應屏幕,不少移動瀏覽器都會把HTML頁面置于較大視口寬度(一般會大于屏幕寬度),你可以使用viewport meta標簽來設定。以下viewport meta標簽告訴瀏覽器視口寬度等于設備屏幕寬度,且不進行初始縮放:


    IE8及其更低版本不支持media query,可以使用media-queries.js或respond.js腳本實現支持。

     

    Step 2. HTML結構

    在這個例子中,頁面布局包括 header,content,sidebar
    footer。header固定高度為180px,content600px,sidebar300px。



    Step 3. Media Queries

    CSS3 media query是自適應網頁設計的關鍵,他就像高級語言里的if條件語句,告訴瀏覽器根據不同的視口寬度(這里等于瀏覽器寬度)來渲染網頁。

    如果視口寬度小于等于980px,下面規則生效。

    這里將容器絕對寬度改用百分比顯示,讓頁面排版更加靈活。

    /* for 980px or less */
    @media screen and (max-width: 980px) {
    
    	#pagewrap{
    		width: 94%;
    	}
    	#content{
    		width: 65%;
    	}
    	#sidebar{
    		width: 30%;
    	}
    
    }

    如果視口寬度小于等于700px, 將#content#sidebar寬度設為自動(auto),并移除它的浮動屬性(float),這樣它會變成滿版顯示。

    /* for 700px or less */
    @media screen and (max-width:700px) {
    
    	#content {
    		width: auto;
    		float: none;
    	}
    	#sidebar {
    		width: auto;
    		float: none;
    	}
    
    }

    當視口寬度小于等于480px時(如手機屏幕),將#header高度設為自動,h1的字體大小設定為24px,并隱藏#sidebar。

    /* for 480px or less */
    @media screen and (max-width:480px) {
    
    	#header {
    		height: auto;
    	}
    	h1 {
    		font-size: 24px;
    	}
    	#sidebar {
    		display: none;
    	}
    
    }


    赤峰鼎好計算機學校版權聲明書:
    本網站的所有內容版權歸赤峰鼎好計算機學校所有,不允許復制及其他任何形式使用。
    對未經許可擅自使用者,本校保留追究其法律責任的權利。

    在線客服

    招生咨詢
    點擊這里給我發消息
    其他咨詢
    點擊這里給我發消息
    亚洲中文字幕另类人成在线,日韩欧美精品视频,国产麻豆91在线,国产香蕉97碰碰久久人人蜜桃,亚洲AⅤ日韩AV电影在线观看