如何使用js调节页面大小让页面自动适应浏览器和屏幕的大小

qq_35634484 2016-08-09 12:10:24
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>Insert title here</title>
<script src="http://localhost/wechattest/public/jquery-3.0.0.js
"></script>
<script>
/* 屏幕大小 */
$(document).ready(function(){
var wi = $(window).width();
var hi = $(window).height();
$("#login11").css("width",wi);
$("#login11").css("height",hi);
$("#login").css("height",hi);
$("#login").css("width",wi);
$("#img").css("width",wi);
$("#img"),css("height",hi);
});
/* 点击时得到触发事件 */
function OnfocusFun(element,elementvalue)
{
if(element.value==elementvalue)
{
element.value="";
element.style.color="#000";
element.type="password";
}
}
/* 离开时触发事件 */
function OnBlurFun(element,elementvalue)
{
if(element.value==""||element.value.replace(/\s/g,"")=="")
{
element.value=elementvalue;
element.style.color="#999";
element.type="text";
}
}

function Funclick(){
var user = $("#username").val();
var password = $("#password").val();
if(user == ""){
alert("请输入用户名");
}else{
if(password == ""){
alert("请输入密码");
}else{
alert("ok");
}
}
}
</script>
<style>
*{margin:0;padding:0;}
body{width:100%;height:100%;}
</style>
</head>
<body>
<div id="login11" style="">
<div class="login" style="">
<!-- LOGO -->
<div class="login-LOGO" style="margin-top:25px;width:600px;">
<img src="LOGO.png" />
<p style="margin-left:300px;margin-top:-20px;font-size:20px;">汽车服务数据共享平台</p>
</div>
<!-- 背景 -->
<div class="login-image" style="margin-top:40px;">
<img src="背景图.png" id="img"/>
</div>
<!-- 用户登录 -->
<div class="login-user" style="position:absolute;width:348px;height:338px;margin-top:-410px;background:#fff;margin-left:870px;">
<h3 style="margin-left:20px;"><p style="font-szie:16px;color:#666666;font-family:微软雅黑;">云数聚登录入口</p></h3>

<div style="float:left;border:1px solid #B5B5B5;margin-top:20px;margin-left:20px;width:38px;height:32px;">
<img src="用户.png" style="margin-left:12px;margin-top:5px;"/>
</div>
<input type="text" name="username" id="username" onblur="OnBlurFun(this,'商户编码 ,手机号')" onfocus="OnfocusFun(this,'商户编码,手机号')" style="border-color:#ffffff;width:266px;height:30px;margin-top:20px;"/><br/>

<div style="float:left;border:1px solid #B5B5B5;margin-top:20px;margin-left:20px;width:38px;height:32px;">
<img src="密码锁.png" style="margin-left:12px;margin-top:5px;"/>
</div>
<input type="password" name="password" id="password" onblur="OnBlurFun(this,'密码')" onfocus="OnfocusFun(this,'密码')" style="border-color:#ffffff;width:266px;height:30px;margin-top:20px;"/>
<br/>

<input type="checkbox" name="check" style="margin-left:20px;margin-top:24px;"><span style="color:#666666;font-size:12px;font-family:微软雅黑;">记住用户名</span>
<span style="font-size:12px;margin-left:180px;"><a href="#" style="text-decoration:none;color:#666666;font-family:微软雅黑;">忘记密码</a></span>
<br/>
<div style="margin-left:20px;margin-top:10px;width:308px;height:42px;color:#fff;font-size:20px;background:#e60012;letter-spacing:24px;text-align:center;line-height:40px;font-family:微软雅黑;cursor:pointer;" onclick="javascript:Funclick();">登录</div>
<div style="margin-top:40px;margin-left:10px;">
<img src="箭头.png" style="margin-left:257px;"/>
<p style="margin-top:-15px;margin-left:275px;"><a href="#" style="text-decoration:none;font-size:12px;color:#e60012;font-family:微软雅黑;">立即注册</a></p>
</div>
</div>
</div>
<div style="margin-top:-48px;text-align:center;color:#666666;font-size:12px;font-family:微软雅黑;">
<p>Copyright@ 2013-2015 www.51hyc.com All Rights Reserved</p>
<p>信息技术有限公司</p>
</div>
</div>
</body>
</html>
如代码我按照百度的加了<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
又加了$(document).ready(function(){
var wi = $(window).width();
var hi = $(window).height();
$("#login11").css("width",wi);
$("#login11").css("height",hi);
$("#login").css("height",hi);
$("#login").css("width",wi);
$("#img").css("width",wi);
$("#img"),css("height",hi);
});
但是还是不能用。。。一直都做后端，公司突然让我开发前端，页面问题有点不知所措，还有就是我的页面在ie和火狐打开没问题，但是到了谷歌就有一部分垮了。
...全文
8160 16 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
酷酷的旭 2019-11-28
  • 打赏
  • 举报
 回复
思路，首先判断不同浏览器的宽度，然后获取dom的样式然后修改，一般都是用栅格布局 视口 百分比 或者rem来兼容
xcr1314 2019-11-28
  • 打赏
  • 举报
 回复
