<img style=" width:1440px; height:900px;" src="/newali/lunjpg" alt="chilun" />网友们上网通常会采用800×600、1024×768两种分辨率，由于网页不是用来给自己看的，所以我们必须让自己的网页能够兼顾这两种情况，让不同分辨率设置的网友都能够看到一个排版美观正确的网页。
一、 自然拉伸
如果你的网站结构没有用到大量的图形来衔接，主要由表格来定结构，那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时，只要你把表格的宽度属性定义为100%
，表格就会根据分辨率的不同自行调整宽度。
二、 固定居中
在800×600分辨率下制作的网页在1024×768分辨率的机器上打开，整个网页就会跑到左边；1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧？做起来费劲。所以目前普遍采用的方法是固定居中法！
现在大多数网民都还在用800600的分辨率，所以我们一般可以以此分辨率为主。只要在网页原代码的<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 = ">
页面自适应屏幕的方法（以下字母及标点为专业代码）：
无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。
首先，在网页代码的头部，加入一行viewport标签 <meta name="viewport" content="width=device-width, initial-scale=10, maximum-scale=10, minimum-scale=10, user-scalable=no" /> viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为10，即网页初始大小占屏幕面积的100%。即让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。
其次：
网页宽度css一定要使用百分比width: xx%;，不能用绝对像素。
当然可以用width:auto;
第三，流动布局 left{float: left;width: %;}
第四，选择加载css 这是自适应的关键部分 abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { abc {width: 1200px} } / 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 / @media screen and (max-width: 1200px) { abc {width: 900px} } / 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 / @media screen and (max-width: 901px) { abc {width: 200px;} } / 设置了浏览器宽度不大于901px时 abc 显示200px宽度 / @media screen and (max-width: 500px) { abc {width: 100px;} } / 设置了浏览器宽度不大于500px时 abc 显示100px宽度 / 需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。
第四，自适应 img { max-width: 100%;} 老版本的IE不支持max-width，所以只好写成：img { width: 100%; }
第五、采用相对字体大小 字体也不能使用绝对大小（px），而只能使用相对大小（em）。 这里最重要的，是第三条和第四条，也就是采用流动布局和css选择加载。
为了使网页游戏在手机端能正常打开并适应手机屏幕，您可以在网页的 head 标签中加入以下代码：
<meta name="viewport" content="width=device-width, initial-scale=10, maximum-scale=10, minimum-scale=10, user-scalable=no">
这样可以使网页在手机端自动缩放，适应手机屏幕。
至于自动横屏，您可以在 head 标签中加入以下代码：
<meta name="screen-orientation" content="landscape">
这样可以使网页在手机端自动横屏显示。
在使用这些代码之前，建议您阅读一下 W3C 的 Viewport 文档，了解更多有关 viewport 的知识。
希望这些信息能帮助到您。
关于网站如何做到自适应网页，可根据如下 *** 作：
首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为10，即网页初始大小占屏幕面积的100%。
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。
“自适应网页设计”的核心，就是CSS3引入的MediaQuery模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
其次，除了布局和文本，”自适应网页设计”还必须实现的自动缩放。有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的。有很多方法可以做到这一条，服务器端和客户端都可以实现。
HTML页面何适应不同分辨率的显示器可以通过：响应式布局、自适应网页设计等方法：
1、响应式布局设计：
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。
2、自适应网页设计：
自适应网页设计（AdaptiveWebDesign）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。
扩展资料：
响应式布局与自适应布局的区别：
1、自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
2、自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。
3、自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。
4、自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。
参考资料来源：百度百科-响应式布局
参考资料来源：百度百科-自适应网页设计
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）