<pre id="yvc9s"><tt id="yvc9s"><noscript id="yvc9s"></noscript></tt></pre>
    1. <label id="yvc9s"><button id="yvc9s"></button></label>

      <address id="yvc9s"><var id="yvc9s"><ruby id="yvc9s"></ruby></var></address>

        <label id="yvc9s"><button id="yvc9s"></button></label>

        <dfn id="yvc9s"></dfn>

        <address id="yvc9s"><ul id="yvc9s"><source id="yvc9s"></source></ul></address>
      • 赤峰 鼎好職業(yè)技術(shù)學校--專注計算機教育27年官方網(wǎng)站!

        赤峰鼎好職業(yè)技術(shù)學校

        赤峰鼎好職業(yè)技術(shù)學校


        CHIFENG DINGHAO ZHIYE JISHU XUEXIAO

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

        三步完成自適應(yīng)網(wǎng)頁設(shè)計

        人氣:   發(fā)表時間:2017-04-12 09:57:24   【

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

        查看演示 Demo

        Step 1:Meta 標簽

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


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

         

        Step 2. HTML結(jié)構(gòu)

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



        Step 3. Media Queries

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

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

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

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

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

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

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

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


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

        在線客服

        招生咨詢
        點擊這里給我發(fā)消息
        其他咨詢
        點擊這里給我發(fā)消息
        亚洲成人在线中文字幕AV_欧美一级 片内射欧美A999_韩国A级一片永久免费_香蕉久久夜色精品
        <pre id="yvc9s"><tt id="yvc9s"><noscript id="yvc9s"></noscript></tt></pre>
        1. <label id="yvc9s"><button id="yvc9s"></button></label>

          <address id="yvc9s"><var id="yvc9s"><ruby id="yvc9s"></ruby></var></address>

            <label id="yvc9s"><button id="yvc9s"></button></label>

              <dfn id="yvc9s"></dfn>

              <address id="yvc9s"><ul id="yvc9s"><source id="yvc9s"></source></ul></address>