1.é¦å
ï¼å¨ç½é¡µä»£ç ç头é¨ï¼å å
¥ä¸è¡viewportå
æ ç¾ã
viewportæ¯ç½é¡µé»è®¤ç宽度åé«åº¦ï¼ä¸é¢è¿è¡ä»£ç çæææ¯ï¼ç½é¡µå®½åº¦é»è®¤çäºå±å¹å®½åº¦ï¼width=device-widthï¼ï¼åå§ç¼©æ¾æ¯ä¾ï¼initial-scale=1ï¼ä¸º1.0ï¼å³ç½é¡µåå§å¤§å°å å±å¹é¢ç§¯ç100%ã
ææ主æµæµè§å¨é½æ¯æè¿ä¸ªè®¾ç½®ï¼å
æ¬IE9ï¼å¯¹äºé£äºèå¼æµè§å¨ï¼ä¸»è¦æ¯IE6ã7ã8ï¼ï¼éè¦ä½¿ç¨css3-mediaqueries.jsã
2ãä¸ä½¿ç¨ç»å¯¹å®½åº¦ç±äºç½é¡µä¼æ ¹æ®å±å¹å®½åº¦è°æ´å¸å±ï¼æ以ä¸è½ä½¿ç¨ç»å¯¹å®½åº¦çå¸å±ï¼ä¹ä¸è½ä½¿ç¨å
·æç»å¯¹å®½åº¦çå
ç´ ãè¿ä¸æ¡é常éè¦ãå
·ä½è¯´ï¼CSS代ç ä¸è½æå®åç´ å®½åº¦ï¼width:xxx px;
åªè½æå®ç¾åæ¯å®½åº¦ï¼width: xx%;æè
width:auto;
3ãç¸å¯¹å¤§å°çåä½
åä½ä¹ä¸è½ä½¿ç¨ç»å¯¹å¤§å°ï¼pxï¼ï¼èåªè½ä½¿ç¨ç¸å¯¹å¤§å°ï¼emï¼ã
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
ä¸é¢ç代ç æå®ï¼åä½å¤§å°æ¯é¡µé¢é»è®¤å¤§å°ç100%ï¼å³16åç´ ã
h1 {
font-size: 1.5em;
}
ç¶åï¼h1ç大å°æ¯é»è®¤å¤§å°ç1.5åï¼å³24åç´ ï¼24/16=1.5ï¼ã
small {
font-size: 0.875em;
}
smallå
ç´ ç大å°æ¯é»è®¤å¤§å°ç0.875åï¼å³14åç´ ï¼14/16=0.875ï¼ã
温馨提示:答案为网友推荐,仅供参考