您的位置:晶晶的博客>前端>html布局的一种宽度自适应解决方案

html布局的一种宽度自适应解决方案

目前市面上的显示器分辨率是越来越大,而对网页显示而言意味着一屏可以显示更多的内容『一屏:网页右边没有滚动条、下边也没有滚动条浏览器最大化所可以显示内容区域;这不是一个正规词汇,仅为此文方便书写而生造』。

对html布局而言,传统的960px或者鄙人常用的980px』宽度在大分辨率显示上显示时左右两边则会留下富余的空白空间,当分辨率达到23寸的1920px时传统的980px宽度网页布局则意味着显示器上的一半宽度的位置被闲置......

考虑到17寸非主流脑残显示器依然占有不少的份额,同时为大分辨率显示器做适当的适配,一种网页宽度自适应布局应运而生,本文所说的宽度自适应仅仅指pc端的宽度自适应。

理论基点:

1、最小尺寸分辨率1024*768(传统17寸显示器),则可以采用940px、960px、或者鄙人常用的980px作为最小宽度

2、1024*768之后稍大的分辨率就是1280*768了,则可以采用1200px或者1220px作为稍大的网页宽度

3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签

4、不支持css3、html5的脑残浏览器特别是<=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了

5、宽度自适应需要对每个显示模块进行不同宽度的计算,在做html布局时需要大量的计算与适配。

6、宽度自适应为不同宽度显示器写布局元素时常用的css

.wrap {
display:none;
}
.wrapBig .xxx {
width:xxpx;
}
.wrapSmall .xxx {
width:xxpx;
}

实现方式:

1、高级浏览器方式,通过media Queries直接控制,比如控制宽度的div类名叫wrap,则有如下代码,此代码仅作抛砖引玉

/**max width 980px**/
@media screen and (max-width:1200px) {
.wrap {
width:980px;
}
}
/**max1280px screen***/
@media screen and (min-width:1200px) {
.wrap {
width:1200px;
}
}

稍微解释下:第一段当浏览器的可显示区域宽度小于1200px时就将类名为wrap的宽度设置为980px,当浏览器的可显示区域大于1200px时则将类名为wrap的宽度设置为1200px。css3的media queries可以通过拖拽浏览器窗口大小即时显示效果!

这样在17寸显示器上时就不会在浏览器的下方出现滚动条,而在大于17寸的显示器上时可以让网页布局宽度增大到1200px,显示更多的内容。

2、低级脑残浏览器通过js实现,为了便于调试,同时采用resize事件让网页跟随浏览器窗口大小改变而改变布局元素的宽度,如下代码也进做抛砖引玉

var windowSize=function () {
var winWidth,winHeight;
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测,获取窗口大小
if (document.documentElement && document.documentElement.clientHeight &&document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//返回对象结果
return {'width':winWidth,'w':winWidth,'height':winHeight,'h':winHeight};
}

//上述代码通过windowSize方法返回当前浏览器一屏窗口的宽度与高度【注意此处一屏的概念】

$(document).ready(function () {
var PageStyle= function () {
var SysWidht =
windowSize().width,wrap=$('.wrap');//此处也可以使用jquery的$(window).width()获取页面宽度
if(SysWidht<1200) {
wrap.removeClass('wrapBig').addClass('wrapSmall');
}else {
wrap.removeClass('wrapSmall').addClass('wrapBig');
}
};
/*init*/
PageStyle();
/*event*/
$(window).resize(function () {
PageStyle();
});
});
//注意,此处引用了jquery !!!
//上述代码在页面加载完毕后自动调节类名为wrap的布局元素的类名称 然后在css中依据不同的类名写css代码

稍微解释下原理:通过js读取浏览器的窗口一屏大小,然后调节关键的类名为wrap的布局标签的类名,然后在css中书写相关宽度代码,因为采用了jquery的resize方法[实际就是resize事件],利用该事件当浏览器窗口大小改变时执行相关代码。

那么此段代码放在页面核心js中时势必会在所有浏览器中都执行,这个时候可以使用ie独有的hack触发,假设上述js代码写入在一个单独的js文件中,html中的示例代码如下

<!DOCTYPE html>
<!--[if lte IE 6 ]> <html class="ie ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9" lang="zh-CN"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="zh-CN"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<title>宽度自适应 -demo</title>
<meta name="author" content="Jea Yang(http://blog.jjonline.cn)"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="./Public/Style/reset.css"/>
<script type="text/javascript" src="./Public/Js/jquery-1.8.1.min.js"></script>
<!--[if lt IE 9]>
<script src="./Public/Js/html5.js"></script>
<script src="./Public/Js/lte-ie8.js"></script>
<![endif]-->
</head>

上述html代码中的<!--[if lt ie 9]--><![endif]-->之间引入该js文件即可;不再多做解释

如此,低级脑残浏览器下的则相关核心css代码则如下:

/**for ie adjust width auto commen**/
.wrapBig {
width:1200px;
margin:0 auto;
}
.wrapSmall {
width:980px;
margin:0 auto;
}

对脑残低级浏览器如此处理后,当拖拽脑残低级浏览器的窗口大小时页面布局也会跟随变化。

===============

此文仅作原理阐述


转载请注明本文标题和链接:《html布局的一种宽度自适应解决方案

相关推荐

网友评论3

路人甲 表情
Ctrl+Enter快速提交
  1. #1

    最反感的就是“低级脑残浏览器”,写CSS与JQ就跟打架一样

    腾林 9个月前 (10-11) 回复
  2. #2

    2

    2 1年前 (2016-05-30) 回复
  3. #3

    哈哈  低级脑残浏览器  我喜欢

    小菜 2年前 (2015-12-10) 回复