如何让网页适应宽屏,打开网站铺满电脑屏幕

如何让网页适应宽屏

如何让网页版面更适合浏览者呢?这里有技巧

   刚做好网页的朋友们经常收到网友们的反馈，说自己的网页排版乱得一塌糊涂，或者被拉伸，或者被压缩，要不就是不能完整显示在屏幕内。这是为什么呢？因为通常初学者朋友都按照自己的屏幕分辨率对网页进行设计，但是却没有考虑到网友们可能使用了别的屏幕分辨率，以至于看起来版面混乱。

   目前，网友们上网通常会采用800×600、1024×768两种分辨率，由于网页不是用来给自己看的，所以我们必须让自己的网页能够兼顾这两种情况，让不同分辨率设置的网友都能够看到一个排版美观正确的网页。下面就介绍几种常用的方法，特别说明一下除非你的网站是艺术类的，有特别需求，通常我们都会首先照顾分辨率设置为800×600的大众化标准。

   一、 自然拉伸

   如果你的网站结构没有用到大量的图形来衔接，主要*表格来定结构，那么你就可以使用该方法。非常适用于主要*表格、文字来表达信息的简单的网页页面。

制作表格时，只要你把表格的宽度属性定义为100% ，表格就会根据分辨率的不同自行调整宽度。

   二、 固定居中

   自然拉伸法的好处自不必说，可以总是充满整个屏幕，但是弱点也很明显：一来如果网页版面复杂，各图形元素之间有精确的的定位关系，一旦拉开或者压缩就会彻底变形；二来即使版面不太复杂，文字行数亦不好控制。有时候分辨率一旦变化，要么太密，要么太挤，就失去了作者设计版面的意图了。所以目前各大网站普遍采用的方法是固定居中法！

该方法的制作方法很简单。在制作最大的表格时，把表格属性的宽度像素定义为一个固定数值，并且让表格居中即可。以后制作的表格，就会限定在这个表格之内，永远都不会超出800×600分辨率的屏幕，网页的大小相当于固定死了。当浏览者使用1024×768的分辨率浏览网页时，屏幕两边就会留下白边，看起来觉得比较自然。

   三、 兵分两路

   如果你的网页不经常更新，而且对页面效果极其在意，那好，你就设计两个页面，分别对应800×600和1024×768两种分辨率。把这两个首页文件分别命名为index800.htm和index1024.htm 。然后在空白的索引页index.htm中加入以下代码到前面：

<Script language=”javascript”>

if (window.screen){

var w=screen.width;

url_800=”index800.htm”;

url_1024=”index1024.htm”

//请根据你的文件命名修改

if (w<835){

self.location.replace(url_800);

}//加入判断条件，还可以用“&”加入多个判断条件

if (w>=835){

self.location.replace(url_1024);

}

}

</Script>

    这样，当访问者打开你的索引页时，系统就会判断访问者的屏幕分辨率，然后转到相应的首页。

《如何让网页适应宽屏,打开网站铺满电脑屏幕》此文由三行网络公司原创，转载请保留原文链接，谢谢！

【关键词标签】如何让网页适应宽屏    (PC+手机)响应式网站建设

• 如何建设中英文双语网站，中英文双语网站制..
• Facebook测试移动支付产品 - 你..
• 网页是选择新窗口打开还是原窗口打开？
• 淘宝店要怎么做好推广啊？有哪些技巧？
• 有谁是从加快收录和提升排名的角度对网站进..
• 百度收录减少了，有没有合适的解决办法？
• 发现网站流量有所下滑，如何应对以提高流量..
• 做大型网站的SEO优化是不是比较难？
• 更换网站的ip收录量会下降，怎样可以减少..
• 设计网站需要考虑诸多因素，哪些因素是特别..
• 企业的网站建设，应用动画来美化可行吗？
• 刚做的网站，在一些浏览器上不兼容，要怎么..
• 对网站的站外内容重复，有怎样的理解？
• 一个设计优秀的网页，能给业务带来什么影响..
• 如何可以提高搜索引擎友的好度？