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

答案:5 悬赏:40 手机版

解决时间 2021-03-12 11:17

提问者网友：爱唱彩虹
2021-03-11 17:09

最佳答案

五星知识达人网友：拜訪者
2021-03-11 18:40

做网站让页面自适应大小方法代码如下：
一、电脑站设置网站自适应方法
全屏宽度主要在于CSS代码中，将width为100%，而不是一个固定的像素值，代码如下。

手机网设置网自适应方法：
在网页头部加上这样一条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：表示：用户是否可以调整缩放比例。

全部回答

1楼网友：舍身薄凉客
2021-03-11 23:10

100%是全屏的，如果你不需要100%全屏的那么久需要按照当前浏览器窗口大小去改变div大小，那么需要用到jq追问就是按照当前的浏览器窗口的大小改变div大小，我成绩用过jQuery但是不怎么稳定，可能是我用错了，可以给以实例吗？谢谢您！追答

    无标题页



       div{ border:1px solid #ccc; margin:0 auto; }

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

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

建议 body 下布局一个 DIV, 这个DIV 的 CSS 可以这样处理:{
    position: absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    overflow:auto;
}
然后再在这个 div中进行布局, 子div可以用 100%相对布局, 页面宽度就自动撑开了.

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

那要看你具体的布局方案。$(function(){
    var winWidth,winHeight;
    Resize = function(){
        winWidth = $(window).width(),
        winHeight= $(window).height();
    }
});
解释，Resize函数是当屏幕大小改变（包括载入）的时候对你需要的宽度和高度再赋值，我写的函数里只有拿到了窗口的宽度和高度，你要赋给谁自己确定，自适应布局的话基本也就是那么处理了。