网站开发：如何让网页自适应电脑屏幕分辨率？

2022-12-19 分类：网站建设

网站开发：如何让网页自适应电脑屏幕分辨率？

网站开发很多人会遇到这样的问题，当你自己的电脑上精心制作好网页，却发现在他人的不同分辨率的电脑上浏览你页面时，自己的网页排版乱得一塌糊涂，或者被拉伸，或者被压缩，要不就是不能完整显示在屏幕内。这是为什么呢？因为通常初学者朋友都按照自己的屏幕分辨率对网页进行设计，但是却没有考虑到网友们可能使用了别的屏幕分辨率。

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

如果你网站结构没有用到大量的图形来衔接，主要由表格来定结构，那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时，只要你把表格的宽度属性定义为100%表格就会根据分辨率的不同自行调整宽度。

网站开发

网站开发二、固定居中
800600分辨率下制作的网页在1024768分辨率的机器上打开，整个网页就会跑到左边；1024768分辨率的网页在800600分辨率的机器上有时也会变得"不堪入目"两种分辨率各做一个吧？做起来费劲。所以目前普遍采用的方法是固定居中法！
现在大多数网民都还在用800*600分辨率，所以我一般可以以此分辨率为主。只要在网页原代码的后紧加一句前加一句

就OK不过有几个问题这是要注意一下，第一个要注意的上面说到百分比的问题，表格、单元格的宽度单位最好要使用像素单位，而不要用百分比。例如width=770如果你表格宽度设的百分比，那么使用大于800600像素时，网页就会拉宽，这样网页可能会变形。中加入leftmargin=0即这种情况下，800600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的不能用DW中的层来定位。

网站开发公司

网站开发三、兵分两路
如果你网页不经常更新，而且对页面效果极其在意，那好，就设计两个页面，分别对应800600和1024768两种分辨率。然后根据不同的分辨率进行跳转就行了
例如：
functredirectPag{
varurl_els="http://www.163.com/";
varurl_800x600="http://www.sohu.com/";
varurl_1024x768="http://www.sina.com.cn/";
varurl_1366x768="http://www.qq.com";
ifscreen.width==800&&screen.height==600
window.location.href=url_800x600;
elsifscreen.width==1024&&screen.height==768
window.location.href=url_1024x768;
elsifscreen.width==1366&&screen.height==768
window.location.href=url_1366x768;
else
window.location.href=url_else;

}

企业网站开发

本文标题：网站开发：如何让网页自适应电脑屏幕分辨率？
标题URL：https://www.cdcxhl.com/news/224075.html

成都网站建设公司_创新互联，为您提供企业网站制作、App开发、外贸网站建设、云服务器、全网营销推广、企业建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容