自適應頁面設計方法

来源:http://www.cnblogs.com/yunxiao/archive/2016/06/22/5606246.html
-Advertisement-
Play Games

二、允許網頁寬度自動調整 "自適應網頁設計"到底是怎麼做到的?其實並不難。 首先,在網頁代碼的頭部,加入一行viewport元標簽。 <meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是網頁默 ...


二、允許網頁寬度自動調整

"自適應網頁設計"到底是怎麼做到的?其實並不難。

首先,在網頁代碼的頭部,加入一行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;

四、相對大小的字體

字體也不能使用絕對大小(px),而只能使用相對大小(em)。

  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);

  });

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本章內容: Socket IO多路復用(select) SocketServer 模塊(ThreadingTCPServer源碼剖析) socket通常也稱作"套接字",用於描述IP地址和埠,是一個通信鏈的句柄,應用程式通常通過"套接字"向網路發出請求或者應答網路請求。 功能: sk = sock ...
  • 恢復內容開始 最近嘗試在MAC(OS X 10.11 El Capitan)上安裝Caffe 以及Python介面遇到了一些問題但是官方安裝教程上並沒有提出這些問題的解決辦法搜索了很久(主要在於Python介面上) 終於找到瞭解決辦法 其實Caffe的安裝分兩步:安裝依賴+編譯源碼 首先是安裝依賴: ...
  • 今天在剛申請了博客,一下午都在寫那個隨筆,所以說好的來看c++的也放在了最後,下星期就考試了,這個類的靜態成員是我不是很懂的,在網上 看到一片很詳細的博客考下來回去慢慢看。 在C++中,靜態成員是屬於整個類的而不是某個對象,靜態成員變數只存儲一份供所有對象共用。所以在所有對象中都可以共用它。使用靜態 ...
  • 最近由於項目需要,研究了一下maven的打包,項目要做到 1,生成3個目錄/lib,/conf,/bin目錄 2,把所有的jar目錄編譯、拷貝到/lib目錄(包括maven的jar包和lib目錄下的jar,以及編譯的jar包) 3,把所有的啟動腳本從工程根目錄拷貝到/bin目錄 4,把所有的配置文件... ...
  • 課本源碼部分 第9章 查找 - 雙鏈樹(鍵樹) ——《數據結構》-嚴蔚敏.吳偉民版 源碼使用說明 鏈接☛☛☛ 《數據結構-C語言版》(嚴蔚敏,吳偉民版)課本源碼+習題集解析使用說明 課本源碼合輯 鏈接☛☛☛ 《數據結構》課本源碼合輯 習題集全解析 鏈接☛☛☛ 《數據結構題集》習題解析合輯 本源碼引入 ...
  • 很長時間了,有兩個想要完成的事情,在這裡寫下來,督促自己完成它們。 第一個事情是實現一個模板系統,主要特點: 實現文檔和代碼之間的強聯繫,最外層的模板代碼即文檔 分離關註。不同邏輯部分可以放在不同的文件或代碼段里,即便最終生成的代碼不可避免地混合 跨語言。比如在server端和javascript部 ...
  • 這個模式我在書上(JavaScript設計模式)的那個章節來來回回看了幾遍,有兩個關鍵點並沒有說清楚,導致儘管錶面上是很簡單明瞭,但本質沒有說清,以下是書上的例子。 書中淡解 例子(改前): 例子(改後,命名模式): 我想不明白,憑什麼加上這個方法,就得到了優化,哪裡就解耦了。 當carManage ...
  • 說 明:作者也沒寫過什麼框架,只是分享一些自己的理解,拋磚引玉罷了。如果你寫過一些框架可能會產生一些共鳴歡迎討論,如果你正在寫或正打算寫一個框架可能 會給你一些啟發。本文以為較長可能會分多個篇博客來寫,現在能想到的是主要分為步驟、模式兩部分。如果你覺得好,按一個推薦舉手之勞讓更多的人可以看到。 步驟 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...