css – @media screen 的 max-width 說明教學

Responsive Web Design

自適應的CSS寫法可參考
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
http://www.mrmu.com.tw/2011/04/06/css3-media-queries-liquid-layout/

首些我們要知道CSS的特性,對同一個class設定,下方設定會取代上方設定。

接著在此說明順序的問題:

範例A:
假設瀏覽器寬1920px,寬度是由小->大,但因為條件1符合、條件2符合、條件3符合,所以不管瀏覽器寬度怎麼改變,他始終顯示條件3(max-width: 1920px)的設定(使用紅字顏色),
不是因為沒套用條件1與條件2,而是被條件3給覆蓋了。
換句話說,因為不管瀏覽器寬度怎麼改變,都符合條件3的需求,所以會呈現條件3的CSS。

範例B:
我們把範例A顛倒過來,情況就不同了。隨著瀏覽器拉寬拉窄,顏色會跟著變化。
概念也是由下方取代上方。
假設瀏覽器寬1500px,那剛好就會直接遇到條件一,繼下往下跑,因為條件二跟三都不符合,所以最終呈現條件一
假設瀏覽器寬1200px,條件一符合、條件二也符合,只有條件三不符合,所以最終呈現條件二
假設瀏覽器寬600px,條件一二三都符合,所以最終呈現條件三。

像這種 @media screen and (max-width: 1280px)可以應用在不同手機、電腦、筆電的瀏覽器尺寸
依照不同瀏覽器寬選擇不同的CSS呈現,非常好用,不需要為了讓手機板是應寬度,
而重新寫一個給手機用的架構。

php – jquery ui – 利用sortable()來排序

利用sortable()來做排序效果
網頁a.php是使用者端,使用者可自行排序後按下按鈕,儲存排序的結果
網頁ajax.php是用來儲存的伺服器端
很簡單,好上手!

a.php

ajax.php

MYSQL – 指定排序

+—-+——-+
| id | name |
+—-+——-+
| 1 | test1 |
| 2 | test2 |
| 3 | test3 |
| 4 | test4 |
| 5 | test5 |
+—-+——-+
//須要取得id 為指定數字時並依照排序的兩種方法

select * from test where id in(3,1,5) order by find_in_set(id,’3,1,5′);

select * from test where id in(3,1,5) order by substring_index(‘3,1,2’,id,1);