<output id="2ujjw"></output>

<code id="2ujjw"></code>

      1. <code id="2ujjw"></code>

      2. <tr id="2ujjw"></tr>
        1. <th id="2ujjw"><option id="2ujjw"></option></th>

            <th id="2ujjw"><video id="2ujjw"><acronym id="2ujjw"></acronym></video></th>
            高端網站建設與整合營銷策劃服務品牌專家!
            咨詢郵箱?咨詢郵箱:40650487@qq.com 咨詢熱線?咨詢熱線:13510628004 微信
            您的位置: > 新聞動態 > 手機網站 > >
            分享到:
            如何根據手機屏幕尺寸做不同的網頁-- 分享手機網站建設小知識
            發表日期:2019-10-21 ?? 文章編輯:豫鷹網絡? 瀏覽次數:
            內容提要:隨著3G的普及,越來越多的人使用手機上網。同樣的內容,要在大小迥異的屏幕上,都呈現出滿意的效果,并不是一件容易的事。 
            于是,網頁設計師不得不面對一個難題:如何才能在不同大小的設備上呈現同樣的網頁? 

            隨著3G的普及,越來越多的人使用手機上網。 
            手機的屏幕比較小,寬度通常在600像素以下;PC的屏幕寬度,一般都在1000像素以上(目前主流寬度是1366×768),有的還達到了2000像素。同樣的內容,要在大小迥異的屏幕上,都呈現出滿意的效果,并不是一件容易的事。 
            于是,網頁設計師不得不面對一個難題:如何才能在不同大小的設備上呈現同樣的網頁? 

            很多網站的解決方法,是為不同的設備提供不同的網頁,比如專門提供一個mobile版本,或者iPhone / iPad版本。這樣做固然保證了效果,但是比較麻煩,同時要維護好幾個版本,而且如果一個網站有多個portal(入口),會大大增加架構設計的復雜度。 
            于是,很早就有人設想,能不能"一次設計,普遍適用",讓同一張網頁自動適應不同大小的屏幕,根據屏幕寬度,自動調整布局(layout)?

            一、允許網頁寬度自動調整 
            "自適應網頁設計"到底是怎么做到的?其實并不難。 
            先,在網頁代碼的頭部,加入一行viewport元標簽。 
              <meta name="viewport" content="width=device-width, initial-scale=1" /> 
            viewport是網頁默認的寬度和高度,上面這行代碼的意思是,網頁寬度默認等于屏幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小占屏幕面積的100%。 
            所有主流瀏覽器都支持這個設置,包括IE9。對于那些老式瀏覽器(主要是IE6、7、8),需要使用css3-mediaqueries.js。 
              <!--[if lt IE 9]> 
                <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
              <![endif]--> 
            三、不使用絕對寬度 
            由于網頁會根據屏幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要。 
            具體說,CSS代碼不能指定像素寬度: 
              width:xxx px; 
            只能指定百分比寬度: 
              width: xx%; 
            或者 
              width:auto; 
            四、相對大小的字體 
            字體也不能使用絕對大?。╬x),而只能使用相對大?。╡m)。 
              body { 
                font: normal 100% Helvetica, Arial, sans-serif; 
              } 
            上面的代碼指定,字體大小是頁面默認大小的100%,即16像素。 
              h1 { 
                font-size: 1.5em; 
              } 
            然后,h1的大小是默認大小的1.5倍,即24像素(24/16=1.5)。 
              small { 
                font-size: 0.875em; 
              } 
            small元素的大小是默認大小的0.875倍,即14像素(14/16=0.875)。 
            五、流動布局(fluid grid) 
            "流動布局"的含義是,各個區塊的位置都是浮動的,不是固定不變的。 
              .main { 
                float: right; 
                width: 70%; 
              } 
              .leftBar { 
                float: left; 
                width: 25%; 
              } 
            float的好處是,如果寬度太小,放不下兩個元素,后面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現。 
            另外,絕對定位(position: absolute)的使用,也要非常小心。 
            六、選擇加載CSS 
            "自適應網頁設計"的核心,就是CSS3引入的Media Query模塊。 
            它的意思就是,自動探測屏幕寬度,然后加載相應的CSS文件。 
              <link rel="stylesheet" type="text/css" 
                media="screen and (max-device-width: 400px)" 
                href="tinyScreen.css" /> 
            上面的代碼意思是,如果屏幕寬度小于400像素(max-device-width: 400px),就加載tinyScreen.css文件。
              <link rel="stylesheet" type="text/css" 
                media="screen and (min-width: 400px) and (max-device-width: 600px)" 
                href="smallScreen.css" /> 
            如果屏幕寬度在400像素到600像素之間,則加載smallScreen.css文件。 
            除了用html標簽加載CSS文件,還可以在現有CSS文件中加載。 
              @import url("tinyScreen.css") screen and (max-device-width: 400px); 
            七、CSS的@media規則 
            同一個CSS文件中,也可以根據不同的屏幕分辨率,選擇應用不同的CSS規則。 
              @media screen and (max-device-width: 400px) { 
                .column { 
                  float: none; 
                  width:auto; 
                } 
                #sidebar { 
                  display:none; 
                } 
              } 
            上面的代碼意思是,如果屏幕寬度小于400像素,則column塊取消浮動(float:none)、寬度自動調節(width:auto),sidebar塊不顯示(display:none)。 
            八、圖片的自適應(fluid image) 
            除了布局和文本,"自適應網頁設計"還必須實現圖片的自動縮放。 
            這只要一行CSS代碼: 
              img { max-width: 100%;} 
            這行代碼對于大多數嵌入網頁的視頻也有效,所以可以寫成: 
              img, object { max-width: 100%;} 
            老版本的IE不支持max-width,所以只好寫成: 
              img { width: 100%; } 
            此外,windows平臺縮放圖片時,可能出現圖像失真現象。這時,可以嘗試使用IE的專有命令: 
              img { -ms-interpolation-mode: bicubic; } 
            或者,Ethan Marcotte的imgSizer.js。 
              addLoadEvent(function() { 
                var imgs = document.getElementById("content").getElementsByTagName("img"); 
                imgSizer.collate(imgs); 
              }); 
            不過,有條件的話,知名還是根據不同大小的屏幕,加載不同分辨率的圖片。有很多方法可以做到這一條,服務器端和客戶端都可以實現。
            相關文章推薦
            還在發展PC端的網站的企業,筆者要建議企業做手機網站了,畢竟現在移動搜索非常的火,用智...·
            在網站這個行業來講目前手機網站建設的比重可能遠遠超出了PC端網站建設的數量,但是從優化...·
            在 深圳網站建 設行業摸爬滾打很多年了,除了pc端的優化外,移動端優化也越來越讓大家重視...·
            什么樣的轉化才算成功?什么樣才叫轉化?每個網站的定義和指標都是不一樣的,可以是完成購買...
            現在已經是移動互聯網的時代,企業開發移動網站是大勢所趨。不少企業甚至沒有PC斷網站,但...
            移動互聯網時代,手機端成了無可替代的網絡入口,占據著相當大的一部分的流量來源。所以...
            熟妇人妻老色视频网站_亚洲成a∧人片在线播放_国产人成午夜免电影费观看_直接看的av片免费观看