Posted on

自適網頁RWD開發心得

最近大家有發現部落格的樣子隨著日子在偷偷的改變嗎?

是的!最近我在進行部落格的版面小修改!
主要訴求是要將版面改版成具有專業感、清楚、易讀,
然後呀,本部落格現在開始支援Responsive Web Design囉!(灑花~~灑花!!

其實自適網頁說穿了,只是用多組的CSS,可以在不同瀏覽環境下切換畫面的CSS,
這可以讓同一個網頁在手機以及電腦上,呈現不一樣的樣子。

RWD一般最常見是使用media queries,利用條件設定去設定裡面所設定的CSS要在何種狀況被使用。

我的開發心得

那這次的改版過程中,下面幾點是我覺得在開發RWD時要去注意的

  1. 若有需要使用JS去做網頁動態,不要將CSS直接在JS裡面加,例如
    $(".content").css("display","none");//js

    類似上面的這種的作法都要通通避免,JS一定要避免掉所有和版面有關的設定
    像上面這種寫法,應改成:

    $(".content").addClass("display-none");//js
    .display-none{display:none;}/*CSS*/

    這樣可以避免在切換為不同顯示方式時彼此互鄉干擾到。

  2. CSS選擇器的優先順序:
    因為在套用時,會有共通的、在某些解析度才要使用的CSS設定。
    假如當今天總共有四種不同瀏覽裝置有四種不同版面,其中想在某一種特別的裝置上套用一系列不同的CSS(只是改字體什麼等)。會需要更清楚的了解各種選擇方法在執行時的優先順序,才能用不同的選擇器去覆蓋原有設定。
    這邊有關於選擇器優先順序的詳細說明:如何撰寫有效率的CSS選擇器(CSS Selector)
  3. HTML格式架構:
    因為要應付多種的CSS套版,HTML的格式設計就很重要,應要能夠清楚表達各元素之間的子從關係,並且符合W3C的規範,這樣子在換CSS時才可以順利在不更改HTML的狀況下去更動顯示方式。

Media Queries設定方式

  1. 直接分成不同的CSS檔案,在HTML載入時宣告此CSS作用的對象
    		<link href="/style.css" rel="stylesheet" media="all and (color)" type="text/css" />
    
    <!--?xml-stylesheet media="all and (color)" rel="stylesheet" href="example.css" ?-->
  2. 在CSS檔裡面設定作用對象
    @import url(/style.css) all and (color);
    
    @media all and (color) {
      ⋮ one or more rule sets…
    }

條件的用法

@media [media type] and [(media feature)]

例:如果視窗最小寬度為500px,就套用這些CSS
@media screen and (min-width:500px) {.....}

例:如果視窗為直立,就套用這些CSS
@media screen and (orientation: portrait) {.....}

例:如果視窗在400px和700px之間(兩者需同時符合),就套用這些CSS
@media screen and (min-width: 400px) and (max-width: 700px)

例:如果是彩色螢幕或彩色投影機兩者之一(兩者符合一種即可),就套用這些CSS
@media screen and (color), projection and (color) {.....}

屬性和值

  1. media type類型:
    2013-12-30_175631
    比較要注意的是,handheld這個值其實並沒有辦法有效的判別是否為手持設備,現在會讀handheld的手機瀏覽器有:OpenWave, Nokia lite-web browsers, Netfront, Digia, BlackBerry browser, Opera Mini until v4, Opera Mobile until v9,Palm’s Blazer, Nokia S40 browser, IEMobile 6.x and 8.x。所以若是要判別是否是使用iPhone或Android手機,可以使用下面的判斷式:

    // target mobile devices
    @media only screen and (max-device-width: 480px) {
        body { max-width: 100%; }
    }
    
    // recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        // CSS goes here
    }
    
    // should technically achieve a similar result to the above query,
    // targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
    @media only screen and (min-resolution: 300dpi) {
        // CSS goes here
    }
  2. media features
    * (max-或min-)width:[數字]
    * (max-或min-)height:[數字]
    * (max-或min-)device-width:[數字]
    * (max-或min-)device-height:[數字]
    * orientation:portrait 或 landscape
    * aspect-ratio:[比值]
    * (max-或min-)device-aspect-ratio:[比值]
    * color
    * color-index
    * monochrome
    * (max-或min-)resolution:[數字]dpi
    * scan(只對tv)
    * grid
  3. 在JS裡取得螢幕的真實寬度:
    function getWindowWidth() {
    	var windowWidth = 0;
    	if (typeof(window.innerWidth) == 'number') {
    		windowWidth = window.innerWidth;
    	}
    	else {
    		if (document.documentElement &amp;&amp; document.documentElement.clientWidth) {
    			windowWidth = document.documentElement.clientWidth;
    		}
    		else {
    			if (document.body &amp;&amp; document.body.clientWidth) {
    				windowWidth = document.body.clientWidth;
    			}
    		}
    	}
    	return windowWidth;
    }

參考資料

Posted on

JQuery選擇器

1. 選擇所有的table

$(document).ready(function() {
     $('table tr').filter(function(index){
          //....
     });
});

2. 選擇第N行(若有很多table則只會選第一個table的第N行)

$(document).ready(function() {
     $("tr:eq(1)").addClass("mytr");
     $("tr:eq(2)").css('background-color','#663300');
});

3. 選擇第N行(若有很多table則會選擇每個table的第N行)

$(document).ready(function() {
     $("table tr:nth-child(1)").addClass("mytr");
});

4. 選奇偶行

