热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何使网页自适应电脑屏幕分辨率?

在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。第一种方法:做一个网页解决问题(长了点)如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自
在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。

  第一种方法:做一个网页解决问题(长了点)

  如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得"面目全非",那多令人沮丧!下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW)为例,列出几个网页制作初学者较常见的网页布局问题以及解决方法,希望对初学者们有所帮助。

  一、消除任意缩放浏览器窗口对网页的影响

  一番辛苦做出来的网页,在全屏状态下浏览一切正常。但在改变浏览窗口大小之后,网页就变得"不堪入目"了,这是个很值得注意的问题。

  问题的根源还得从网页的布局说起,在DW中,网页内容的定位一般是通过表格来实现的,解决表格的问题也就成功了大半。

  大家应该注意到,在DW中表格属性面板的高宽设定选择上提供了两种不同类型:百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比,如在一个表格单元的宽度是600,在它里面嵌入了另外一个表格,表格宽度占表格单元的50%,则这个表格的宽度为300,依此类推,如果在一个表格不是嵌于另一个表格单元中,则其百分比是相对于当时窗口的宽度的。IE浏览器中,随便改动主页窗口的大小时,表格的内容也随之错位、变形,就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。

  自然,解决这个问题的办法就是将表格宽度设置成固定宽度(也就是像素值)。另外如果外层表格已做好固定宽度设置,内层表格也可以适当使用百分比设置。清楚这个原则以后,如果出现类似的问题大家也知道怎么解决。

  二、让网页居中

  说到了窗口大小就会顺着路子想到分辨率的问题,在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会跑到左边;1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧?做起来费时,看起来也费劲。怎么办呢?

  现在大多数网民都还在用800*600的分辨率,所以我们一般可以以此分辨率为主,要想让网页在1024*768时居中,只要在网页原代码的后紧加一句

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


   
   
   
  

 
    
 
  
 
   
  

 

 三、定义固定大小的文字

  大家都知道,在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页面代码中的和中加入以下代码:

  

   然后再在内加入OnLoad=〃redirectPage()〃

   最后,同样地,在和之间加入以下代码来显示网页的工作信息:

  

 

判断读者浏览器类型和屏幕分辨率,自动调用不同CSS 我们在设计网页的时候一个比较头痛的问题是究竟我们的浏览者的分辨率是多少?如果使我们的浏览者能够更好的去浏览到我的网页,这个是我们设计前必须思考的问题。所以Leying在设计网页的时候第一个想的是兼容现在大多数浏览者的屏幕分辨率,这里头有几种最常用的方法:

    1、硬行把网页先用表格框起来,框的分辨率应该是在760-780象素,其余的空间可以给一个背景图或者空白.
    2、用自动缩放的方法也可以实现,这种方法比较古老,而且很简单,这个不多说了;

    3、用自动判断的方法。

    今天,就第三种方法来说说,如何来判断出浏览者的屏幕分辨率,根据不同的分辨率给予读者不同的浏览内容:

    网络上也有一些能自动判断出你的浏览器是什么类型或者什么版本的代码,集成过来。

  一、既判断分辨率,也判断浏览器,使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码。

 

《SCRIPT》


    为了大家明白,这里简单解析一下:

引用内容 引用内容
var IE1024="";

var IE800="";

var IE1152="";

var IEother="";


    引号里面分别填写,用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。


 
var Firefox1024="";

var Firefox800="";

var Firefox1152="";

var Firefoxother="";


    引号里面分别填写,用户使用FireFox(一个也很流行的浏览器)的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。


var Other1024="";

var Other800="";

var Other1152="";

var Otherother="";


    引号里面分别填写,用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。

  二、不判断分辨率,只判断浏览器实现根据浏览器类型自动调用不同CSS。

 

《SCRIPT》


    解释:(和前面的差不多)

      如果浏览器为IE,则调用default.css

      如果浏览器为Firefox,则调用default2.css

      如果浏览器为其他,则调用newsky.css

    使用方法:

      很简单,放在 “” 前面即可。
  

页面在不同屏幕分辨率下存在的问题及解决办法

(未考虑800*600或更低分辨率的情况)

一 问题

在不同分辨率下,页面布局存在不同程度的差异,特别是页面上的表单控件,其宽度默认是固定值“width:150px”,当分辨率较高时,表格中的空白显得过多,页面布局显得很不协调,在宽屏显示器上尤为明显。

二 解决办法

方法1. 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件。样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可。

在包含的头文件headr.inc中加入js代码:

if(screen.width > 1024){

document.write('');

}

forms_1280.css文件内容:

/* 分辨率宽度为1280的时候,文本框和下拉框的宽度属性(width)单独定义

* 参考计算方法为:(分辨率宽度-174)/4 * 0.7

* 左侧菜单栏宽度为174px;右侧页面表格是4列;控件宽度为单元格的70%

* (1280-174)/4*0.7 = 193

*/

