搜尋 css 結果：
一般在製作手機版或是自適應性網站時會加一個meta tag: <meta name="viewport" content="width=device-width,initial-scale=1.0">
但是這樣在IOS系統時，字體的大小會隨著螢幕轉向(螢幕解析度改變)而變大或縮小
解決辦法： 在css的body中加入"-webkit-text-size-adjust:100%;"
nelson, 2014/9/1 下午 02:03:20
一般在崁入youtube影片時，影片的寬高是固定的
隨著螢幕大小自動調整寬高的方式：
CSS：
.video-container {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML：
<div class="video-container">
<iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>
隨著螢幕大小自動調整寬高的方式：
CSS：
.video-container {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML：
<div class="video-container">
<iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>
nelson, 2014/7/8 下午 03:46:05
calc()是CSS3的一個計算長度單位的新功能，能使用數學四則運算方式。
1. 使用“+”“-”“*”“/”四則運算；
2. 可以使用百分比、px、em、rem等單位；
3. 可以混合使用各種單位進行計算。
例：
.thing {
width: 90%; /* fallback if needed */
width: calc(100% - 10px);
width: calc((100% - 12px) / 2);
width: calc(100%/3 - 2*1em - 2*1px);
}
4. 使用時，"+" & "-" 兩邊需加空格(一定要加)， "*" & "/"兩邊是不用加空格(要加也是可以)
5. 瀏覽器的支援：IE9+ , Firefox4.0+ , Chrome , Safari , iOS Safari6.0+ , Android Browser 4.4+
寫法： width: -moz-calc((100% - 12px) / 2);
width: -webkit-calc((100% - 12px) / 2);
width: calc((100% - 12px) / 2);
nelson, 2014/7/8 上午 10:23:38
.mobile-share_fb{ display:block; background:url("http://www.shopunt.com/css/mobile/images/mobile-s9398562778.png") no-repeat; background-position: 0 -1648px; height: 80px; width: 80px;} .shrink-attr{ background-size: 152px 2104px; width: 40px; height: 40px; background-position: 0 -824px;} .fb-test{ display:block; background:url("http://www.shopunt.com/images/logo_welcome.jpg") no-repeat; background-size:50% 50%; width: 105px; height: 105px;} nelson, 2014/7/7 上午 11:58:02
這個活動頁左邊 menu 要固定位置 但是不能跑出框框外面
http://www.shopunt.com/tch/event/2014-naked-truth-cc-cream/
所以需要處理scroll物件
js
http://www.shopunt.com/tch/event/2014-naked-truth-cc-cream/
所以需要處理scroll物件
<div id="menuContainer">
<div id="menu">
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
</div>
<div> ...長內容.... </div>
</div>
js
var __ContainerHeight = 5000;
var __ContainerTop = 160;
var __MenuHeight = 550;
var __FixedTop = 20;
$(window).load(function () {
__ContainerHeight = $("#menuContainer").height();
__ContainerTop = $("#menuContainer").offset().top;
__MenuHeight = $("#menu").height();
$("#menu").css({ "top": __FixedTop + "px", "position": "absolute" });
$(window).scroll(function () {
var scrolls = $(this).scrollTop();
//console.log(scrolls);
if (scrolls < __ContainerTop) {
$("#menu").css({ "top": __FixedTop + "px", "position": "absolute" });
}
else if ((scrolls + __MenuHeight + __FixedTop) > (__ContainerHeight + __ContainerTop)) {
$("#menu").css({ "top": (__ContainerHeight - __MenuHeight) + "px", "position": "absolute" });
}
else {
$("#menu").css({ "top": __FixedTop + "px", "position": "fixed" });
}
});
});
darren, 2014/6/20 下午 02:03:01
前台要引用
<!--AutoScripts S-->PageShift2<!--AutoScripts E-->
<!--AutoCSS S-->2013UI/PageShift<!--AutoCSS E-->
內文架構要有
<div id="PageShift2" class="page-index"></div>
<script>
$('#PageShift2').PageShift2({
PageIndex: 1,
PageMAX: 10,
TriggerEvent: ChangePage
});
function ChangePage(PageIndex) {
console.log(PageIndex);
}
</script>
Doug, 2014/3/18 下午 06:32:41
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--Header S-->
<!--<title>{Title}</title>
<meta name="description" content="{Description}" />
<script type="text/javascript" src="{UNTJS}"></script>-->
<!--AutoScripts S--><!--AutoScripts E-->
<!--AutoCSS S--><!-- AutoCSS E-->
<!--Header E-->
</head>
<body>
<!--Content S-->
<!--FinalScript S-->
<script type="text/javascript">
$(document).ready(function () {
})
</script>
<!--FinalScript E-->
<!--Content E-->
</body>
</html>
Doug, 2014/1/6 下午 12:21:03
IE一直到 IE10 才比較支援一般正常瀏覽器的功能
IE9 以下常常要做一些特別的處理 稍微整理一下
1. input, textarea 的 "placeholder" 屬性，IE10 以上才支援，建議偵測 IE9 以下版本時，特別跑 js 用 onfocus, onblur 來處理
2. <input type=file /> 不能用 js 去 click，必須要user真的去點他, js 才抓得到檔案，不然傳到server也是空的
3. IE9 的 js console.log 必須在 "偵錯模式" 下才能使用，所以js程式完成後，要記得把 console.log 清掉或是註解掉
不然一般 IE9 的 User 會跳出 js 的錯誤，然後 js 就停了。(這個問題必須在純IE9的瀏覽器才能發現，IE10模擬IE9也發 現不到)
4. Firefox 問題: 當我們要算div的寬高時，他本身必須 display:block 才能算的出來，不然會是 0，
但是 Firefox 連隱藏iframe 裡的 html > div 都會回傳 0，必須把 iframe 設為 display:block;visibility:hidden
才能算出裡面div的寬高
IE9 以下常常要做一些特別的處理 稍微整理一下
1. input, textarea 的 "placeholder" 屬性，IE10 以上才支援，建議偵測 IE9 以下版本時，特別跑 js 用 onfocus, onblur 來處理
function setPlaceholder(e) {
var placeholder = $(this).attr('placeholder');
if ($(this).val().length == 0) {
$(this).css("color", "#b2b2b2").val(placeholder);
}
$(this).focus(function (e) {
if ($(this).val() == placeholder) { $(this).css("color", "#666").val(""); }
});
$(this).blur(function (e) {
if ($(this).val().length == 0) { $(this).css("color", "#b2b2b2").val(placeholder); }
});
}
if (Is_LTE_IE9) {
$('input[placeholder]').each(setPlaceholder);
$('textarea[placeholder]').each(setPlaceholder);
}
2. <input type=file /> 不能用 js 去 click，必須要user真的去點他, js 才抓得到檔案，不然傳到server也是空的
3. IE9 的 js console.log 必須在 "偵錯模式" 下才能使用，所以js程式完成後，要記得把 console.log 清掉或是註解掉
不然一般 IE9 的 User 會跳出 js 的錯誤，然後 js 就停了。(這個問題必須在純IE9的瀏覽器才能發現，IE10模擬IE9也發 現不到)
4. Firefox 問題: 當我們要算div的寬高時，他本身必須 display:block 才能算的出來，不然會是 0，
但是 Firefox 連隱藏iframe 裡的 html > div 都會回傳 0，必須把 iframe 設為 display:block;visibility:hidden
才能算出裡面div的寬高
darren, 2013/11/15 上午 10:13:29
<style type="text/css">
#test
{
width:300px;
height:300px;
background-color:blue; /*全部, firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/
}
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
</style>
由上到下的順序，目前看起來愈通用的應該放上面。
然後下面寫下特殊瀏覽器+版本的項目。
Jerry, 2013/1/17 下午 03:46:26