搜尋 結果：
HTML:
CSS:
CSS:
display: inline-block;
width: 160px;
}
.bbb li div{
width: 150px;
padding: 5px;
background: #ececec;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.bbb li img{
width: 150px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
Safari OUTPUT:
aaa:
bbb:
<ul class="aaa">
<li><img src="http://placehold.it/150x150" /></li>
</ul>
<ul class="bbb">
<li><div><img src="http://placehold.it/150x150" /></div></li>
</ul>
CSS:
.aaa li{
display: inline-block;
width: 160px;
}
.aaa li img{
width: 150px;
border: 5px solid #ececec;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
CSS:
.bbb li{display: inline-block;
width: 160px;
}
.bbb li div{
width: 150px;
padding: 5px;
background: #ececec;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.bbb li img{
width: 150px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
Safari OUTPUT:
aaa:
bbb:
nelson, 2014/11/10 下午 03:48:03
1. 名詞解釋
DPI - dots per inch (每英寸點密度)
PPI - pixels per inch (每英寸像素密度)
簡單來說，DPI是邏輯解析度，PPI是實體解析度(各家手機的螢幕解析度)
以圖像顯示或字型來說：MAC螢幕預設常用DPI為72、windows系統則是96或120；印刷用的DPI常用為300
2. Device Pixel Ratio(裝置像素比)
以 iPhone 為例
http://www.paintcodeapp.com/news/iphone-6-screens-demystified
視網膜解析度與css背景圖
http://weedygarden.net/2010/10/retina-display-and-css-background-images/
字型光柵化
http://zh.wikipedia.org/wiki/%E5%AD%97%E4%BD%93%E5%85%89%E6%A0%85%E5%8C%96
以下網站可測試此螢幕的裝置像素比
http://www.devicepixelratio.com/
3. 利用css media query 針對不同像素比顯示不同的排版
測試該瀏覽器能使用media query的功能語法
http://cssmediaqueries.com/overview.html
DPI - dots per inch (每英寸點密度)
PPI - pixels per inch (每英寸像素密度)
簡單來說，DPI是邏輯解析度，PPI是實體解析度(各家手機的螢幕解析度)
以圖像顯示或字型來說：MAC螢幕預設常用DPI為72、windows系統則是96或120；印刷用的DPI常用為300
2. Device Pixel Ratio(裝置像素比)
以 iPhone 為例
http://www.paintcodeapp.com/news/iphone-6-screens-demystified
視網膜解析度與css背景圖
http://weedygarden.net/2010/10/retina-display-and-css-background-images/
字型光柵化
http://zh.wikipedia.org/wiki/%E5%AD%97%E4%BD%93%E5%85%89%E6%A0%85%E5%8C%96
以下網站可測試此螢幕的裝置像素比
http://www.devicepixelratio.com/
3. 利用css media query 針對不同像素比顯示不同的排版
測試該瀏覽器能使用media query的功能語法
http://cssmediaqueries.com/overview.html
nelson, 2014/9/17 下午 07:31:37
一般在製作手機版或是自適應性網站時會加一個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
在PC版網站上，由於記憶體很大，background-image的圖，沒有甚麼大小限制，但在手機網站上，由於各家手機記憶體不一，
以iPhone 3GS為例，記憶體只有256mb，所以apple有限制背景圖的大小，以下是原文出處連結
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
大致上來說，iPhone記憶體若是低於256mb 圖片最大不能超過3百萬畫素(長x寬的總像素)，但實際上測試iPhone 3GS在ios6系統上，若是超過2百萬畫素，就會無法正常顯示，這是iPhone的bug。
以iPhone 3GS為例，記憶體只有256mb，所以apple有限制背景圖的大小，以下是原文出處連結
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
大致上來說，iPhone記憶體若是低於256mb 圖片最大不能超過3百萬畫素(長x寬的總像素)，但實際上測試iPhone 3GS在ios6系統上，若是超過2百萬畫素，就會無法正常顯示，這是iPhone的bug。
nelson, 2014/7/7 下午 03:35:27
.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