如题所述
âèªéåºç½é¡µè®¾è®¡âå°åºæ¯æä¹åå°çï¼å
¶å®å¹¶ä¸é¾ã
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ï¼ã
ä¸ãæµå¨å¸å±ï¼fluid gridï¼
âæµå¨å¸å±âçå«ä¹æ¯ï¼å个åºåçä½ç½®é½æ¯æµ®å¨çï¼ä¸æ¯åºå®ä¸åçã
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
floatç好å¤æ¯ï¼å¦æ宽度太å°ï¼æ¾ä¸ä¸ä¸¤ä¸ªå ç´ ï¼åé¢çå ç´ ä¼èªå¨æ»å¨å°åé¢å ç´ çä¸æ¹ï¼ä¸ä¼å¨æ°´å¹³æ¹åoverflowï¼æº¢åºï¼ï¼é¿å äºæ°´å¹³æ»å¨æ¡çåºç°ã
å¦å¤ï¼ç»å¯¹å®ä½ï¼position: absoluteï¼ç使ç¨ï¼ä¹è¦é常å°å¿ã
åãéæ©å è½½CSS
âèªéåºç½é¡µè®¾è®¡âçæ ¸å¿ï¼å°±æ¯CSS3å¼å ¥çMedia Query模åã
å®çææå°±æ¯ï¼èªå¨æ¢æµå±å¹å®½åº¦ï¼ç¶åå è½½ç¸åºçCSSæ件ã
ä¸é¢ç代ç æææ¯ï¼å¦æå±å¹å®½åº¦å°äº400åç´ ï¼max-device-width: 400pxï¼ï¼å°±å è½½tinyScreen.cssæ件ã
å¦æå±å¹å®½åº¦å¨400åç´ å°600åç´ ä¹é´ï¼åå è½½smallScreen.cssæ件ã
é¤äºç¨htmlæ ç¾å è½½CSSæ件ï¼è¿å¯ä»¥å¨ç°æCSSæ件ä¸å è½½ã
äºãCSSç@mediaè§å
åä¸ä¸ªCSSæ件ä¸ï¼ä¹å¯ä»¥æ ¹æ®ä¸åçå±å¹å辨çï¼éæ©åºç¨ä¸åçCSSè§åã
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
ä¸é¢ç代ç æææ¯ï¼å¦æå±å¹å®½åº¦å°äº400åç´ ï¼åcolumnååæ¶æµ®å¨ï¼float:noneï¼ã宽度èªå¨è°èï¼width:autoï¼ï¼sidebaråä¸æ¾ç¤ºï¼display:noneï¼ã
å ãå¾ççèªéåºï¼fluid imageï¼
é¤äºå¸å±åææ¬ï¼âèªéåºç½é¡µè®¾è®¡âè¿å¿ é¡»å®ç°å¾ççèªå¨ç¼©æ¾ã
è¿åªè¦ä¸è¡CSS代ç ï¼
img { max-width: 100%;}
è¿è¡ä»£ç 对äºå¤§å¤æ°åµå ¥ç½é¡µçè§é¢ä¹ææï¼æ以å¯ä»¥åæï¼
img, object { max-width: 100%;}
èçæ¬çIEä¸æ¯æmax-widthï¼æ以åªå¥½åæï¼
img { width: 100%; }
æ¤å¤ï¼windowså¹³å°ç¼©æ¾å¾çæ¶ï¼å¯è½åºç°å¾å失çç°è±¡ãè¿æ¶ï¼å¯ä»¥å°è¯ä½¿ç¨IEçä¸æå½ä»¤ï¼
img { -ms-interpolation-mode: bicubic; }
æè ï¼Ethan MarcotteçimgSizer.jsã
addLoadEvent(function() {
var imgs = document.getElementById(âcontentâ).getElementsByTagName(âimgâ);
imgSizer.collate(imgs);
});
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ï¼ã
ä¸ãæµå¨å¸å±ï¼fluid gridï¼
âæµå¨å¸å±âçå«ä¹æ¯ï¼å个åºåçä½ç½®é½æ¯æµ®å¨çï¼ä¸æ¯åºå®ä¸åçã
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
floatç好å¤æ¯ï¼å¦æ宽度太å°ï¼æ¾ä¸ä¸ä¸¤ä¸ªå ç´ ï¼åé¢çå ç´ ä¼èªå¨æ»å¨å°åé¢å ç´ çä¸æ¹ï¼ä¸ä¼å¨æ°´å¹³æ¹åoverflowï¼æº¢åºï¼ï¼é¿å äºæ°´å¹³æ»å¨æ¡çåºç°ã
å¦å¤ï¼ç»å¯¹å®ä½ï¼position: absoluteï¼ç使ç¨ï¼ä¹è¦é常å°å¿ã
åãéæ©å è½½CSS
âèªéåºç½é¡µè®¾è®¡âçæ ¸å¿ï¼å°±æ¯CSS3å¼å ¥çMedia Query模åã
å®çææå°±æ¯ï¼èªå¨æ¢æµå±å¹å®½åº¦ï¼ç¶åå è½½ç¸åºçCSSæ件ã
ä¸é¢ç代ç æææ¯ï¼å¦æå±å¹å®½åº¦å°äº400åç´ ï¼max-device-width: 400pxï¼ï¼å°±å è½½tinyScreen.cssæ件ã
å¦æå±å¹å®½åº¦å¨400åç´ å°600åç´ ä¹é´ï¼åå è½½smallScreen.cssæ件ã
é¤äºç¨htmlæ ç¾å è½½CSSæ件ï¼è¿å¯ä»¥å¨ç°æCSSæ件ä¸å è½½ã
äºãCSSç@mediaè§å
åä¸ä¸ªCSSæ件ä¸ï¼ä¹å¯ä»¥æ ¹æ®ä¸åçå±å¹å辨çï¼éæ©åºç¨ä¸åçCSSè§åã
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
ä¸é¢ç代ç æææ¯ï¼å¦æå±å¹å®½åº¦å°äº400åç´ ï¼åcolumnååæ¶æµ®å¨ï¼float:noneï¼ã宽度èªå¨è°èï¼width:autoï¼ï¼sidebaråä¸æ¾ç¤ºï¼display:noneï¼ã
å ãå¾ççèªéåºï¼fluid imageï¼
é¤äºå¸å±åææ¬ï¼âèªéåºç½é¡µè®¾è®¡âè¿å¿ é¡»å®ç°å¾ççèªå¨ç¼©æ¾ã
è¿åªè¦ä¸è¡CSS代ç ï¼
img { max-width: 100%;}
è¿è¡ä»£ç 对äºå¤§å¤æ°åµå ¥ç½é¡µçè§é¢ä¹ææï¼æ以å¯ä»¥åæï¼
img, object { max-width: 100%;}
èçæ¬çIEä¸æ¯æmax-widthï¼æ以åªå¥½åæï¼
img { width: 100%; }
æ¤å¤ï¼windowså¹³å°ç¼©æ¾å¾çæ¶ï¼å¯è½åºç°å¾å失çç°è±¡ãè¿æ¶ï¼å¯ä»¥å°è¯ä½¿ç¨IEçä¸æå½ä»¤ï¼
img { -ms-interpolation-mode: bicubic; }
æè ï¼Ethan MarcotteçimgSizer.jsã
addLoadEvent(function() {
var imgs = document.getElementById(âcontentâ).getElementsByTagName(âimgâ);
imgSizer.collate(imgs);
});
温馨提示:答案为网友推荐,仅供参考
第1个回答 2015-09-07
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)。本回答被网友采纳
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)。本回答被网友采纳
第2个回答 2014-10-28
在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。
方法:做一个网页解决问题
如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得"面目全非",那多令人沮丧!下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW)为例,列出几个网页制作初学者较常见的网页布局问题以及解决方法,希望对初学者们有所帮助。
一、消除任意缩放浏览器窗口对网页的影响
一番辛苦做出来的网页,在全屏状态下浏览一切正常。但在改变浏览窗口大小之后,网页就变得"不堪入目"了,这是个很值得注意的问题。
问题的根源还得从网页的布局说起,在DW中,网页内容的定位一般是通过表格来实现的,解决表格的问题也就成功了大半。本回答被提问者和网友采纳
方法:做一个网页解决问题
如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得"面目全非",那多令人沮丧!下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW)为例,列出几个网页制作初学者较常见的网页布局问题以及解决方法,希望对初学者们有所帮助。
一、消除任意缩放浏览器窗口对网页的影响
一番辛苦做出来的网页,在全屏状态下浏览一切正常。但在改变浏览窗口大小之后,网页就变得"不堪入目"了,这是个很值得注意的问题。
问题的根源还得从网页的布局说起,在DW中,网页内容的定位一般是通过表格来实现的,解决表格的问题也就成功了大半。本回答被提问者和网友采纳
第3个回答 2019-12-21
1、在网页头部加上这样一条meta标签:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
解释:
width=device-width :宽度等于设备屏幕的宽度
initial-scale=1.0:表示:初始的缩放比例
minimum-scale=0.5:表示:最小的缩放比例
maximum-scale=2.0:表示:最大的缩放比例
user-scalable=yes:表示:用户是否可以调整缩放比例
另外:如果想控制字体的大小的话,应该使用相对大小,可以用下面这段代码,一般不用也可,这里只是说明一种方法。
相对大小的字体
字体也不能使用绝对大小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)。
2、让网页适应不同的浏览器
浏览器的格局现在是两分天下,一分是IE,另一分是NetScape,在国内Ie有绝对的占有率,在这种情况下我们设计的网页只要兼容它就行了,但NetScape在国外还是有很多人使用,毕竟它是浏览器的元老。
虽然没有办法做出让所有浏览器都兼容的网站,但只要注意以下几点,做出来的网页在各个浏览器都中能达到比较好的显示效果:
a、不要混合使用层和表格排版,如果是父子关系,如层中表格,不在此原则范围内。
b、内联式的 CSS 在 Netscape Navigator 中经常会出现问题,使用链式或内嵌式。
c、有时需要在空层插入表格或者透明图片,以保证在 Netscape Navigator 里的效果。
d、对于只有几个像素宽度或高度的层,改用图片来实现。
e、避免使用 W3C 组织不推荐的排版属性,用 CSS 代替。
解释:
width=device-width :宽度等于设备屏幕的宽度
initial-scale=1.0:表示:初始的缩放比例
minimum-scale=0.5:表示:最小的缩放比例
maximum-scale=2.0:表示:最大的缩放比例
user-scalable=yes:表示:用户是否可以调整缩放比例
另外:如果想控制字体的大小的话,应该使用相对大小,可以用下面这段代码,一般不用也可,这里只是说明一种方法。
相对大小的字体
字体也不能使用绝对大小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)。
2、让网页适应不同的浏览器
浏览器的格局现在是两分天下,一分是IE,另一分是NetScape,在国内Ie有绝对的占有率,在这种情况下我们设计的网页只要兼容它就行了,但NetScape在国外还是有很多人使用,毕竟它是浏览器的元老。
虽然没有办法做出让所有浏览器都兼容的网站,但只要注意以下几点,做出来的网页在各个浏览器都中能达到比较好的显示效果:
a、不要混合使用层和表格排版,如果是父子关系,如层中表格,不在此原则范围内。
b、内联式的 CSS 在 Netscape Navigator 中经常会出现问题,使用链式或内嵌式。
c、有时需要在空层插入表格或者透明图片,以保证在 Netscape Navigator 里的效果。
d、对于只有几个像素宽度或高度的层,改用图片来实现。
e、避免使用 W3C 组织不推荐的排版属性,用 CSS 代替。
第4个回答 2015-08-30
用html5+css 3,或者用百分比 来计算