<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>textarea auto height</title>
<style type="text/css">
textarea {
resize: none;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("textarea.auto-height").css("overflow", "hidden").bind("keydown keyup", function() {
$(this).height('0px').height($(this).prop("scrollHeight") + 'px');
}).keydown();
});
</script>
</head>
<body>
<textarea class="auto-height"></textarea>
</body>
</html>[CSS] 以CSS Media Requires實作瀏覽器大小偵測
網頁排版時，考慮不同終端設備瀏覽大小是很重要的一環
解析度過小造成跑版，過大時把一些區塊size寫死又會造成頁面太空曠
RWD(Responsive web design) 的第一步，便從這開始
CSS的媒體查詢(Media Requires)語法
@media (query) {
/* CSS Rules used when query matches */
}
可以查詢的項目很多，不過RWD最常用的是min-width、max-width、min-height 和 max-height。
min-width：任何超過查詢中指定寬度的瀏覽器都會套用規則。
max-width：任何未超過查詢中指定寬度的瀏覽器都會套用規則。
min-height：任何超過查詢中指定高度的瀏覽器都會套用規則。
max-height：任何未超過查詢中指定高度的瀏覽器都會套用規則。
有涉獵過的人應該也知道還有device-width這個東西
但是device-width是針測裝置的螢幕的大小，而非檢視區的大小
通常只用在行動裝置上，建議還是以上面列舉的四項屬性為主。
下面列舉三種不同大小，更換不同背景顏色
@media (min-height: 1024px) and (min-height: 768px) { body { background-color:red; } } /* 1024 x 768 */
@media (min-height: 1440px) and (min-height: 900px) { body { background-color:blue; } } /* 1440 x 900 */
@media (min-height: 1920px) and (min-height: 1080px) { body { background-color:green; } } /* 1920 x 1080 */
也可以在link tag的media attribute寫入規則，來引入不同的樣式表
<link media="(max-width: 1024px)" href="max-1024px.css" rel="stylesheet" /> <link media="(max-width: 1440px)" href="max-1440px.css" rel="stylesheet" /> <link media="(max-width: 1920px)" href="max-1920px.css" rel="stylesheet" />
這裡有一些可以觀看一些RWD的例子：
http://mediaqueri.es/
Reference:
http://fundesigner.net/responsive-web-design-explain/
http://fundesigner.net/css3-media-queries/
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=zh-tw#section
[HTML] IE 相容性檢視問題
今天收到客戶反應IE有問題
檢查一下發現是瀏覽器判斷內容後自動選擇IE舊版本模式下去做相容性檢視
大部分情況下在html head區塊宣告X-UA-Compatible指定IE瀏覽模式即可解決：
<meta http-equiv="X-UA-Compatible" content="IE=11" / >
Leave a comment
[jQuery] 轉換與使用json object
var json_str = '{ "name": "Calos" }';
var data = $.parseJSON(json_str); //轉換成json object
alert(data.name); //讀取物件元素