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

布局按全屏布局,浏览器窗口多大,内容网页就是多大

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

 

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

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

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

 

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

温馨提示:内容为网友见解,仅供参考
第1个回答  2013-08-29

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

$(function(){
    var winWidth,winHeight;
    Resize = function(){
        winWidth = $(window).width(),
        winHeight= $(window).height();
    }
});

<body onResize="Resize()" onLoad="Resize()">

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

本回答被网友采纳
第2个回答  推荐于2017-07-26
做网站让页面自适应大小方法代码如下:
一、电脑站设置网站自适应方法
全屏宽度主要在于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:表示:用户是否可以调整缩放比例。本回答被网友采纳
第3个回答  2017-07-25
用%分号 以下是代码请供参考!
style="width:100%;height:99.3%;"

第4个回答  2013-08-29
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是多少宽度高度,看你具体需要去订,到时候赋值一下就可以了

怎么用jQuery\/HTML\/Div+CSS按浏览器屏幕大小自适应布局?
建议 body 下 布局一个 DIV, 这个DIV 的 CSS 可以这样处理:{ position: absolute; left:0px; right:0px; top:0px; bottom:0px; overflow:auto;}然后再在这个 div中进行布局, 子div可以用 100%相对布局, 页面宽度就自动撑开了.另外一种常用布局是用 table 设置宽度为100%...

DIV CSS 如何让网页中的某DIV自动适应屏幕高度自己变如下图
1、首先创建或者打开我们的web项目,新建一个html文件和css文件即可,如图所示。2、html页面代码如图所示,定义一个div,然后给一个id属性即可。3、这里是使用宽度的百分比之后,设置高度值为零,然后使用padding属性的top或者bottom的值(可以是任意百分比),背景颜色作为测试。4、然后在浏览器运行之后的效...

请问如何实现网页中的文字大小根据浏览设备屏幕大小不同自动调整?
1.首先,在网页代码的头部,加入一行viewport元标签。viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置,包括IE9,对于那些老式浏览器(主要是...

如何使用jQuery让页面随着窗口大小的改变而自动加减页面的宽度?
<style type="text\/css">*{margin:0;padding:0;}.div1{height:100%;margin:0 auto;border-left:5px solid #F00;border-right:5px solid #F00;}<\/style><script type="text\/javascript" src="jquery.js"><\/script><script type="text\/javascript">$(function(){$(".div1").css({hei...

请问DIV+CSS布局的网页不跟随浏览器同比例缩放, 怎么解决啊?
你好,简单的说你在做HTML时,设置DIV宽时按百分比来设置。同时结合JS或JQuery来做效果。这样你的页面会根据不同浏览器进行按比例缩放。还有一种就是 交互式响应网页,这种页面制作起来会麻烦些,但它可以适应PC,Ipad,Iphone等不同硬件来看的。希望我的回答能对你有帮助。

div css布局中浏览器不兼容,谷歌和ie和软件显示的都不一样 软件显示是...
没贴代码所以没法具体帮你,给你提供思路:用css hack,这个可以你根据自己的css代码,哪里在不同浏览器里有差异就去网上查哪里。用jQuery或者JS来获取当前浏览器的信息,根据不同浏览器用不同的css代码,而通常,差异会很小,所以工作量没有想象中的大。有问题,再追问。

想用jQuery mobile js 做网页的自适应大小宽度的改变,就是当网页宽度变...
设置宽度为100%,列表就可以适应屏幕。同时如果你的头像要保证是正方形,就要使用js计算并动态赋值宽度和高度。如使用jq语句$(id).css("width","150px");$(id).css("height","150px");就是一个正方形,当然,不一定是150px,具体的宽度也可以动态获取屏幕并计算。

在CSS中怎样设置浏览器字体随窗口尺寸变化而变化
根据现实中的分辨率大小来设置css来控制。media screen and (min-width: 200px) { body { font-size: 10px;} } media screen and (min-width: 1000px) { body { font-size: 50px;} }

如何用CSS控制整个网页的大小?
200px;这个看你实际的需要,可以先将要显示的区块,先display:none; 然后用jquery的一些动画方法,比如show()、fadeout()或者自定义的动画来显示,仅供参考哈!~参考资料:<a href="http:\/\/drupalgarden.cn" target="_blank" rel="nofollow noopener">http:\/\/drupalgarden.cn<\/a> ...

div + css 如何两行全屏设置
(function(){ this_height = $(document).height();\/\/获取当前浏览器高度 height = $this_height\/2 ; \/\/只有2行的话,高度除以2就OK了,(".test").css({"width":"100%","height":$height});})<\/script> <\/head> <body > <div class="test" style="background:green">111<\/div>...

相似回答