‘壹’ 如何让网页自适应屏幕大小
答案：
让网页自适应屏幕大小，主要采用响应式布局设计，结合媒体查询、弹性布局和流式布局等技术。
详细解释：
1. 响应式布局设计：这是现代网页设计中非常重要的一个概念。响应式布局可以确保网页根据用户设备的屏幕大小、分辨率和平台自动调整布局，以提供最佳的阅读体验和良好的用户体验。
2. 媒体查询：这是一种CSS技术，允许开发者针对不同的设备特性和屏幕尺寸设置不同的样式规则。通过这种方式，网页可以根据屏幕大小来调整布局和元素的大小，使其适应不同的设备。
3. 弹性布局：通过使用CSS的弹性盒子模型，可以创建灵活的布局结构。弹性盒子模型允许子元素在容器内灵活地调整尺寸和位置，以适应不同的屏幕尺寸和分辨率。这种布局方式特别适用于移动端网页设计。
4. 流式布局：流式布局是一种相对固定的布局方式，它基于百分比来设置元素的宽度和位置，而不是使用像素值。这样，无论屏幕尺寸如何变化，网页元素都会根据屏幕大小自动调整大小，保持页面的整体布局和可读性。
采用以上技术实现的响应式网页可以确保在不同设备和屏幕尺寸上都能提供一致的用户体验。随着现代网页设计的发展，响应式布局已成为网页设计的标配，对于提高用户体验和网站的SEO优化至关重要。因此，开发者在设计网页时，应充分考虑采用这些技术来确保网页的自适应性。
‘贰’ 如何让网页在浏览器自适应屏幕大小
方法：
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 代替。
‘叁’ 镐庝箞璁╃绣椤佃嚜阃傚簲镐庝箞璁╃绣椤佃嚜阃傚簲灞忓箷澶у皬
濡备綍锅氶傚簲镐х绣椤佃捐
鍒朵綔缃戠珯浣块〉闱㈠ぇ灏忚嚜阃傚簲镄勬柟娉曚唬镰佸备笅:1.涓绉嶈嚜阃傚簲寤虹珛璁＄畻链虹珯缃戠珯镄勬柟娉
鍏ㄥ睆瀹藉害涓昏佸湪浜嶤SS浠ｇ爜锛屽皢瀹藉害璁剧疆涓100%锛岃屼笉鏄锲哄畾镄勫儚绱犲笺备唬镰佸备笅銆
镓嬫満缃戠粶璁剧疆镄勮嚜阃傚簲鏂规硶:
鍦ㄧ绣椤垫爣棰树腑娣诲姞杩欐牱涓涓猰eta镙囩:
瑙ｉ喷:
镐庝箞璁ヽhrome鎴栬呰嚜甯︽祻瑙埚櫒镊锷ㄩ傚簲镓嬫満灞忓箷锛
chrome鎴栬呰嚜甯︽祻瑙埚櫒镊锷ㄩ傚簲镓嬫満灞忓箷涓嶆槸鍙栧喅浜庢祻瑙埚櫒镄勮剧疆锛岃屾槸鍙栧喅浜庢墍璁块梾镄勭绣绔欐槸钖︽湁阍埚规坠链虹瓑绉诲姩璁惧囱繘琛岃嚜阃傚簲璁捐℃垨钥呰浆镰佽捐°
镞╂湡缃戠珯鍦ㄨ捐℃椂锛岀敱浜庤捐＄▼搴忋佹祻瑙埚櫒鐗堟湰浠ュ强绉诲姩璁惧囩殑涓嶆櫘鍙婏纴瀵圭绣绔欐病链変笓闂ㄨ繘琛屾墍璋撶殑钬滀竴绔椤纺钬濊捐★纴鍙奝C銆佹坠链恒佸钩𨱒跨瓑涓挞棬浼桦寲璁捐★纴瀵艰嚧镓嬫満銆佸钩𨱒胯块梾浣挞獙涓崭匠镄勬儏鍐点
镓嬫満缃戦〉涓链変釜DIV锛屾庝箞璁剧疆鍏惰儗鏅锲剧墖镊阃傚簲鍦―IV涓婏纻
锲犱负鐢佃剳鍜屾坠链哄垎杈ㄧ巼镄勫樊寮傦纴杩欐椂鍊欎綘瑕佺敤姣旀坠链轰笂鏄剧ず镄勫浘鐗囧ぇ涓や笁鍊岖殑锲剧墖锛屽啀鐢╞ackground-size鎶
鑳屾櫙锲剧墖
缂╁皬鍒颁綘闇瑕佺殑姣斾緥锛涙瘆濡傛坠链轰笂闇瑕20*30澶у皬镄勮儗鏅锛岃繖镞跺欎綘灏遍渶瑕佺敤60*90澶у皬镄勫浘鐗囨潵锅氲儗鏅浜嗭纴鍐岖敤background-size:20px30px;鎶鑳屾櫙锲剧墖
璁剧疆闇瑕佺殑灏哄革绂杩欐牱镓嬫満涓婃樉绀虹殑锲剧墖灏卞緢娓呮榈浜嗐傚傛灉鏄痠mg灏辨洿绠鍗曚简锛岀洿鎺ヨ剧疆wdith鍜宧eight𨱒ョ缉灏忓浘鐗‘肆’ 如何让网页自适应各种分辨率
网友们上网通常会采用800×600、1024×768两种分辨率， 网页不是用来给自己看的，所以必须让自己做的网页能够兼顾这两种情况，让不同分辨率设置的网友都能够看到一个排版美观正确的网页。下面就介绍几种常用的方法，特别说明一下除非网站是艺术类的，有特别需求，通常都会首先照顾分辨率设置为800×600的大众化标准。
一、 自然拉伸
如果你的网站结构没有用到大量的图形来衔接，主要由表格来定结构，那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时，只要你把表格的宽度属性定义为100% ，表格就会根据分辨率的不同自行调整宽度。
二、 固定居中
在800×600分辨率下制作的网页在1024×768分辨率的机器上打开，整个网页就会跑到左边；1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧？做起来费劲。所以目前普遍采用的方法是固定居中法！
现在大多数网民都还在用800*600的分辨率，所以我们一般可以以此分辨率为主。只要在网页原代码的<body>后紧加一句<center>，</body>前加一句</center>就OK了。不过有几个问题这是要注意一下，第一个要注意的是上面说到的百分比的问题，表格、单元格的宽度单位最好要使用像素单位，而不要用百分比。例如width=770。如果你的表格宽度设的是百分比，那么使用大于800×600的像素时，网页就会拉宽，这样网页可能会变形。在<body>中加入leftmargin=0，即<body leftmargin=0>这种情况下，800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。
三、 兵分两路
如果你的网页不经常更新，而且对页面效果极其在意，那好，你就设计两个页面，分别对应800×600和1024×768两种分辨率。然后根据不同的分辨率进行跳转就行了。
例如：
<script LANGUAGE="JavaScript">
function redirectPage() {
var url_else = "http://www.163.com/";
var url_800x600 = "http://www.sohu.com/";
var url_1024x768 = "http://www.sina.com.cn/";
var url_1366x768 = "http://www.qq.com";
if ((screen.width == 800) && (screen.height == 600))
window.location.href= url_800x600;
else if ((screen.width == 1024) && (screen.height == 768))
window.location.href= url_1024x768;
else if ((screen.width == 1366) && (screen.height == 768))
window.location.href= url_1366x768;
else
window.location.href= url_else;
}
</script>
‘伍’ 做网站时如何让页面自适应大小
做网站让页面自适应大小方法代码如下：
一、电脑站设置网站自适应方法
全屏宽度主要在于CSS代码中，将width为100%，而不是一个固定的像素值，代码如下。
手机网设置网自适应方法：
在网页头部加上这样一条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：表示：用户是否可以调整缩放比例。
‘陆’ 如何让网页自适应分辨率
在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。
第一种方法：做一个网页解决问题（长了点）
如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得"面目全非"，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver（以下简称DW）为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者们有所帮助。
一、消除任意缩放浏览器窗口对网页的影响
一番辛苦做出来的网页，在全屏状态下浏览一切正常。但在改变浏览窗口大小之后，网页就变得"不堪入目"了，这是个很值得注意的问题。
问题的根源还得从网页的布局说起，在DW中，网页内容的定位一般是通过表格来实现的，解决表格的问题也就成功了大半。
大家应该注意到，在DW中表格属性面板的高宽设定选择上提供了两种不同类型：百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比是相对于当时窗口的宽度的。IE浏览器中，随便改动主页窗口的大小时，表格的内容也随之错位、变形，就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。
自然，解决这个问题的办法就是将表格宽度设置成固定宽度（也就是像素值）。另外如果外层表格已做好固定宽度设置，内层表格也可以适当使用百分比设置。清楚这个原则以后，如果出现类似的问题大家也知道怎么解决。
二、让网页居中
说到了窗口大小就会顺着路子想到分辨率的问题，在800×600分辨率下制作的网页在1024×768分辨率的机器上打开，整个网页就会跑到左边；1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧？做起来费时，看起来也费劲。怎么办呢？
现在大多数网民都还在用800*600的分辨率，所以我们一般可以以此分辨率为主，要想让网页在1024*768时居中，只要在网页原代码的<body>后紧加一句<center>，</body>前加一句</center>就OK了。不过有几个问题这是要注意一下，第一个就是上面说到的百分比的问题，表格、单元格的宽度单位最好要使用像素单位，而不要用百分比。例如width=770。如果你的表格宽度设的是百分比，那么使用大于800×600的像素时，网页就会拉宽，这样网页可能会变形。在<body>中加入leftmargin=0，即<body leftmargin=0>这种情况下，800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。
<html>
<head></head>
<body topmargin=0 leftmargin=0>
<center>
<table cellspacing cellpadding width=760><tr><td></td></tr></table>
</center>
</body>
</html>
三、定义固定大小的文字
大家都知道,在IE浏览器的功能设置中，有一个可以自由设置窗口内容字体大小的功能，这样由于不同访问者的设置习惯不同，呈现在他们面前的网页有时也会不不相同。比如你可能本来设计时用的是2号字体，结果由于用户对浏览器的额外设定，变的更大了，这时你的网页也可能变得"不堪入目"。虽然不是你的错，但客户是上帝。
如果使用了网页中的CSS样式表技术，就不会出现上述情况了。使用快捷键"Shift+F11"打开样式表"CSS style"编辑器，在窗口中单击鼠标右键执行"New CSS style..."命令新建一个样式表，然后在给出的列表中选择"类型"选项，定义文字属性参数（一般文字的大小选择12px较为适宜）。完成后选择网页编辑窗中的文本，单击新的样式表名称，可以看到选中的文本发生了变化。预览时试试定义的文本字体尺寸还会不会随浏览器的选择字体大小而改变。
四、让网页适应不同的浏览器
浏览器的格局现在是两分天下，一分是IE，另一分是NetScape，在国内Ie有绝对的占有率，在这种情况下我们设计的网页只要兼容它就行了，但NetScape在国外还是有很多人使用，毕竟它是浏览器的元老。
虽然没有办法做出让所有浏览器都兼容的网站，但只要注意以下几点，做出来的网页在各个浏览器都中能达到比较好的显示效果：
不要混合使用层和表格排版，如果是父子关系，如层中表格，不在此原则范围内。
内联式的 CSS 在 Netscape Navigator 中经常会出现问题，使用链式或内嵌式。
有时需要在空层插入表格或者透明图片，以保证在 Netscape Navigator 里的效果。
对于只有几个像素宽度或高度的层，改用图片来实现。
避免使用 W3C 组织不推荐的排版属性，用 CSS 代替。
第二种方法：做两个适合不同分辨率的页面，一个是800×600，一个是1024×768，在800×600的页面中加入一下代码就可以实现跳转了：
解决分辨率问题在Dreamweaver中没有此项功能，我们只能手动加入一段Javascript代码。首先在change－ie.html或change－nc.html页面代码中的< head>和< /head>中加入以下代码：
< script language=JavaScript>
< !－－
function redirectPage(){
var url800x600=〃index－ie.html〃; //定义两个页面，此处假设index－ex.html和1024－ie.html同change－ie.html在同一个目录下
var url1024x768=〃1024－ie.html〃;
if ((screen.width==800) ＆＆ (screen.height==600))//在此处添加screen.width、screen.height的值可以检测更多的分辨率
window.location.href= url800x600;
else if ((screen.width==1024) ＆＆ (screen.height==768))
window.location.href=url1024x768;
else window.location.href=url800x600;
}
// －－>
< /script>
然后再在< body…>内加入onLoad=〃redirectPage()〃