方法一

最繁琐但又是最好理解的,让不同分辨率用户访问不同的Html

代码如下:

html不同分辨率若何用CSS解决分歧用户分辩率分歧造成的网页结构问题 Ruby

&lt;!DOCTYPE html><html> <head><meta charset=\"大众UTF-8\公众><title></title></head><script language=\公众JavaScript\"大众>location.replace(screen.width + \公众.htm\"大众);//跳转到指定屏幕宽度的网页</script> <body></body> </html>

方法二

通过div的等比例变革实现

代码如下:

<!DOCTYPE html><html> <head><meta charset=\"大众utf-8\"大众 /><title></title></head><script language=\"大众JavaScript\"大众><!--function isLayer(obj) { //判断工具是否为层的函数/不用 style 而用 currentStyle 的缘故原由是由于有些层不是直接在标签内写 CSS 的,这时用 style 取不到值/with(obj.currentStyle) //返回布尔值true或falsereturn(position == \"大众absolute\"大众 && left != \"大众\公众)}//800为800X600分辨率下窗口最大化时document.body.offsetWidth的值var iWidth = 800window.onload = function init() {//匹配页面中所有标署名为DIV元素,以数组形式返回工具var divs = document.getElementsByTagName(\"大众DIV\"大众)for(var i = 0; i < divs.length; i++) //遍历所有DIV标签if(isLayer(divs[i])) //判断工具是否为层,是则调度它的 X 坐标divs[i].runtimeStyle.posLeft = parseInt(divs[i].currentStyle.left) + (document.body.offsetWidth - iWidth) / 2iWidth = document.body.offsetWidth //保存当前文档显示区域的宽度}//--></script> <body onresize=\公众init()\"大众><div id=demo style=\公众position:absolute;left:50px; top:100px;width:200px;height:200px;border:1px solid #000\"大众>Layer1</div><div id=demo1 style=\"大众position:absolute;left:250px; top:50px;width:200px;height:200px;border:1px solid #000\"大众>Layer2</div></body> </html>

以上便是为大家分享的两个关于如何办理不同用户分辨率不同造成的网页布局问题,想要理解更多web前端学习资料,可以关注“武汉千锋”微信"大众号!