[轉貼] 3個步驟快速完成 Responsive Design (響應式網頁設計) RWD

出處：http://blog.seosemhk.com/webdesign/148-responsive-design-in-3-steps.html



近來因為很多人談論Responsive Web Design (響應式網頁設計)，剛好在網上找了一篇文章：Responsive Design in 3 Steps，以簡單步驟解釋如何設計基本的Responsive Web Design (響應式網頁設計)，所以將它翻譯成中文供大家分享：
Responsive Web Design (響應式網頁設計)，現在毫無疑問是舉足興重。對新手來說，Responsive Web Design 聽起來可能會有點複雜，但事實上，它比你想像的簡單得多。為了讓你能快速入門，我準備了一個簡易的教學。透過這三個步驟，我保證你一定可以瞭解 Responsive Web Design 以及 Media Query 的基本原理（先假設你有基本的 CSS 知識）。

步驟1：Meta Tag
為了配合適應螢幕，大多數行動裝置的瀏覽器會把 HTML 網頁縮放至手機螢幕的寬度，你可以使用 meta 標籤的 viewport meta (瀏覽器可視區域) 屬性來強制重設。
以下的 viewport 標籤將告訴瀏覽器以手機螢幕的寬度做為網頁的寬度，並且停用初始的寬度設定。請將下列這段 meta 標籤寫在<HEAD>內。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
註： Internet Explorer 8以下版本的瀏覽器不支援 Media Query。你可以加入 media-queries.js 或 respond.js 使 IE 對 支援 Media Query。 
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

步驟2：HTML 結構
在這個例子中，有 header、content、sidebar 以及 footer 等基本的網頁版面。header 固定的高度為 180px，內文容器(content container) 的寬度為 600px，側邊欄(sidebar) 的寬度為 300px。
b_666_666_16777215_00_images_responsive-design-in-3-steps-1.jpeg 

步驟三：Media Queries
CSS3 media query 是 Responsive Web Design 的秘訣。它就像是原始碼裡的 if 條件，告訴瀏覽器依照指定的 viewport (可視區域) 寬度來表達網頁。
以下的句式只在viewport 寬度不大於980px才生效。這裡將所有容器(container)的寬度從"像素"單位改為"%百分比"單位，容器(container)排版會因些變成可自動調整畫面。 
b_666_666_16777215_00_images_responsive-design-in-3-steps-2.jpeg
跟著，設定 viewport 寬度不大於700px時， 將 #content 和 #sidebar 設為自動寬度 (auto width)，並移除它的浮動 (float)屬性，這樣網頁版面將會以螢光幕全寛顯示。
b_666_666_16777215_00_images_responsive-design-in-3-steps-3.jpeg 
當 viewport 寬度不大於 480px (手機螢幕)，將 #header 設為自動設定高度 (auto height)，把 h1 的字體大小設定為 24px，隱藏側邊欄(sidebar)。
/* for 480px or less */
media screen and (max-width: 480px) {
  #header {
  height: auto;
  }
  #h1 {
  font-size: 24px;
  }
  #sidebar {
  display: none;
  }
}
你可以寫更多類似的 media query 句式。在這個示範裡面只寫了以上三個句式。 Media Query 的目的是利用多種不同的 CSS 規則，來指定同一個網頁在各種不同 viewport 寬度上展現其對應的版面。你可以將它寫在同一個 CSS 檔案，或分別寫在多個 CSS 檔案。
結論：這個教學的目的是示範 Responsive Web Design(響應式網頁設計) 的基本原理。如果你想更加深入的學習，可以看看原作者另一篇文章： Responsive Design With Media Queries.

