• <bdo id="wwck2"><u id="wwck2"></u></bdo>
  • <optgroup id="wwck2"></optgroup>
    <tt id="wwck2"></tt>
  • 記憶盒子

    把記憶裝進灰色的盒子,封裝起來,那年那月,重新拾起。

    首頁搜索目錄
    search
    當前主題: 互聯網絡

    自適應網頁設計代碼需要做的6大調整

    作者:Kaka    時間:2015-12-29 11:44:49    瀏覽:    評論:9

    自適應網頁設計,對于未曾接觸過此類設計的人來說,可能覺得是十分難的事情,但是,如果你熟悉html,那么自適應設計其實只不過是在原PC端的html代碼上做一些改動而已,并非一門新的技術語言。而至于自適應網頁設計代碼需要做哪些調整,歸納來說,有6個調整是需要做的。

    自適應網頁設計

    自適應網頁設計

    自適應網頁設計代碼需要做的6大調整

    1、 允許或禁止調整頁面大小

    iOS和Android瀏覽器都基于webkit核心,這兩種瀏覽器以及其他的很多瀏覽器都支持viewport meta元素覆蓋默認的畫布縮放設置,只需在HTML的<head>標簽中插入一個<meta>標簽,<meta>標簽中可以設置具體的寬度(如像素值)或者縮放比例2.0(設備實際尺寸的兩倍),下面是將一個頁面放大到設備實際尺寸兩倍顯示的meta標簽示例:

    <meta name=”viewport” content=”initial-scale=2.0,width=device-width,user-scalable=yes”/>

    如果不允許調整頁面大小,那么把user-scalable=yes改為user-scalable=no,如:

    <meta name=”viewport” content=”initial-scale=2.0,width=device-width,user-scalable=no”/>

    2、將網頁修改為百分比布局

    自適應網頁是絕對不可以使用固定尺寸來指定布局范圍的,而是用百分比布局。

    當某個瀏覽窗口處于媒體查詢固定的范圍之外,網頁就需要水平滾動才能完整瀏覽,而通過百分比布局可以頁面元素根據窗口大小在一個又一個媒體查詢之間靈活修正樣式,具體來講,就是css代碼不會指定具體像素寬度:width:xxx px,而是會指定一個百分比寬度:width:xx%,或者直接就是width:auto。

    這里大家可以根據一個簡易的公式將固定像素寬度轉換成對應的百分比寬度:目標元素寬度 ÷ 上下文元素寬度 = 百分比寬度

    例如:

    <div id =”wraper”>
        <divid = “header”></div>
    </div>
    #wrapper {
        margin-right: auto;
        margin-left: auto;
        width: 960px;
    }
    #header {
        margin-right: 10px;
        margin-left:10px;
        width: 940px;
    }

    轉換為百分比的header區塊的css為:

    #header {
        margin-right: 10px;
        margin-left: 10px;
        width: 97.916667% /* 940 ÷ 960 */
    }

    3、用em替換px

    同樣,目標元素寬度 ÷ 上下文元素寬度 = 百分比寬度 這個公式也適用于將文字的像素單位轉換為相對單位,值得注意的是,現代瀏覽器的默認文字都是16像素,因此一開始給body標簽應用下列任何一條規則所產生的效果都一樣:

        font-size: 100%;
        font-size:16px;
        font-size: 1em;

    例如某網站網站標題相應的樣式:

    #logo {
       display: block;
       padding-top: 75px;
       color: #0d0c0c;
       font-family: Arial;
       font-size: 48px;
    }

    修改后的樣式如下:

    #logo{
       display: block;
       padding-top: 75px;
       color: #0d0c0c;
       font-family:Arial;
       font-size:3em /* 48 ÷ 16 */
    }

    4、流動布局(fluid grid)的使用

    “流動布局”指的是各個區塊的位置都浮動,不是固定不變的。

      .main {float: right;width: 70%;}
      .leftBar {float: left;width: 25%;}

    這么做的好處是,如果寬度太小,放不下兩個元素,后面的元素會自動滾動到前面元素的下方,不會在水平方向溢出,避免了水平滾動條的出現,大大提升了用戶的閱讀體驗。另外,絕對定位(position:absolute)的使用,也要非常小心。

    5、Media Query技術的使用

    在自適應設計的技術中,css3支持css2.1定義的媒體類型,同時添加了很多涉及媒體類型的功能屬性,包括max-width(最大寬度),device-width(設備寬度,orientation(屏幕定向:橫屏或豎屏),因此可以通過Media Query加載相應的CSS文件.       例如,下面代碼定義了如果頁面通過屏幕呈現,并且屏幕寬度不超過480px,則加載shetland.css

    <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

    同樣可以創建多個樣式表,以適應不同設備或者不同分辨率的寬度范圍,當然更有效的做法是將多個Media Query整合在一個樣式表文件中:

    @media only screen and (min-devece-width: 320px) and (max-device-width: 480px) {
        /* Styles */

    @media screen and (min-width: 600px) {
        .hereIsMyClass {
            width: 30%;
            float: right;
        }
    }

    上面的代碼中定義的樣式類只有在瀏覽器屏幕寬度超過600px時才會有效。

    因此,使用min-width和max-width可以同時判斷屏幕尺寸與瀏覽器實際寬度,如果希望通過Media Query作用于某種特定設備,但忽略在其上運行的瀏覽器是否由于沒有最大化尺寸與設備屏幕尺寸不一致,則可以使用max-device-width和max-device-width屬性來判斷設備本身屏幕尺寸。

    Media Query不是唯一的解決方案,同樣可以通過Javascript來實現自適應設計,特別是某些舊瀏覽器無法完美支持CSS3的Media Query時,它可以作為備選方案。當然,我們仍然能借助專業的Javascript庫來幫助舊瀏覽器(IE5+,Firefox 1+,Safari 2等)支持CSS3的Media Queries.使用方法:下載css3-mediaqueries.js,然后在頁面中調用它即可,例如:

    <!--[if lt IE 9]>
        <script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
    <![endif]-->

    6、 設計響應式圖片

    有很多同比縮放圖片的技術,其中有不少是簡單易行的,比較流行的方法是使用CSS的max-width屬性:

    img { max-width: 100%;}

    老版本的IE不支持max-width,所以只好寫成:

    img { width: 100%; }

    此外,windows平臺縮放圖片時,可能出現圖像失真現象。這時,可以嘗試使用IE的專有命令:

    img { -ms-interpolation-mode: bicubic; }

    或者,Ethan Marcotte的imgSizer.js。

    addLoadEvent(function() {
    var imgs =
    ocument.getElementById("content").getElementsByTagName("img");
    imgSizer.collate(imgs);
    });

    如果有條件的話,最好能根據屏幕的不同大小,加載不同分辨率的圖片。

    您可能對如下文章也感興趣

    自適應網站設計對百度友好的關鍵

    一天完成把PC網站改為自適應!原來這么簡單!

    標簽: 自適應  

    加入本站QQ群(312716741),交流分享網站建設、優化、SEO技術。。。

     

    上一篇: 自適應網站設計對百度友好的關鍵:添加applicable-device標簽
    下一篇: GoDaddy開通中文客服電話,溝通不再是問題
    • 9.愛**
    • 我用dw8做的一個網頁,發布到網站上,再用手機進的時候,什么也不顯示,手機瀏覽器提示攔截了很多個廣告。因為是純圖片的,沒放文字。每一個圖片被當做一個廣告。也不知道是代碼哪里出現了問題。后來把手機瀏覽器的攔截功能關閉了才正常顯示。
      Kaka 于 2016-4-10 10:46:37 回復
      圖片是調用外域的吧?同一域名里的圖片不會被攔截的。
    • 2016-4-10 2:08:58 回復該留言
    • 1.T**
    • 真好,這樣網頁就可以自己根據需要來調整了
    • 2016-1-13 10:23:59 回復該留言

    發表評論:

    ◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

    訂閱博客                   QQ交流群(312716741)

    • 通過Google訂閱本站 通過鮮果訂閱本站 通過抓蝦訂閱本站
    • 通過QQ郵箱訂閱本站 通過Yahoo訂閱本站 通過有道訂閱本站

    Search

    最新評論及回復

    最近留言

    網站分類

    Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

    Copyright @2009-2019 All Rights Reserved. 粵ICP備14028160號-1

    Powered By Z-Blog 1.8 Walle Build 91204
    Copyright @2009-2019 All Rights Reserved.
    微拍福利