input.text

{

background:#FFFFFF;

border:1px solid #B5B8C8;

padding:3px 3px;

height:22px;

line-height:18px;

vertical-align:middle;

padding-bottom:0pt;

padding-top:2px;

width: 193px;

color: #333;

}

select.select{

width: 193px;

}

优点:实现很简单,代码量少;并且可针对不同分辨率做更细粒度的页面控制。

缺点:无明显缺点。

方法2 将整个页面的宽度设置为固定值,并使其居中显示。

优点:可以很大程度的消除不同分辨率下的显示差异。

缺点:分辨率宽度大于这个固定值的时候,页面两边会出现空白。

方法3 用js判断分辨率,修改body的zoom属性(IE特性),即可实现对整个页面进行缩放,类似IE8或其它浏览器提供的缩放功能。

优点:实现简单,页面能进行缩放。

缺点:缩放是宽度和高度的等比缩放,高分辨率下字体、图片看起来会变小,问题解决的不彻底。

 

三 总结

推荐方法1。页面布局的变化和分辨率的宽度有密切关系,和高度关系不大;常用的分辨率宽度也就几种,做几个简单的css文件即可。


推荐阅读
  • 本文详细探讨了HTML表单中GET和POST请求的区别,包括它们的工作原理、数据传输方式、安全性及适用场景。同时,通过实例展示了如何在Servlet中处理这两种请求。 ... [详细]
  • CentOS系统安装与配置常见问题及解决方案
    本文详细介绍了在CentOS系统安装过程中遇到的常见问题及其解决方案,包括Vi编辑器的操作、图形界面的安装、网络连接故障排除等。通过本文,读者可以更好地理解和解决这些常见问题。 ... [详细]
  • 本文详细介绍如何利用已搭建的LAMP(Linux、Apache、MySQL、PHP)环境,快速创建一个基于WordPress的内容管理系统(CMS)。WordPress是一款流行的开源博客平台,适用于个人或小型团队使用。 ... [详细]
  • 本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具,适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件,并解释bundle.js中包含的核心功能,如路由等。 ... [详细]
  • PHP 过滤器详解
    本文深入探讨了 PHP 中的过滤器机制,包括常见的 $_SERVER 变量、filter_has_var() 函数、filter_id() 函数、filter_input() 函数及其数组形式、filter_list() 函数以及 filter_var() 和其数组形式。同时,详细介绍了各种过滤器的用途和用法。 ... [详细]
  • 本题探讨了在一个有向图中,如何根据特定规则将城市划分为若干个区域,使得每个区域内的城市之间能够相互到达,并且划分的区域数量最少。题目提供了时间限制和内存限制,要求在给定的城市和道路信息下,计算出最少需要划分的区域数量。 ... [详细]
  • 在网站制作中随时可用的10个 HTML5 代码片段
    HTML很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单。在这篇文章中,我收集了10个超有用的HTML代码片段,有HTML5启动模板、空白图片、打电话和发短信、自动完 ... [详细]
  • 本问题探讨了在特定条件下排列儿童队伍的方法数量。题目要求计算满足条件的队伍排列总数,并使用递推算法和大数处理技术来解决这一问题。 ... [详细]
  • 阿里云ecs怎么配置php环境,阿里云ecs配置选择 ... [详细]
  • JavaScript 基础语法指南
    本文详细介绍了 JavaScript 的基础语法,包括变量、数据类型、运算符、语句和函数等内容,旨在为初学者提供全面的入门指导。 ... [详细]
  • Python处理Word文档的高效技巧
    本文详细介绍了如何使用Python处理Word文档,涵盖从基础操作到高级功能的各种技巧。我们将探讨如何生成文档、定义样式、提取表格数据以及处理超链接和图片等内容。 ... [详细]
  • 本文详细探讨了JavaScript中的作用域链和闭包机制,解释了它们的工作原理及其在实际编程中的应用。通过具体的代码示例,帮助读者更好地理解和掌握这些概念。 ... [详细]
  • 探讨在 JavaScript 中使用不同方向的 for 循环来实现跟随鼠标的 div 动画时,为什么会出现不同的视觉效果。 ... [详细]
  • 本文介绍了如何利用 Spring Boot 和 Groovy 构建一个灵活且可扩展的动态计算引擎,以满足钱包应用中类似余额宝功能的推广需求。我们将探讨不同的设计方案,并最终选择最适合的技术栈来实现这一目标。 ... [详细]
  • 在本教程中,我们将深入探讨如何使用 Python 构建游戏的主程序模块。通过逐步实现各个关键组件,最终完成一个功能完善的游戏界面。 ... [详细]
author-avatar
结婚吧结婚吧结婚吧_813
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有