原文網址：http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
原文作者：Mr. Nick La 
內。 註： Internet Explorer 8以下版本的瀏覽器不支援 Media Query。你可以加入 media-queries.js 或 respond.js 使 IE 對 支援 Media Query。 步驟2：HTML 結構 在這個例子中，有 header、content、sidebar 以及 footer 等基本的網頁版面。header 固定的高度為 180px，內文容器(content container) 的寬度為 600px，側邊欄(sidebar) 的寬度為 300px。 b_666_666_16777215_00_images_responsive-design-in-3-steps-1.jpeg 步驟三：Media Queries CSS3 media query 是 Responsive Web Design 的秘訣。它就像是原始碼裡的 if 條件，告訴瀏覽器依照指定的 viewport (可視區域) 寬度來表達網頁。 以下的句式只在viewport 寬度不大於980px才生效。這裡將所有容器(container)的寬度從"像素"單位改為"%百分比"單位，容器(container)排版會因些變成可自動調整畫面。 b_666_666_16777215_00_images_responsive-design-in-3-steps-2.jpeg 跟著，設定 viewport 寬度不大於700px時， 將 #content 和 #sidebar 設為自動寬度 (auto width)，並移除它的浮動 (float)屬性，這樣網頁版面將會以螢光幕全寛顯示。 b_666_666_16777215_00_images_responsive-design-in-3-steps-3.jpeg 當 viewport 寬度不大於 480px (手機螢幕)，將 #header 設為自動設定高度 (auto height)，把 h1 的字體大小設定為 24px，隱藏側邊欄(sidebar)。 /* for 480px or less */ media screen and (max-width: 480px) { #header { height: auto; } #h1 { font-size: 24px; } #sidebar { display: none; } } 你可以寫更多類似的 media query 句式。在這個示範裡面只寫了以上三個句式。 Media Query 的目的是利用多種不同的 CSS 規則，來指定同一個網頁在各種不同 viewport 寬度上展現其對應的版面。你可以將它寫在同一個 CSS 檔案，或分別寫在多個 CSS 檔案。 結論：這個教學的目的是示範 Responsive Web Design(響應式網頁設計) 的基本原理。如果你想更加深入的學習，可以看看原作者另一篇文章： Responsive Design With Media Queries. 原文網址：http://webdesignerwall.com/tutorials/responsive-design-in-3-steps 原文作者：Mr. Nick La

留言

張貼留言

這個網誌中的熱門文章

TeknoParrot 模擬器介紹，俗稱《鸚鵡模擬器》

圖片
此款模擬器都是大型機台上的遊戲 目前所支持模擬的遊戲有下列 Examu eX-Board Global VR PC Based Konami PC Based Namco System ES3 (A/B/X) Namco System N2 Raw Thrills PC Based SEGA Europa-R SEGA Lindbergh Yellow SEGA Lindbergh Red/Red EX SEGA Nu SEGA PC Based SEGA RingEdge SEGA RingEdge 2 SEGA RingWide Taito NESiCAxLive Taito Type X Taito Type X2 Taito Type X3 Taito Type X Zero 此款模擬器,硬體要求比較高,建議至少CPU i5 以上等級,顯卡越高階越順暢 基本設定蠻容易的 首先下載免費版的 TeknoParrot 頭文字 D8 Infinity下載 下載完後請先把 ID8_Update.7z 解壓縮覆蓋至遊戲根目錄， 之後再將 InitialD8_GLW_RE_SBZZ_redumped_.7z 解壓縮覆蓋遊戲根目錄 頭文字 D 把手設定 推薦使用 XBOX 把手 或者 DS4 把手 DS4 把手可以使用 DS4Windows 模擬 XBOX 把手 連接成功後按照下方設定按鈕 灣岸 5（Wangan Midnight 5） 頭文字 D7 AAX
閱讀完整內容

[轉貼] ASP.NET傳遞參數給Crystal Report做Export或Print的動作

圖片
近有網友提到此問題...小弟就做一個demo範例分享給大家呀.. 首先準備一個crystal report檔( CrystalReport.rpt ),內容如下: 在 欄位總管 新增一個參數,如下所示: 接下來就是程式碼 asp.net(C#) ReportView.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ReportView.aspx.cs" Inherits="ReportView" %> <%@ Register Assembly="CrystalDecisions.Web, Version=10.2.3600.0, Culture=neutral, PublicKeyToken=692fbea5521e1304" Namespace="CrystalDecisions.Web" TagPrefix="CR" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>ReportView</title> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="txbLogo" runat="server"></asp:TextBox>
閱讀完整內容

Raspberry Pi 樹莓派 - Raspbian 忘記密碼簡單重設

Raspbain 下載連結 - https://www.raspberrypi.org/downloads/raspbian/ pi的預設密碼是raspberry ，如果忘記密碼的解決方法如下 將記憶卡拔出 ，放到電腦裡，修改第一個分割區裡的cmdline.txt，裡頭只有一行，原本內容應該是這樣 dwc_otg.lpm_enable=0 console=ttyAMA0,115200 kgdboc=ttyAMA0,115200 console=tty1 root=/dev/mmcblk0p2 rootfstype=ext4 elevator=deadline rootwait 在最後面加上 init=/bin/sh 修改完後應該如下 dwc_otg.lpm_enable=0 console=ttyAMA0,115200 kgdboc=ttyAMA0,115200 console=tty1 root=/dev/mmcblk0p2 rootfstype=ext4 elevator=deadline rootwait init=/bin/sh 然後記憶卡放回Pi開機，就會出現「#」提示字元，然後輸入下方指令 切換為Super user #su  重新設定pi user的密碼 #passwd pi 清除緩衝，讓設定儲存生效 #sync 執行開機後的程序 # exec /sbin/init  接著會看到開機訊息，看到login:之後，登入帳號pi 最後記得將之前修改的 /boot/cmdline.txt 還原，將init=/bin/sh 移除。
閱讀完整內容