<form id="nbd9d"><nobr id="nbd9d"><th id="nbd9d"></th></nobr></form><noframes id="nbd9d">

    <address id="nbd9d"></address>
      <address id="nbd9d"></address>
      <address id="nbd9d"><address id="nbd9d"></address></address>

        <address id="nbd9d"></address>
        <form id="nbd9d"></form>

            <listing id="nbd9d"><listing id="nbd9d"></listing></listing>
            ?

            網站設計響應式HTML5布局和自適應的代碼
             瀏覽:112

            網站響應式HTML5布局設計和自適應代碼經常遇到要用到的問題,今天張楷總結一下網站設計響應式或者自適應的方法及代碼。

            1、首先在網頁代碼的頭部,加入一行viewport標簽
             
            在網頁的頭部中增加以下這句話,可以讓網頁的寬度自動適應手機屏幕的寬度
             
            width=device-width    width為設置layout viewport 的寬度,為一個正整數,device-width表示寬度是設備屏幕的寬度
            initial-scale=1.0    initial-scale為設置頁面的初始縮放值,可以是一個帶小數的數字,1.0就是占網頁的100%
             
            minimum-scale=1.0 表示最小的縮放比例
             
            maximum-scale=1.0 表示最大的縮放比例
             
            user-scalable=no 表示用戶是否可以調整縮放比例,值為”no”或”yes”
             
            2、寬度不要用絕對的
             
            width:auto; / width:XX%;(父元素一定要有寬度)
             
            3、字體大小是頁面默認大小的100%,即16像素,不要使用絕對大小"px",要使用相對大小“rem”
            html{font-size:62.5%;}
            body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }
            html的字體大小設置為font-size:62.5%原因:瀏覽器默認字體大小是16px,rem與px關系為:1rem = 10px,10/16=0.625=62.5%,為了子元素相關尺寸計算方便,這樣寫最合適不過了。
             
            4、流動布局,"流動布局"的含義是,各個區塊的位置都是浮動的,不是固定不變的
            .left{ width:30%; float:left}
            .right{ width:70%; float:right;}
             
            像這樣,用左浮動和右浮動,好處是,如果寬度太小,放不下兩個元素,后面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現
             
             
            5、選擇加載CSS
             
            "自適應網頁設計"的核心,就是CSS3引入的Media Query模塊。自動探測屏幕寬度,然后加載相應的CSS文件
             
            這段代碼的意思是:如果屏幕寬度小于600像素(max-device-width: 600px),就加載css600.css文件。
            如果屏幕寬度在600像素到980像素之間,則加載css600-980.css文件
             
            還有(不建議使用):除了用html標簽加載CSS文件,還可以在現有CSS文件中加載
            @import url("css600.css") screen and (max-device-width: 600px);
             
            6、CSS的@media與@media screen,媒體查詢/匹配
             
            媒體查詢也是css3的方法,我們要解決的問題是適應手機屏幕
            媒體查詢的功能就是為不同的媒體設置不同的css樣式,這里的“媒體”包括頁面尺寸,設備屏幕尺寸等。
            首先先講一下@media與@media screen區別
            @media與@media screen兩者在手機設備上沒有區別,但@media screen的css在打印設備里是無效的,而@media在打印設備里是有效的,如果css需要用在打印設備里,那么就用@media 。
            以@media或@media screen and開頭來表示這是一條媒體查詢語句。@media后面的是一個或者多個表達式,如果表達式為真,則應用樣式。
            @media
            @media (max-width: 600px) {
            .mainner {
            display: none;
            }
            }
             
            上面的代碼在屏幕寬度小于 600px 的時候,會作用大括號里的內容。
             
            注:max-width是目標顯示區域的寬度,例如,瀏覽器寬度。
            媒體查詢可以在 link標簽上加media屬性或css文件中使用。具體例子就不舉了。
            @media screen
            以下例子為當屏幕寬度小于400px的時候,就取消浮動
            @media screen and (max-device-width: 400px)
            { .left {
            float:none;
            }
            }
             
            注:max-device-width是設備整個顯示區域的寬度,例如,真實的設備屏幕寬度。
             
            知識擴展
            @media only screen and
            only(限定某種設備)
            screen 是媒體類型里的一種
            and 被稱為關鍵字,其他關鍵字還包括 not
            not 指定某種特定的媒體類型,可以用來排除不支持媒體查詢的瀏覽器:
            例如:如果瀏覽器窗口小于 500px, 背景將變為淺藍色:
            @media only screen and (max-width: 500px) {
            body {
            background-color: lightblue;
            }
            }
             
            7、圖片自適應,"自適應網頁設計"還必須實現圖片的自動縮放。
             
            img {width: 100%;}
            windows平臺縮放圖片時,可能出現圖像失真現象。這時,可以嘗試使用IE的專有命令
            img { width:100%; -ms-interpolation-mode: bicubic;}
            或使用js–imgSizer.js
            addLoadEvent(function() {
            var imgs = document.getElementById("content").getElementsByTagName("img");
            imgSizer.collate(imgs);
            });


            網站做響應式設計用HTML5,重點是用CSS的樣式細節。響應式會較順暢,自適應代碼重點判斷切換PC手機端。


            以上就是關于【網站設計響應式HTML5布局和自適應的代碼】的文章內容,如果您還想了解更多關于網站建設與營銷推廣的相關文章,請繼續查看【網站建設】欄目的其它文章

            來源http://www.abcboatlifts.comhttp://www.abcboatlifts.com/wangzhanjianshe/36.html明行威網絡技術,專注網站建設開發、微信小程序制作、網站代運營(SEM、SEO等)、企業SEO內訓等

            歡迎交流 添加企業微信:478887042 
            掃碼關注

            【相關推薦】
            【網站案例】
            網絡推廣
            在線咨詢
            廣州
            020-28174113
            15017594623
            惠州辦事處
            13725092347
            肇慶辦事處
            15813353380
            東莞辦事處
            15913714680

            保存二維碼用微信掃一掃

            確定
            A级毛片免费观看在线播放
            <form id="nbd9d"><nobr id="nbd9d"><th id="nbd9d"></th></nobr></form><noframes id="nbd9d">

              <address id="nbd9d"></address>
                <address id="nbd9d"></address>
                <address id="nbd9d"><address id="nbd9d"></address></address>

                  <address id="nbd9d"></address>
                  <form id="nbd9d"></form>

                      <listing id="nbd9d"><listing id="nbd9d"></listing></listing>