草丁图书馆

  1. 首页 > 生活杂烩 >

如何让网页自适应屏幕，怎么让网页自适应屏幕大小( 二 )

小知识



例如：

<script LANGUAGE="JavaScript">
function redirectPage() {
var
url_else = "";
var
url_800x600 = "";
var
url_1024x768 = "";
var url_1366x768
= "";
if ((screen.width ==
800) && (screen.height == 600))
window.location.href= http://www.ncwxdh.com/p/url_800x600;
else if ((screen.width == 1024) &&
(screen.height == 768))
window.location.href= http://www.ncwxdh.com/p/
url_1024x768;
else if ((screen.width == 1366) && (screen.height ==
768))
window.location.href= http://www.ncwxdh.com/p/
url_1366x768;
else

window.location.href= http://www.ncwxdh.com/p/
url_else;
}
</script>
如何让网页自适应所有屏幕宽度？ 首先 ， 你的问题很含糊 ， 适应屏幕 ， 是要做pc端的适配还是手机端的适配呢？其次 ， 要达到怎么样的适配效果呢？不同效果有不同的方案 。
1、如果只是一般的希望盒子能在不同窗口大小中正常比例显示 ， 建议对最外层使用js动态布局 ， 根据窗口大小来确定最外层盒子的宽高 ， 或者采用绝对定位 。 对于你想达到的不同适配效果 ， 可以采用不同的方案 。 包括使用em替换px ， 或者是百分比 。
2、如果希望在手机端能达到最佳效果 ， 甚至有另一套UI的话 ， 就要采用媒体查询的方式 ， 这是css3特有的 ， 所以在基本上用在手机端 ， 例如：
如果文档宽度小于 300 像素则修改背景演示(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
你可以为各个尺寸的屏幕写特定的css 。

这就是一个最简单的媒体查询 ， 具体可以查找w3cschool上的相应资料 ， 或者百度一下 。
如何让网页自适应所有屏幕宽度 网友们上网通常会采用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中的层来定位 。

推荐阅读


上一篇：上火体质如何调理，容易上火的人吃什么调理

下一篇：如何增厚脸部角质层，脸上有死皮角质层增厚