å¦æ们éè¦å
¼å®¹ä¸åå±å¹å辨çãæ¸
æ°åº¦ä»¥åå±å¹å®åæ¹å¼ç«å±(portrait)ã横å±(landscape)ï¼ææ ·æè½åå°è®©ä¸ç§è®¾è®¡æ¹æ¡æ»¡è¶³æææ
åµï¼å¯¹æ¤ï¼é©¬æµ·ç¥¥è§çæ们çå¸å±åºè¯¥æ¯ä¸ç§å¼¹æ§çæ
æ ¼å¸å±ï¼ä¸å尺寸ä¸å¼¹æ§éåºï¼å¦ä»¥ä¸é¡µé¢ä¸å模åå¨ä¸å尺寸ä¸çä½ç½®ï¼
é£ä¹æ们å
·ä½è¦æä¹åå¢ï¼
1ãMetaæ ç¾å®ä¹
ä½¿ç¨ viewport meta æ ç¾å¨ææºæµè§å¨ä¸æ§å¶å¸å±
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
éè¿å¿«æ·æ¹å¼æå¼æ¶å
¨å±æ¾ç¤º
<meta name="apple-mobile-web-app-capable" content="yes" />
éèç¶ææ
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
iPhoneä¼å°çèµ·æ¥åçµè¯å·ç çæ°åæ·»å çµè¯è¿æ¥ï¼åºå½å
³é
<meta name="format-detection" content="telephone=no" />
2ã使ç¨Media Querieséé
对åºæ ·å¼
常ç¨äºå¸å±çCSS Media Queriesæ以ä¸å ç§ï¼
设å¤ç±»å(media type):
allææ设å¤ï¼
ããscreen çµèæ¾ç¤ºå¨ï¼
ããprintæå°ç¨çº¸ææå°é¢è§è§å¾ï¼
ããhandheld便æºè®¾å¤ï¼
ããtvçµè§æºç±»åç设å¤ï¼
ããspeechè¯æåé³é¢çæå¨ï¼
ããbrailleç²äººç¨ç¹åæ³è§¦è§åé¦è®¾å¤ï¼
ããembossedç²ææå°æºï¼
ããprojectionåç§æ影设å¤ï¼
ããtty使ç¨åºå®å¯åº¦åæ¯æ
æ ¼çåªä»ï¼æ¯å¦çµä¼ æåæºåç»ç«¯ã
设å¤ç¹æ§(media feature):
widthæµè§å¨å®½åº¦ï¼
ããheightæµè§å¨é«åº¦ï¼
ããdevice-width设å¤å±å¹å辨çç宽度å¼ï¼
ããdevice-height设å¤å±å¹å辨ççé«åº¦å¼ï¼
ããorientationæµè§å¨çªå£çæ¹å纵åè¿æ¯æ¨ªåï¼å½çªå£çé«åº¦å¼å¤§äºçäºå®½åº¦æ¶è¯¥ç¹æ§å¼ä¸ºportraitï¼å¦å为landscapeï¼
ããaspect-ratioæ¯ä¾å¼ï¼æµè§å¨ç纵横æ¯ï¼
ããdevice-aspect-ratioæ¯ä¾å¼ï¼å±å¹ç纵横æ¯ã
ä¾åï¼
/* for 240 px width screen */
ãã@media only screen and (max-device-width:240px){
ãã selector{ ... }
ãã}
ãã/* for 320px width screen */
ãã@media only screen and (min-device-width:241px) and (max-device-width:320px){
ãã selector{ ... }
ãã}
ãã/* for 480 px width screen */
ãã@media only screen (min-device-width:321px)and (max-device-width:480px){
ããselector{ ... }
ãã}
éç¨äºå¸å±çMedia Queriesï¼è¿éå¨é©¬æµ·ç¥¥å客ä¸æ们就ä¸åå详述ï¼æå
´è¶£çè¯ï¼å¯éè¿å®æ¹ææ¡£è¿ä¸æ¥äºè§£ã
3ãè¡¨æ ¼(table)çååºå¼å¤ç
é£ä¹å¯¹äºè¡¨æ ¼(table)çååºå¼å¤ç该æ¯ææ ·çå¢ï¼æ们该å¦ä½çªç ´Tableçå±éæ§å¢ï¼æ¥ä¸æ¥æ们æ¥äºè§£ä»¥ä¸çå ç§éå¯¹è¡¨æ ¼ååºå¼å¤ççæ¹æ³ï¼
ï¼1ï¼ãéèä¸éè¦æ°æ®å
å¤çåï¼
ï¼ç¹å»æ¥ç大å¾ï¼
å¤çåï¼
å®ç°æ¹æ³ä»£ç ï¼
@media only screen and (max-width: 800px) {
ããtable td:nth-child(2),
ããtable th:nth-child(2) {display: none;}
ãã}
ãã@media only screen and (max-width: 640px) {
ããtable td:nth-child(4),
ãã table th:nth-child(4),
ããtable td:nth-child(7),
ãã table th:nth-child(7),
ããtable td:nth-child(8),
ãã th:nth-child(8){display: none;}
ãã}
以ç¨æ·è§åº¦æèï¼æ¯ä¸ªäººå¯¹æ°æ®ç认ç¥ä¸åï¼æè®¸ä½ éèçæ°æ®å¯¹äºä»å´æ¯å¾éè¦çï¼æ以对äºè¿ç§æ¹æ³é©¬æµ·ç¥¥å¹¶ä¸æ¨èã
ï¼2ï¼ãå¤å横åå2å纵å
å¤çåï¼
å¤çåï¼
å®ç°æ¹æ³ï¼<thead>å®ä½éèï¼<td>ååå
ç´ ï¼å¹¶ç»å®å¯¹åº<th>ååï¼ç¶åç¨ä¼ªå
ç´ çcontent:attr(data-th)å®ç°<th>ï¼
ï¼3ï¼ãåºå®é¦åï¼å©ä½å横åæ»å¨
å¤çåï¼
å¤çåï¼
å®ç°åç代ç ï¼
thead {float:left;}
ããtbody {display:block;width:auto;overflow-x:auto;}
äºãååºå¼å
容
1ãååºå¼å¾ç
带宽æ¯ææºç»ç«¯ç硬伤ï¼å¦ææ们åªæ¯é¡µé¢å¸å±åäºååºå¼å¤çï¼å¨æ们ç¨ææºè®¿é®æ¶ï¼è¯·æ±çå¾çè¿æ¯PCä¸ç大å¾ï¼æ件ä½ç§¯å¤§ï¼æ¶èæµéå¤ï¼è¯·æ±å»¶æ¶é¿ï¼å æ¤å¯¼è´çé®é¢ä¹æ¯ä¸å¯ä¼°éçãé£ä¹æ们就å¾æå¾çä¹å¤çæååºå¼çæ ¹æ®ç»ç«¯ç±»å尺寸å辨çæ¥éé
åºåççå¾å½¢ã
å¤çåçï¼æµè§å¨è·åç¨æ·ç»ç«¯çå±å¹å°ºå¯¸ãå辨çé»è¾å¤çåè¾åºéåºçå¾çï¼å¦å±å¹å辨ç320*480ï¼é£ä¹æ们å¹é
ç»å®çæ¯å®½åº¦åºå°äº320pxçå¾çãå¦æç»ç«¯å±å¹çDPI(device pixels)DPI详解å¼å¾é«ï¼ä¹å°±æ¯é«æ¸
å±ï¼é£ä¹æ们就å¾è¾åº2åå辨ççå¾å½¢(宽:640px)ï¼ä»¥ä¿è¯å¨é«æ¸
å±ä¸å¾å½¢çæ¸
æ°åº¦ãåç§ç§»å¨ç»ç«¯çå±å¹åæ°å¯éè¿
http://screensiz.es/phoneæ¥è¯¢ã
解å³æ¹æ¡ï¼å
¶å®W3Cå·²ç»æä¸ä¸ªç¨äºååºå¼å¾å½¢çèæ¡ï¼æ°å®ä¹æ ç¾<picture>ï¼å 为å®è¿åªæ¯èæ¡ï¼ç®åè¿æ²¡ææ¯æçæµè§å¨ï¼æå¾
å¨ä¸ä¹
çæªæ¥æ们è½ç¨ä¸ãè½ç¶ç®åä¸æ¯æï¼ä½æ们è¿æ¯æ¥äºè§£ä¸ï¼ä¸ºä¹åçå
容å个éºå«ã
<picture>æ¯ä¸ä¸ªå¾å½¢elementï¼å
容ç±å¤ä¸ªæºå¾ç»æï¼å¹¶ç±CSS Media Queriesæ¥éé
åºåçå¾å½¢ï¼ä»£ç è§èå¦ä¸ï¼
<picture width="500" height="500">
ã<source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
ã<source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x">
ã<source srcset="small-1.jpg 1x, small-2.jpg 2x">
ã<img src="small-1.jpg" alt="">
ã<p>Accessible text</p>
ã<!-- Fallback content-->
ã<noscript>
ã<img src="external/imgs/small.jpg" alt="Team photo">
ã</noscript>
ãã</picture>
注ï¼source: ä¸ä¸ªå¾çæºï¼
ããmedia: åªä½æ¥è¯¢ï¼ç¨äºéé
å±å¹å°ºå¯¸ï¼
ããsrcset: å¾çé¾æ¥ï¼1xéåºæ®éå±ï¼2xéåºé«æ¸
å±ï¼
ãã<noscript/>: å½æµè§å¨ä¸æ¯æèæ¬æ¶çä¸ä¸ªæ¿ä»£æ¹æ¡ï¼
ãã<img/>: åå§å¾çï¼å¦å¤è¿æä¸ä¸ªæ éç¢ææ¬ï¼ç±»ä¼¼<img/>çaltå±æ§ã
è½ç¶<picture>ç®åè¿ä¸æ¯æï¼ä½å®çåçæ们æ¯å¯åé´çï¼æ以就è¯çäºä¸ä¸ªç¨äºå¾çååºå¼å¤ççç±»åºPicturefill
<span data-picture data-alt="å¾çæè¿°ææ¬">
ã<span data-src="small.jpg"></span>
ã<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
ã<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
ã<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
ã<!-- æµè§å¨ä¸æ¯æJSæ¶çå¤ç¨æ¹æ¡. -->
ã<noscript>
ã<img src="external/imgs/small.jpg" alt="å¾çæè¿°ææ¬">
ã</noscript>
ãã</span>
å
¶åçå°±æ¯JSè·åSourceçæºä»¥åCSS Media Queriesè§åï¼è¾åºéåºå¾çï¼é»è¾ç»èè¿éä¸å解æï¼æå
´è¶£çå¯æ¥çå
¶JS代ç ï¼é»è¾ä¸æ¯å¾å¤æï¼ä¹å¯ä»¥èªå·±å°è£
ä¸ä¸ªç±»åºï¼ä»¥éç¨äºèªèº«äº§åï¼ä¾å¦å¾çå 载失败çæ¿ä»£æ¹æ¡ã
å½ç¶ï¼å¨æªæ¥çCSS Image Level 4ä¸å·²ç»å®ç°äºååºå¼å¾ççåçè¯æ³ï¼image-set
<image-set> = image-set([ <image-set-decl>, ]* [ <image-set-decl> | <color>])
ãã<image-set-decl> = [ <image> | <string> ] <resolution>
é£ä¹æ们çååºå¼å¾çå¯ä»¥è¿æ ·éåäº
background-image:url(default.jpg); /* æ®éå¹ */
ããbackground-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x); /* Retinaé«æ¸
å± */
注ï¼Webkit ç®ååªå®ç°äº url() å½¢å¼çåå¼ï¼ä¸dppxå¼åè´å¼[-2x]è²ä¼¼ä¹æ¯åæ³çã
å½ç¶é¤æ¤ä¹å¤ï¼è¿æå
¶ä»çååºå¼å¤çï¼å¦æå¡ç«¯user-agentå
æ¢ã
2ãé«å辨ç(DPI)ä¸çååºå¼å¤ç
ï¼1ï¼ãSVGï¼ä¼ç¹å¯æ¿è½½è²å½©ä¸°å¯ã设计å¤æå¾å½¢ï¼ä¸æ¸²æä¸ä¼åºç°è¾¹ç¼ä¸é¡ºæ»ï¼ç¼ºç¹æ¯IEçæ¯æä¸å®ç¾ã
ï¼2ï¼ãIcon fontsï¼æ¯æå¤æµè§å¨ï¼å¾å½¢é¢è²å¤§å°çä¿®æ¹ææ¬ä½ï¼æäºç»´æ¤ï¼å¾å½¢è¡¨ç°åä¸ï¼ä¸æ¯æè²å½©ä¸°å¯ä¸å¤æçå¾å½¢ï¼IE6渲æææ¯è¾¹ã
ï¼3ï¼ã-webkit-image-set:åªæ¯æå个å¾å½¢çéé
ï¼ä¸å©äºå¾å½¢å并ï¼å
¼å®¹ä¸å®ç¾ï¼Safari 6+, Chrome 21+ï¼ã
JSæ£æµï¼var retina = window.devicePixelRatio > 1;
CSS Media Query:
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
ãã(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
ãã(min-resolution: 2dppx), /* The standard way */
ãã(min-resolution: 192dpi) /* dppx fallback */
3ãé«å辨çä¸ç1px border
ç±äºé«æ¸
å±çç¹æ§ï¼1pxæ¯ç±2Ã2个åç´ ç¹æ¥æ¸²æï¼é£ä¹æä»¬æ ·å¼ä¸çborder:1pxå¨Retinaå±ä¸ä¼æ¸²ææ2pxçè¾¹æ¡ï¼ä¸è®¾è®¡ç¨¿æåºå
¥ï¼ä¸ºäºè¿½æ±1pxç²¾åè¿åï¼æ们就ä¸å¾ä¸æ¿åºä¸ä¸ªå®ç¾ç解å³æ¹æ¡ã
å¨Photoshopä¸ï¼å¦æéè¦çä¼¼0.5pxçè¾¹æ¡ï¼å¸¸è§çæ¹æ³å°±æ¯å¯¹1pxè¾¹æ¡å ä¸é´å½±æ¨¡ç³1pxãåçï¼æ们å¨retinaå±ä¸éè¦åå°çå®ç1pxè¾¹æ¡ï¼å¯å©ç¨box-shadowå±æ§æ¨¡æã
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
ããonly screen and (min-device-pixel-ratio:1.5) {
ããbutton {
ããborder:none;
ããpadding:0 16px;
ããbox-shadow: inset 0 0 1px #000,
ããinset 0 1px 0 #75c2f8,
ãã0 1px 1px -1px rgba(0, 0, 0, .5);
ãã}
ãã}