怎么用jQuery/HTML/Div+CSS按浏览器屏幕大小自适应布局?

布局按全屏布局,浏览器窗口多大,内容网页就是多大... 布局按全屏布局,浏览器窗口多大,内容网页就是多大 展开
 我来答
jACKy劉
2013-08-30 · TA获得超过325个赞
知道小有建树答主
回答量:240
采纳率:100%
帮助的人:242万
展开全部

少用 JS 多用 CSS, 提升运行效率. 另外 resize 事件当用鼠标拖放窗口大小时, 触发非常频繁, 谨慎使用.

 

建议 body 下 布局一个 DIV, 这个DIV 的 CSS 可以这样处理:

{
    position: absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    overflow:auto;
}

然后再在这个 div中进行布局, 子div可以用 100%相对布局, 页面宽度就自动撑开了.

 

另外一种常用布局是用 table 设置宽度为100%进行布局, 不过有很多局限, 用的少了.

鸟总Raynal
2013-08-29 · TA获得超过2144个赞
知道小有建树答主
回答量:1334
采纳率:40%
帮助的人:711万
展开全部

那要看你具体的布局方案。

$(function(){
    var winWidth,winHeight;
    Resize = function(){
        winWidth = $(window).width(),
        winHeight= $(window).height();
    }
});
<body onResize="Resize()" onLoad="Resize()">

解释,Resize函数是当屏幕大小改变(包括载入)的时候对你需要的宽度和高度再赋值,我写的函数里只有拿到了窗口的宽度和高度,你要赋给谁自己确定,自适应布局的话基本也就是那么处理了。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
安吉尔净饮
推荐于2017-07-26
知道答主
回答量:13
采纳率:0%
帮助的人:5.6万
展开全部
做网站让页面自适应大小方法代码如下:
一、电脑站设置网站自适应方法
全屏宽度主要在于CSS代码中,将width为100%,而不是一个固定的像素值,代码如下。

手机网设置网自适应方法:
在网页头部加上这样一条meta标签:<meta
name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

解释:
width=device-width :宽度等于设备屏幕的宽度。
initial-scale=1.0:表示:初始的缩放比例。
minimum-scale=0.5:表示:最小的缩放比例。
maximum-scale=2.0:表示:最大的缩放比例。
user-scalable=yes:表示:用户是否可以调整缩放比例。
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
徐壮壮c
2017-07-25 · 超过10用户采纳过TA的回答
知道答主
回答量:40
采纳率:50%
帮助的人:2万
展开全部
用%分号 以下是代码请供参考!
style="width:100%;height:99.3%;"
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
chxyou
2013-08-29 · TA获得超过389个赞
知道小有建树答主
回答量:466
采纳率:82%
帮助的人:237万
展开全部
100%是全屏的,如果你不需要100%全屏的那么久需要按照当前浏览器窗口大小去改变div大小,那么需要用到jq
追问
就是按照当前的浏览器窗口的大小改变div大小,我成绩用过jQuery但是不怎么稳定,可能是我用错了,可以给以实例吗?谢谢您!
追答
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "


<html xmlns="

<head>
    <title>无标题页</title>
    
    <script src="

    <script type="text/javascript">
       $(function(){
          $("#a").width($(window).width()/2)
          $("#a").height($(window).height()/2)
          $(window).resize(function(){
             $("#a").width($(window).width()/2)
             $("#a").height($(window).height()/2)
          });
       });
    </script>
    <style type="text/css">
       div{ border:1px solid #ccc; margin:0 auto; }
    </style>
</head>
<body>
<div id="a"></div>
</body>
</html>

你试试这个代码,这个代码只是获取当前浏览器窗口复制给div然后除以2.也就是说当前div宽度和高度都是当前浏览器窗口的一半,你具体要div是多少宽度高度,看你具体需要去订,到时候赋值一下就可以了

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式