ä¸é¢å°±åè¯å¤§å®¶å¦ä½è§£å³ã
1. 使ç¨HTMLä¸çviewportæ¥å®ç°
viewportè¯æ³å¦ä¸ï¼
HTML代ç
<!--å¨html代ç ç<head>...</head>ä¸åµå ¥ä¸é¢ä»£ç -->width
æ§å¶ viewport ç大å°ï¼å¯ä»¥æå®çä¸ä¸ªå¼æè ç¹æ®çå¼ï¼å¦ device-width 为设å¤ç宽度ï¼åä½ä¸ºç¼©æ¾ä¸º 100% æ¶ç CSS çåç´ ï¼ã
height
å width ç¸å¯¹åºï¼æå®é«åº¦ã
initial-scale
åå§ç¼©æ¾ãå³é¡µé¢åå§ç¼©æ¾ç¨åº¦ãè¿æ¯ä¸ä¸ªæµ®ç¹å¼ï¼æ¯é¡µé¢å¤§å°çä¸ä¸ªä¹æ°ãä¾å¦ï¼å¦æä½ è®¾ç½®åå§ç¼©æ¾ä¸ºâ1.0âï¼é£ä¹ï¼web页é¢å¨å±ç°çæ¶åå°±ä¼ä»¥target densityå辨çç1:1æ¥å±ç°ãå¦æä½ è®¾ç½®ä¸ºâ2.0âï¼é£ä¹è¿ä¸ªé¡µé¢å°±ä¼æ¾å¤§ä¸º2åã
maximum-scale
æ大缩æ¾ãå³å 许çæ大缩æ¾ç¨åº¦ãè¿ä¹æ¯ä¸ä¸ªæµ®ç¹å¼ï¼ç¨ä»¥æåºé¡µé¢å¤§å°ä¸å±å¹å¤§å°ç¸æ¯çæ大ä¹æ°ãä¾å¦ï¼å¦æä½ å°è¿ä¸ªå¼è®¾ç½®ä¸ºâ2.0âï¼é£ä¹è¿ä¸ªé¡µé¢ä¸target sizeç¸æ¯ï¼æå¤è½æ¾å¤§2åã
user-scalable
ç¨æ·è°æ´ç¼©æ¾ãå³ç¨æ·æ¯å¦è½æ¹å页é¢ç¼©æ¾ç¨åº¦ãå¦æ设置为yesåæ¯å 许ç¨æ·å¯¹å ¶è¿è¡æ¹åï¼åä¹ä¸ºnoãé»è®¤å¼æ¯yesãå¦æä½ å°å ¶è®¾ç½®ä¸ºnoï¼é£ä¹minimum-scale å maximum-scaleé½å°è¢«å¿½ç¥ï¼å ä¸ºæ ¹æ¬ä¸å¯è½ç¼©æ¾ã
(设置å±å¹å®½åº¦ä¸ºè®¾å¤å®½åº¦ï¼ç¦æ¢ç¨æ·æå¨è°æ´ç¼©æ¾)
HTML代ç
<meta name="viewport" content="width=device-width,user-scalable=no" />(设置å±å¹å¯åº¦ä¸ºé«é¢ï¼ä¸é¢ï¼ä½é¢èªå¨ç¼©æ¾ï¼ç¦æ¢ç¨æ·æå¨è°æ´ç¼©æ¾)
HTML代ç
<meta注ï¼1). ææç缩æ¾å¼é½å¿ é¡»å¨0.01â10çèå´ä¹å ã
2). minimum-scaleãmaximum-scaleè¦ä¹åå¼ï¼è¦ä¸çè¿ä¸¤ä¸ª
2. ä¸ä½¿ç¨ç»å¯¹å®½åº¦
ç±äºç½é¡µä¼æ ¹æ®å±å¹å®½åº¦è°æ´å¸å±ï¼æ以ä¸è½ä½¿ç¨ç»å¯¹å®½åº¦çå¸å±ï¼ä¹ä¸è½ä½¿ç¨å
·æç»å¯¹å®½åº¦çå
ç´ ãè¿ä¸æ¡é常éè¦ã
å
·ä½è¯´ï¼CSS代ç ä¸è½æå®åç´ å®½åº¦ï¼
ããwidth:xxx px;
åªè½æå®ç¾åæ¯å®½åº¦ï¼
ããwidth: xx%;
æè
ããwidth:auto;
3. CSSç@mediaè§å
åä¸ä¸ªCSSæ件ä¸ï¼ä¹å¯ä»¥æ ¹æ®ä¸åçå±å¹å辨çï¼éæ©åºç¨ä¸åçCSSè§åã
HTML代ç
@media screen and (max-device-width: 400px) {ä¸é¢ç代ç æææ¯ï¼å¦æå±å¹å®½åº¦å°äº400åç´ ï¼åcolumnååæ¶æµ®å¨ï¼float:noneï¼ã宽度èªå¨è°èï¼width:autoï¼ï¼sidebaråä¸æ¾ç¤ºï¼display:noneï¼ã
4. æµå¨å¸å±
å个åºåçä½ç½®é½æ¯æµ®å¨çï¼ä¸æ¯åºå®ä¸åçã
HTML代ç
ã.main {
floatç好å¤æ¯ï¼å¦æ宽度太å°ï¼æ¾ä¸ä¸ä¸¤ä¸ªå
ç´ ï¼åé¢çå
ç´ ä¼èªå¨æ»å¨å°åé¢å
ç´ çä¸æ¹ï¼ä¸ä¼å¨æ°´å¹³æ¹åoverflowï¼æº¢åºï¼ï¼é¿å
äºæ°´å¹³æ»å¨æ¡çåºç°ã
å¦å¤ï¼ç»å¯¹å®ä½ï¼position: absoluteï¼ç使ç¨ï¼ä¹è¦é常å°å¿ã
5. å¾ççèªéåº
å¾çç宽度åé«åº¦è¦æç¾åæ¯æ¥è®¾å®ï¼åä¸ä¸å¯ä»¥è®¾å®æåºå®å¤§å°ã
HTML代ç
<img width="95%" src="" alt="" />能给个演示代码不?
追答真外行,这也能采纳,viewport都告诉你了,一找一大把资料。。
字数不够我打空格的,能给个演示列子吗,比如:"百度知道 百度知道"这句话显示为一排,适应各种分辨率大小的屏幕,字体大小20PX
追答如果要做适应各种分辨率大小的屏幕,字体大小就不能用px,6vmin是根据你的效果图上字体的大小来进行调整。
.test{ font-size:6vmin; }
演示列子演示列子
这个代码在微信里用不了啊,可以加我吗
本回答被提问者和网友采纳