$(document).ready(function() {
 $("table tr:odd").addClass("trOdd");
 $("table tr:even").addClass("trEven");
});

3. 選第一個元素

$(document).ready(function() {
 $("table tr:first").addClass("trFirst");
 $("table tr:last").addClass("trLast");
});

下面是相關選擇器的一個小範例

<html>
	<head>
		<script Type="text/javascript" src="js/jQuery.js"></script>
		<script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$('tr:even').removeClass();
					$('tr:even').addClass('myEven');
				});
				$('#btn2').click(function(){
					$('tr:odd').removeClass();
					$('tr:odd').addClass('myOdd');
				});
				$('#btn3').click(function(){
					$('tr:eq(1)').removeClass();
					$('tr:eq(1)').addClass('myEq');
				});
				$('#btn4').click(function(){
					$('#tbd tr:even').removeClass();
					$('#tbd tr:even').addClass('myEven');
				});
			})
		</script>
		<style type="text/css">
			.myOdd
			{
				background-Color:pink;
			}
			.myEven
			{
				background-Color:Yellow;
			}
			.myEq
			{
				background-Color:green;
			}
		</style>
	</head>
	<body>
		<input type="Button" id="btn1" name="btn1" value="測試Even">
		<br />
		<input type="Button" id="btn2" name="btn2" value="測試Odd">
		<br />
		<input type="Button" id="btn3" name="btn3" value="測試eq">
		<br />
		<input type="Button" id="btn4" name="btn4" value="測試tbody內的tr">
		<br />
		<hr />
		<table border="1">
			<thead>
				<tr>
					<th>1,0</th>
					<th>2,0</th>
					<th>3,0</th>
					<th>4,0</th>
					<th>5,0</th>
				</tr>
			</thead>
			<tbody id="tbd">
				<tr>
					<td>1,1</td>
					<td>2,1</td>
					<td>3,1</td>
					<td>4,1</td>
					<td>5,1</td>
				</tr>
				<tr>
					<td>1,2</td>
					<td>2,2</td>
					<td>3,2</td>
					<td>4,2</td>
					<td>5,2</td>
				</tr>
				<tr>
					<td>1,3</td>
					<td>2,3</td>
					<td>3,3</td>
					<td>4,3</td>
					<td>5,3</td>
				</tr>
				<tr>
					<td>1,4</td>
					<td>2,4</td>
					<td>3,4</td>
					<td>4,4</td>
					<td>5,4</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

下面是顯示的結果


1,0 2,0 3,0 4,0 5,0
1,1 2,1 3,1 4,1 5,1
1,2 2,2 3,2 4,2 5,2
1,3 2,3 3,3 4,3 5,3
1,4 2,4 3,4 4,4 5,4


相關文章:
jQuery 參考手冊 – 選擇器 (http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp)

jQuery 選擇器

選擇器 實例 選取
* $(“*”) 所有元素
#id $(“#lastname”) id=”lastname” 的元素
.class $(“.intro”) 所有 的元素
element $(“p”) 所有 <p> 元素
.class.class $(“.intro.demo”) 所有 且 的元素
:first $(“p:first”) 第一個 <p> 元素
:last $(“p:last”) 最後一個 <p> 元素
:even $(“tr:even”) 所有偶數 <tr> 元素
:odd $(“tr:odd”) 所有奇數 <tr> 元素
:eq(index) $(“ul li:eq(3)”) 列表中的第四個元素(index 從 0 開始)
:gt(no) $(“ul li:gt(3)”) 列出 index 大於 3 的元素
:lt(no) $(“ul li:lt(3)”) 列出 index 小於 3 的元素
:not(selector) $(“input:not(:empty)”) 所有不為空的 input 元素
:header $(“:header”) 所有標題元素 <h1> – <h6>
:animated 所有動畫元素
:contains(text) $(“:contains(‘W3School’)”) 包含指定字符串的所有元素
:empty $(“:empty”) 無子(元素)節點的所有元素
:hidden $(“p:hidden”) 所有隱藏的 <p> 元素
:visible $(“table:visible”) 所有可見的表格
s1,s2,s3 $(“th,td,.intro”) 所有帶有匹配選擇的元素
[attribute] $(“[href]”) 所有帶有 href 屬性的元素
[attribute=value] $(“[href=’#’]”) 所有 href 屬性的值等於 “#” 的元素
[attribute!=value] $(“[href!=’#’]”) 所有 href 屬性的值不等於 “#” 的元素
[attribute$=value] $(“[href$=’.jpg’]”) 所有 href 屬性的值包含以 “.jpg” 結尾的元素
:input $(“:input”) 所有 <input> 元素
:text $(“:text”) 所有 type=”text” 的 <input> 元素
:password $(“:password”) 所有 type=”password” 的 <input> 元素
:radio $(“:radio”) 所有 type=”radio” 的 <input> 元素
:checkbox $(“:checkbox”) 所有 type=”checkbox” 的 <input> 元素
:submit $(“:submit”) 所有 type=”submit” 的 <input> 元素
:reset $(“:reset”) 所有 type=”reset” 的 <input> 元素
:button $(“:button”) 所有 type=”button” 的 <input> 元素
:image $(“:image”) 所有 type=”image” 的 <input> 元素
:file $(“:file”) 所有 type=”file” 的 <input> 元素
:enabled $(“:enabled”) 所有激活的 input 元素
:disabled $(“:disabled”) 所有禁用的 input 元素
:selected $(“:selected”) 所有被選取的 input 元素
:checked $(“:checked”) 所有被選中的 input 元素