html5.怎么固定网页分辨率？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5.怎么固定网页分辨率？相关的知识，希望对你有一定的参考价值。
比如，我目前的电脑分辨率是1280*960.看着我做出的网页是正常的
但是我若换台大头电脑或小屏液晶电脑（19寸）把分辨率也调成1280*960
再看我做的网页就歪曲，多出，少出等等，换成适度的分辨率，也一样的情况
怎么写代码？强制让任何访问者固定一个分辨率？
我换台电脑的原始分辨率是1024*768
但是看我做的网页，依旧是歪曲的。。
哪位高手帮帮忙，，给个代码。。
你这是要自适应屏幕分辨率吧。
在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。
第一种方法：做一个网页解决问题（长了点）
如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得"面目全非"，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver（以下简称DW）为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者们有所帮助。
一、消除任意缩放浏览器窗口对网页的影响
一番辛苦做出来的网页，在全屏状态下浏览一切正常。但在改变浏览窗口大小之后，网页就变得"不堪入目"了，这是个很值得注意的问题。
问题的根源还得从网页的布局说起，在DW中，网页内容的定位一般是通过表格来实现的，解决表格的问题也就成功了大半。
大家应该注意到，在DW中表格属性面板的高宽设定选择上提供了两种不同类型：百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比是相对于当时窗口的宽度的。IE浏览器中，随便改动主页窗口的大小时，表格的内容也随之错位、变形，就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。
自然，解决这个问题的办法就是将表格宽度设置成固定宽度（也就是像素值）。另外如果外层表格已做好固定宽度设置，内层表格也可以适当使用百分比设置。清楚这个原则以后，如果出现类似的问题大家也知道怎么解决。
二、让网页居中
说到了窗口大小就会顺着路子想到分辨率的问题，在800×600分辨率下制作的网页在1024×768分辨率的机器上打开，整个网页就会跑到左边；1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧？做起来费时，看起来也费劲。怎么办呢？
现在大多数网民都还在用800*600的分辨率，所以我们一般可以以此分辨率为主，要想让网页在1024*768时居中，只要在网页原代码的<body>后紧加一句<center>，</body>前加一句</center>就OK了。不过有几个问题这是要注意一下，第一个就是上面说到的百分比的问题，表格、单元格的宽度单位最好要使用像素单位，而不要用百分比。例如width=770。如果你的表格宽度设的是百分比，那么使用大于800×600的像素时，网页就会拉宽，这样网页可能会变形。在<body>中加入leftmargin=0，即<body leftmargin=0>这种情况下，800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。
<html>
<head></head>
<body topmargin=0 leftmargin=0>
<center>
<table cellspacing cellpadding width=760><tr><td></td></tr></table>
</center>
</body>
</html>
三、定义固定大小的文字
大家都知道,在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页面代码中的< head>和< /head>中加入以下代码：
< script language=JavaScript>
< !－－
function redirectPage()
var url800x600=〃index－ie.html〃; //定义两个页面，此处假设index－ex.html和1024－ie.html同change－ie.html在同一个目录下
var url1024x768=〃1024－ie.html〃;
if ((screen.width==800) ＆＆ (screen.height==600)) //在此处添加screen.width、screen.height的值可以检测更多的分辨率
window.location.href= url800x600;
else if ((screen.width==1024) ＆＆ (screen.height==768))
window.location.href=url1024x768;
else window.location.href=url800x600;
// －－>
< /script>
然后再在< body…>内加入onLoad=〃redirectPage()〃
参考。。
http://zhidao.baidu.com/link?url=qLzMlpTvAnmlVj1EWF8p1E60TA0zn1o5atRjYNanG8u66eh7CHQZs_XuVrKoak0hjbSJvu1869cLxs67Kf7TgLN51okrQaJaM33d7PJTErK 参考技术A
你是想说设置的网页伴随着电脑分辨率的不同，但是仍然显示的全部窗口吧？（就是页面完整显示，不溢出）
如果是这样，在设置html标签的width和height属性的时候都使用百分比即可。如下文中的<div>标签。
<html><head>
<title>这是范例</title>
<style>
.fanli
width:100%;
height:100%;
</style>
</head>
<body>
<div class="fanli">这里面放网页内容</div>
</body></html>
另外，如果是登录界面那种，无论窗口大小都处以中间位置的情况，可以使用绝对定位居中。代码如下：
<html><head>
<title>这是绝对定位示例</title>
<style type="text/css">
.pos_abs
position: absolute;
width: 400px;
left: 50%;
margin-left: -200px;
</style></head>
<body>
<h2 class="pos_abs">这是带有绝对定位居中的标题</h2>
</body></html>追问
呃，能见简单说下吗？
这。。看不懂。
算了，您访问下www.zyjtyy603524.cn/csol.html
看看您看到的网页是否是正常的！
你那排班乱了不是分辨率的问题，而是浏览器兼容的问题。关于浏览器兼容不是一句话能说明白的，但是兼容出问题了，可以设定margin和padding属性更改。
这个需要你自己一点一点的试。可以下载ie测试浏览器自己验证。。
追问不是，我换了电脑查看过，就XP系统不论设置自身分辨率多少，看这个网页都是错乱的。基本就是字体歪曲，图片不对位以及上面的播放器占格子，但是我一换WIN7系统查看，立刻就可以了、、不论拿什么浏览器访问，都是一样的。。。。
参考技术B 什么叫固定？你是想说 移动端不能用手缩放页面么？如果是的话，加上这句：<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
-----------------------------
艾玛 原来你有描述的啊 回答的时候怎么没看见，可能我答非所问了......
但看你的描述 你可以试试pc端固定布局，看看还会不会有类似的情况。追问
???
参考技术C 然而并不能固定。分辨率由显示器决定。只能通过CSS来决定页面的宽度尺寸。
当你用1024*768的显示器时，你会发现页面很大。
但你用1920*1080的显示器时。就会发现页面变小了。
其实页面的尺寸还是一样的。变小是因为，你显示器变大了。
比如你CSS宽度设置成1000PX。那么1920*1080的显示器中就多出了920px，页面自然就小了。
H5并有有这一功能。你先要明白分辨率与尺寸的关系。 参考技术D 直接设置width,height.width可以写两个min-widht和width.不明白的话再去百度这个.基础太差
js+css网页固定右下角 回到顶部 让它固定在底部怎么做
首先，设定盒子名称
div id="fanhui"
css中写样式
#fanhui
position: absolute;
left: 30px;
top: 20px;
这样写就是距离右边30像素，距离下边20像素。
绝对定位使元素的位置与文档流无关，因此不占据空间
效果如下：
<div style="height:2000px; background-color:red">
</div>
<div style="position:fixed; bottom:0; right:0; width:100px;
background-color:blue; color:yellow">
固定的内容
</div>
<html>追问
就是QQ空间还有淘宝 跟滚动条一起动的那个返回顶部 让他在最下边不动 求代码 详细的
追答你把我的代码存成一个HTML文件，就是那个效果啊。
本回答被提问者采纳 参考技术B http://maxiaojia0209.blog.163.com/blog/static/118375263201161495928794/ 参考技术C position: absolute;然后设置上下左右，你想放哪就放哪追问我加你吧 给你源文件你看看改哪里 怎么改 我是菜鸟
参考技术D 题主表达的观点可能让答题者有误解，其实position:fixed是固定在屏幕右下角（或者其他地方），脱离文档流，滑动页面，始终在屏幕（即显示器）的右下角，如果没有显示或者显示错误，请检查给了right/left/top/bottom没，，*****华丽的分割线**上面的这位写的是position: absolute，是不会脱离文档流的，看你需要哪一种以上是关于html5.怎么固定网页分辨率？的主要内容，如果未能解决你的问题，请参考以下文章
使用CSS3 Media Queries实现网页自适应(转)