qq_35634484 2016-08-09
  • 打赏
  • 举报
 回复
引用 5 楼 qq_32692441 的回复:
有；；引入bootstrap... http://www.bootcss.com/对着文档抄就可以。。。不懂再问
这个是前端框架吧，我要用是不是还得下载一个才能使用？
qq_35634484 2016-08-09
  • 打赏
  • 举报
 回复
引用 5 楼 qq_32692441 的回复:
有；；引入bootstrap... http://www.bootcss.com/对着文档抄就可以。。。不懂再问
嗯，谢谢，我现在就试试。
一陀牛屎 2016-08-09
  • 打赏
  • 举报
 回复
有；；引入bootstrap... http://www.bootcss.com/对着文档抄就可以。。。不懂再问
qq_35634484 2016-08-09
  • 打赏
  • 举报
 回复
引用 2 楼 theforever 的回复:
1.布局自适应，大多用CSS就能完成。用JS，费力不讨好。 2.页面在Chrome中有问题，是JS或CSS不兼容。 总之，多学学CSS吧。
现在已经在学了，只是突然被抓来做前端，好多东西都来不及学。
qq_35634484 2016-08-09
  • 打赏
  • 举报
 回复
引用 1 楼 qq_32692441 的回复:
首先你要说清楚是手机还是pc的自动适应浏览器和屏幕的大小 ？？？？？？？？？
pc，但是完事他说手机端也要用,有没有办法同时解决两者？
碧海情天-赵亮 2016-08-09
  • 打赏
  • 举报
 回复
1.布局自适应，大多用CSS就能完成。用JS，费力不讨好。
2.页面在Chrome中有问题，是JS或CSS不兼容。
总之，多学学CSS吧。
一陀牛屎 2016-08-09
  • 打赏
  • 举报
 回复
首先你要说清楚是手机还是pc的自动适应浏览器和屏幕的大小 ？？？？？？？？？
一陀牛屎 2016-08-09
  • 打赏
  • 举报
 回复
你要考虑到他是小白
斯洛文尼亚旅游 2016-08-09
  • 打赏
  • 举报
 回复
用css3的media query就行了，不需要js。不过ie8-不支持。通过@media screen控制网站在移动端显示
qqq123 2016-08-09
  • 打赏
  • 举报
 回复
Js肯定是可以实现楼主所要的功能，但是实现起来比较复杂，所以建议楼主换一种思路：使用CSS实现： CSS 的 @media screen 是可以实现自适应页面，或者干脆使用bootstrap。 将过去用js实现的render代码，转义到CSS是一个趋势，例如： 过去只能接事件的鼠标响应显示，现在可以通过CSS的伪类：:focus、::hover 等实现了。
碧海情天-赵亮 2016-08-09
  • 打赏
  • 举报
 回复
不是你笨的问题，前端和后端差异较大，两者都非一日之功，就象你后端很厉害，而且也聪明，转到前端照样需要足够的时间才能掌握到应付各种可能的实用状况。

因此我才说你们公司成问题。术业有专攻，越是正规的大公司，员工负责的工作越专一，即使确实需要转岗的，也有足够丰富和详细的培训材料，并会给予相应的时间供学习。
qq_35634484 2016-08-09
  • 打赏
  • 举报
 回复
引用 9 楼 theforever 的回复:
一看你们公司就没发展。慢慢学慢慢做，等你把需要你做的都做完就是你必须卷铺盖的时候了。 与其那样，不如先抽空寻找一下其它正规有实力的公司。
哎，现在这个静态页面就快弄1死我了，从晚上9点到现在，我估计是我太笨了吧，一直没弄出来，前端完全从0开始做。太难了。
碧海情天-赵亮 2016-08-09
  • 打赏
  • 举报
 回复
一看你们公司就没发展。慢慢学慢慢做，等你把需要你做的都做完就是你必须卷铺盖的时候了。
与其那样，不如先抽空寻找一下其它正规有实力的公司。
一陀牛屎 2016-08-09
  • 打赏
  • 举报
 回复
嗯 对着官网引入就可以了。。。。睡觉
Splitjs是一款可调节大小的拆分视图面板纯JavaScript插件
Split.js是一款可调节大小的拆分视图面板纯JavaScript插件。该插件的特点是轻量级，无需任何外部依赖。Split.js可以轻松的制作出拆分视图（或分割面板）效果。
Lightbox插件（图片大小调节）
Lightbox图片插件（图片大小调节）很实用，可以轻松实现图片显示功能包括上一张 下一张
自适应大小的jquery焦点图动画
自适应大小的jquery焦点图动画，兼容各种浏览器，自适应大小的jquery焦点图动画，兼容各种浏览器
框架自适应高度实例(动态调节框架高度)
框架自适应高度实例 可根据子页面内容高度父框架自动适应
视频播放插件Video.js
视频播放插件Video.js 视频播放插件Video.js 视频播放插件Video.js
JavaScript

87,996

社区成员

224,708

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章