需要做一个站点的主页,但是不确定打开网页的(电脑端)浏览器的分辨率大小。因为希望能达到最好的观赏效果,所以想做一个响应式网页。
想要的效果是除了(黑色背景的)文字能始终保持水平居中。
是需要依据不同分辨率做不同图片吗?还是有其他不用响应式设计的解决方案?
背景和文字(PNG)我可以分成两张图片的…
é»è®¤ä¸ä¸ªåºå®å®½åº¦ä¸º980pxçç½é¡µï¼å½æµè§å¨çªå£æ¯980pxå°çæ¶åï¼è¿ä¸ªå¸å±å°±å为100%æ¯å®½åº¦ç液æå¸å±ï¼èä¸æ¯åºå®å®½åº¦ãå½æµè§å¨çªå£å缩å°äº700pxçæ¶åï¼æ们就éè侧边æ ãå½çªå£å°äº480pxçæ¶åï¼æ¨ªå导èªæ¡éèï¼æ¢æç¹å»ä¸æææç导èªæ¡ã
å¦ä¸å¾ï¼ä»å·¦è³å³ä¾æ¬¡ä¸ºç§»å¨çæ¬â>å¹³æ¿çµèâ>æ¡é¢æµè§å¨çææã
1ãååºå¼ç½é¡µç»æ
é¦å ï¼æ们å æ¥çä¸ä¸é¢æ¡ä¾å±ç¤ºçhtmlç»æï¼å¦ä¸å¾æ示ï¼
å¯ä»¥è¯´è¿æ¯ä¸ä¸ªå¾å ¸åçå客模çç»æãä¸ä¸ªwrapper容å¨å å«äºå¤´é¨ãå 容ã侧æ ãåºé¨ã
2ãMetaæ ç¾
å ¶æ¬¡å°±éè¦æ们é对移å¨è®¾å¤å å ¥è¿ä¸ªmetaæ ç¾ãåè¯webkitå æ ¸æµè§å¨åå§ç¼©æ¾æ¯ä¾ä¸º1ãï¼å¾å¤iOSåAndroidçæµè§å¨é½æ¯åºäºwebkitå æ ¸çï¼
<meta name="viewport" content="width=device-width; initial-scale=1.0">
IE8æè æ´æ©çæµè§å¨å¹¶ä¸æ¯æMedia Queryãä½ å¯ä»¥ä½¿ç¨media-queries.jsæè respond.jsæ¥ä¸ºIEæ·»å Media Queryæ¯æã
<!--[if lt IE 8]>
ãã<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
ãã<![endif]-->
å¦æä½ çç½ç«é¡µé¢ä¸ç¨äºhtml5æ档声æï¼ç¨å°äºå¾å¤html5æ ç¾ï¼ä½æ¯è¿äºæ ç¾å¨ie9以ä¸çæ¬æ¯ä¸æ¯æçï¼æ以æä»¬å¿ é¡»å¼ç¨ä¸ä¸ªhtml5.jsæ件使å¾è¿äºæ ç¾è¢«å ¶å®ä½çæ¬æµè§å¨ç¡®è®¤ã
<!--[if lt IE 9]>
ãã<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
ãã<![endif]-->
3ãåªä»æ¥è¯¢-Media Queries
å¨è¿é马海祥就ä¸å详ç»ç讲æ£å¸¸é¡µé¢ä¸çå¸å±å¦ä½åäºãå¨æ¤ä¸»è¦è®²è§£ä¸åªä½æ¥è¯¢media queriesè¿ä¸ªcssç设计æè·¯ãè¿ä¸ªæ¯css3çå±æ§ï¼ä¹æ¯æ们è¿ä¸ªååºå¼ç½é¡µè®¾è®¡çæéè¦çé¨åãå¯ä»¥è¯´æ¯ååºå¼è®¾è®¡çæ ¸å¿ãå®æ ¹æ®æ¡ä»¶åè¯æµè§å¨å¦ä½ä¸ºæå®è§å¾å®½åº¦æ¸²æ页é¢ã
<link href="media_queries.css" rel="stylesheet" type="text/css">
ä¸é¢æ们ç¨CSS3çåªä»æ¥è¯¢ï¼Media Queryï¼ç¹æ§ä½¿å¾ç½é¡µéåºä¸å设å¤ï¼å³æ ¹æ®è®¾å¤çå辨çå缩æ¾èªå¨éæ°å¸å±ã
@media screen and (max-width: 480px) {
ããè¿éå°±æ¯éæ°è®¾å®ä¸äºcssçå±æ§
ãã}
ï¼1ï¼ãå½æµè§å¨è§å¾å®½åº¦ä¸ºå°äºçäº980åç´ æ¶ï¼å¦ä¸è§åå°ä¼çæãåºæ¬ä¸ï¼æä¼å°ææç容å¨å®½åº¦ä»åç´ å¼è®¾ç½®ä¸ºç¾åæ¯ä»¥ä½¿å¾å®¹å¨å¤§å°èªéåºã
#pagwraper { width: 94%;}éæ°è®¾å®å®¹å¨å®½åº¦ä¸º94%;
ãã#content { width: 65%; padding: 3% 4%;}éæ°è®¾å®å 容宽度为65%;
ãã#sidebar { width: 30%;}éæ°è®¾å®ä¾§è¾¹æ 宽度为30%
注æè¿éæ们ç¨å°äº%ï¼ä½¿å¾é¡µé¢æ¯ä¸ä¸ªæµä½å¸å±ã
ï¼2ï¼ãå½æµè§å¨è§å¾å®½åº¦ä¸ºå°äºçäº700åç´ æ¶ï¼è§å¾æå®#contentå#sidebarç宽度为èªéåºå¹¶ä¸æ¸ é¤æµ®å¨ï¼ä½¿å¾è¿äºå®¹å¨æå ¨å®½åº¦æ¾ç¤ºã
#content { width: auto;float: none;margin: 20px 0;}
ãã#sidebar { display:none; width: 100%; margin: 0; float: none; }
容å¨å®½åº¦ç»§æ¿äºä¸é¢94%ç宽度ï¼è¿ä¸ªæ¶åæ们设å®å 容宽度为èªå¨ï¼ä½¿å ¶å¡«æ»¡å¤é¨çwraper容å¨ãå¹¶æ¸ é¤å ¶æµ®å¨æ ·å¼ãè¿ä¸ªæ¶åçæµè§ç页é¢ï¼å¯ä»¥æè¡¡ä¸å³è¾¹ä¾§æ çéè¦ç¨åº¦ï¼å¦æè§å¾æå¿ è¦ç»§ç»å¨é¡µé¢ä¸æ¾ç¤ºï¼æ们å¯ä»¥æ¸ é¤å ¶æµ®å¨ï¼å¹¶æ宽度ä¹è®¾ä¸º100%ï¼è¿æ ·å°±å¨contentè¿ä¸ªå®¹å¨ä¸æ¾ç¤ºãä½é©¬æµ·ç¥¥è§çä¸è¬æ åµä¸ï¼å¨è¿ä¹å°çæµè§çªå£ä¸ï¼ç¨æ·åªæ³çå°æ主è¦çå 容ï¼å³è¾¹ä¾§æ æ为äºä¸ä¸ªè¡¥å©æ¨¡åï¼é£ä¹å¯ä»¥ç´æ¥æå®éèæãè¿æ ·å¯ä»¥åå°é¡µé¢çé«åº¦ã
ï¼3ï¼ãå½æµè§å¨çªå£å°äºçäº480pxçæ¶åï¼ä¸è¬è¿ä¸ªå°±æ¯iPhoneç横å宽度ãå°±è¦å°#headerå ç´ çé«åº¦è®¾ç½®ä¸ºèªéåºï¼å°h1çåä½å¤§å°ä¿®æ¹ä¸º24åç´ å¹¶éè侧边æ ã
é¦å æ们设计webkitå æ ¸æµè§å¨ä¸ç¦ç¨æå大å°è°æ´ï¼ä»£ç å¦ä¸ï¼
html { -webkit-text-size-adjust: none; }
å ¶æ¬¡å°±æ¯ä»£ç ç转æ¢äºï¼å¦ä¸å¾æ示ï¼
å ¶å®å¨480px宽度ä¸çæ¶åï¼æ´ä½æ¡æ¶å¸å±å·²ç»ä¸ç¨è®¾ç½®ï¼é©¬æµ·ç¥¥è®¤ä¸ºæ们åºè¯¥èèå¾æ´å¤çæ¯æä¹æä¸ä¸ªè¯å¥½ç页é¢å¸å±å±ç¤ºç»ç¨æ·ãèå¨è¿ä¸ªæ¨¡å¼ä¸ï¼å¦æ导èªæ¡æå¾å¤é项çæ¶åï¼å°±ä¼ç¸äºå å æ¢è¡ï¼é£ä¹è¿éæ们设计æç¹å»åºä¸æèåå½¢å¼ï¼å¦ä¸å¾æ示ï¼
è¿éæ们é¦å èèå¨å°è®¾å¤çªå£ä¸header太é«å·²ç»å æ®äºå¤§åçå±å¹æ¾ç¤ºï¼æ以è¿éæ们éæ°è®¾å®ä¸headerçé«åº¦ï¼è½å®æ´åç°åºè¿ä¸ªç«ç¹logoå°±å¯ä»¥äºãå¨480pxå°è®¾å¤çªå£ä¸æµè§ï¼é¡µé¢å 容ä¼å¾é¿ï¼è¿ä¸ªæ¶åæ们è¦å¨åºé¨å 个è¿å页é¢é¡¶é¨çæé®ã
å¦ä¸å¾ï¼ä»å·¦è³å³ä¾æ¬¡ä¸ºç§»å¨çæ¬â>å¹³æ¿çµèâ>æ¡é¢æµè§å¨çææã
1ãååºå¼ç½é¡µç»æ
é¦å ï¼æ们å æ¥çä¸ä¸é¢æ¡ä¾å±ç¤ºçhtmlç»æï¼å¦ä¸å¾æ示ï¼
å¯ä»¥è¯´è¿æ¯ä¸ä¸ªå¾å ¸åçå客模çç»æãä¸ä¸ªwrapper容å¨å å«äºå¤´é¨ãå 容ã侧æ ãåºé¨ã
2ãMetaæ ç¾
å ¶æ¬¡å°±éè¦æ们é对移å¨è®¾å¤å å ¥è¿ä¸ªmetaæ ç¾ãåè¯webkitå æ ¸æµè§å¨åå§ç¼©æ¾æ¯ä¾ä¸º1ãï¼å¾å¤iOSåAndroidçæµè§å¨é½æ¯åºäºwebkitå æ ¸çï¼
<meta name="viewport" content="width=device-width; initial-scale=1.0">
IE8æè æ´æ©çæµè§å¨å¹¶ä¸æ¯æMedia Queryãä½ å¯ä»¥ä½¿ç¨media-queries.jsæè respond.jsæ¥ä¸ºIEæ·»å Media Queryæ¯æã
<!--[if lt IE 8]>
ãã<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
ãã<![endif]-->
å¦æä½ çç½ç«é¡µé¢ä¸ç¨äºhtml5æ档声æï¼ç¨å°äºå¾å¤html5æ ç¾ï¼ä½æ¯è¿äºæ ç¾å¨ie9以ä¸çæ¬æ¯ä¸æ¯æçï¼æ以æä»¬å¿ é¡»å¼ç¨ä¸ä¸ªhtml5.jsæ件使å¾è¿äºæ ç¾è¢«å ¶å®ä½çæ¬æµè§å¨ç¡®è®¤ã
<!--[if lt IE 9]>
ãã<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
ãã<![endif]-->
3ãåªä»æ¥è¯¢-Media Queries
å¨è¿é马海祥就ä¸å详ç»ç讲æ£å¸¸é¡µé¢ä¸çå¸å±å¦ä½åäºãå¨æ¤ä¸»è¦è®²è§£ä¸åªä½æ¥è¯¢media queriesè¿ä¸ªcssç设计æè·¯ãè¿ä¸ªæ¯css3çå±æ§ï¼ä¹æ¯æ们è¿ä¸ªååºå¼ç½é¡µè®¾è®¡çæéè¦çé¨åãå¯ä»¥è¯´æ¯ååºå¼è®¾è®¡çæ ¸å¿ãå®æ ¹æ®æ¡ä»¶åè¯æµè§å¨å¦ä½ä¸ºæå®è§å¾å®½åº¦æ¸²æ页é¢ã
<link href="media_queries.css" rel="stylesheet" type="text/css">
ä¸é¢æ们ç¨CSS3çåªä»æ¥è¯¢ï¼Media Queryï¼ç¹æ§ä½¿å¾ç½é¡µéåºä¸å设å¤ï¼å³æ ¹æ®è®¾å¤çå辨çå缩æ¾èªå¨éæ°å¸å±ã
@media screen and (max-width: 480px) {
ããè¿éå°±æ¯éæ°è®¾å®ä¸äºcssçå±æ§
ãã}
ï¼1ï¼ãå½æµè§å¨è§å¾å®½åº¦ä¸ºå°äºçäº980åç´ æ¶ï¼å¦ä¸è§åå°ä¼çæãåºæ¬ä¸ï¼æä¼å°ææç容å¨å®½åº¦ä»åç´ å¼è®¾ç½®ä¸ºç¾åæ¯ä»¥ä½¿å¾å®¹å¨å¤§å°èªéåºã
#pagwraper { width: 94%;}éæ°è®¾å®å®¹å¨å®½åº¦ä¸º94%;
ãã#content { width: 65%; padding: 3% 4%;}éæ°è®¾å®å 容宽度为65%;
ãã#sidebar { width: 30%;}éæ°è®¾å®ä¾§è¾¹æ 宽度为30%
注æè¿éæ们ç¨å°äº%ï¼ä½¿å¾é¡µé¢æ¯ä¸ä¸ªæµä½å¸å±ã
ï¼2ï¼ãå½æµè§å¨è§å¾å®½åº¦ä¸ºå°äºçäº700åç´ æ¶ï¼è§å¾æå®#contentå#sidebarç宽度为èªéåºå¹¶ä¸æ¸ é¤æµ®å¨ï¼ä½¿å¾è¿äºå®¹å¨æå ¨å®½åº¦æ¾ç¤ºã
#content { width: auto;float: none;margin: 20px 0;}
ãã#sidebar { display:none; width: 100%; margin: 0; float: none; }
容å¨å®½åº¦ç»§æ¿äºä¸é¢94%ç宽度ï¼è¿ä¸ªæ¶åæ们设å®å 容宽度为èªå¨ï¼ä½¿å ¶å¡«æ»¡å¤é¨çwraper容å¨ãå¹¶æ¸ é¤å ¶æµ®å¨æ ·å¼ãè¿ä¸ªæ¶åçæµè§ç页é¢ï¼å¯ä»¥æè¡¡ä¸å³è¾¹ä¾§æ çéè¦ç¨åº¦ï¼å¦æè§å¾æå¿ è¦ç»§ç»å¨é¡µé¢ä¸æ¾ç¤ºï¼æ们å¯ä»¥æ¸ é¤å ¶æµ®å¨ï¼å¹¶æ宽度ä¹è®¾ä¸º100%ï¼è¿æ ·å°±å¨contentè¿ä¸ªå®¹å¨ä¸æ¾ç¤ºãä½é©¬æµ·ç¥¥è§çä¸è¬æ åµä¸ï¼å¨è¿ä¹å°çæµè§çªå£ä¸ï¼ç¨æ·åªæ³çå°æ主è¦çå 容ï¼å³è¾¹ä¾§æ æ为äºä¸ä¸ªè¡¥å©æ¨¡åï¼é£ä¹å¯ä»¥ç´æ¥æå®éèæãè¿æ ·å¯ä»¥åå°é¡µé¢çé«åº¦ã
ï¼3ï¼ãå½æµè§å¨çªå£å°äºçäº480pxçæ¶åï¼ä¸è¬è¿ä¸ªå°±æ¯iPhoneç横å宽度ãå°±è¦å°#headerå ç´ çé«åº¦è®¾ç½®ä¸ºèªéåºï¼å°h1çåä½å¤§å°ä¿®æ¹ä¸º24åç´ å¹¶éè侧边æ ã
é¦å æ们设计webkitå æ ¸æµè§å¨ä¸ç¦ç¨æå大å°è°æ´ï¼ä»£ç å¦ä¸ï¼
html { -webkit-text-size-adjust: none; }
å ¶æ¬¡å°±æ¯ä»£ç ç转æ¢äºï¼å¦ä¸å¾æ示ï¼
å ¶å®å¨480px宽度ä¸çæ¶åï¼æ´ä½æ¡æ¶å¸å±å·²ç»ä¸ç¨è®¾ç½®ï¼é©¬æµ·ç¥¥è®¤ä¸ºæ们åºè¯¥èèå¾æ´å¤çæ¯æä¹æä¸ä¸ªè¯å¥½ç页é¢å¸å±å±ç¤ºç»ç¨æ·ãèå¨è¿ä¸ªæ¨¡å¼ä¸ï¼å¦æ导èªæ¡æå¾å¤é项çæ¶åï¼å°±ä¼ç¸äºå å æ¢è¡ï¼é£ä¹è¿éæ们设计æç¹å»åºä¸æèåå½¢å¼ï¼å¦ä¸å¾æ示ï¼
è¿éæ们é¦å èèå¨å°è®¾å¤çªå£ä¸header太é«å·²ç»å æ®äºå¤§åçå±å¹æ¾ç¤ºï¼æ以è¿éæ们éæ°è®¾å®ä¸headerçé«åº¦ï¼è½å®æ´åç°åºè¿ä¸ªç«ç¹logoå°±å¯ä»¥äºãå¨480pxå°è®¾å¤çªå£ä¸æµè§ï¼é¡µé¢å 容ä¼å¾é¿ï¼è¿ä¸ªæ¶åæ们è¦å¨åºé¨å 个è¿å页é¢é¡¶é¨çæé®ã
温馨提示:答案为网友推荐,仅供参考
第1个回答 2015-05-22
如果单纯考虑居中问题。。应该不需要响应式。
不过先考虑一下你的图片的最小尺寸是多少。比如你的希望的最小分辨率是800x600的,而图片正好是800以内,那你直接把图片当作背景来处理就行了。
background:url(xx.jpg) center top no-repeat;
这样图片就是 一直居中的
如果图片超出800你还想让图片全部展示并居中,要么将其当作前景图(img),要么通过css3来处理。本回答被提问者和网友采纳
不过先考虑一下你的图片的最小尺寸是多少。比如你的希望的最小分辨率是800x600的,而图片正好是800以内,那你直接把图片当作背景来处理就行了。
background:url(xx.jpg) center top no-repeat;
这样图片就是 一直居中的
如果图片超出800你还想让图片全部展示并居中,要么将其当作前景图(img),要么通过css3来处理。本回答被提问者和网友采纳