建议å±å¼é 读
æ°äººå¦ææ³å¿«éå¼ååºååºå¼ç½ç«å»ºè®®ä½¿ç¨ååºå¼æ¡æ¶Bootstrap,Foundationçç......
ä¸ä¸ªé¨å[Viewport][ç½æ ¼è§å¾][åªä½æ¥è¯¢]
1.å å¨headéé¢è®¾ç½®Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">ç¨æ·å¯ä»¥éè¿å¹³ç§»å缩æ¾æ¥çç½é¡µçä¸åé¨åã
2.å¾å¤ååºå¼é½åºäºç½æ ¼è§å¾è®¾è®¡
ååºå¼ç½æ ¼è§å¾éå¸¸æ¯ 12 åï¼å®½åº¦ä¸º100%ï¼å¨ç½é¡µèªå¨ä¼¸ç¼©
æ¯å¦CSSéé¢å
è¿æ ·å³å¯å¨htmlå
<div class="row">è¾¾å°ç®åçååºå¼ææ[ææ½æµè§å¨å¤§å°æ¥ç]
å¾çååºå¼æ¹æ³
div {background-size å±æ§è®¾ç½®ä¸º "contain", å¾çæ¯ä¾ä¼èªå¨ç¼©æ¾ã
3.åªä½æ¥è¯¢ä¸»è¦ç¨äºé对ä¸åçåªä½ç±»åå®ä¹ä¸åçæ ·å¼
æ¯å¦æå¨çµèæ¾ç¤ºå¾ç1,ä½æ¯å¨ææºæ¾ç¤ºçæ¯å¾ç2
详ç»å¯ä»¥ç§ä¿¡æ