使web页面自适应设备大小

1）用一个<div>包围<body>的内容

2）该div属性的宽度设为100%   (宽度设为100%后，页面会随着设备窗口大小自动改变)

3）高度：通过window.innerHeight获得设备高度在通过jQuery的css()动态改变元素

（如果没有设高度，则页面高度会随着内容高度的变化而变化）

 <style>

  *{

                 margin:0;

                 padding:0;

    }

  .knr{

                 margin:0 auto;

                 padding:0 auto;

                 width:100%;

                 background:url('./bg.jpg') no-repeat;

                 background-size:cover

     }

 </style>

 <script src="jquery-1.11.1.min.js"></script>
 <body style="text-align: center;">

   <script>

     $(function(){

     var a=$(window).height();//通过jQuery获取设备，可以通过js获取设备高度：window.innerHeight

      $('.knr').css('height',window.innerHeight);//获取class为knr的对象，动态设置高度

      $(window).resize(function(){//但当前页窗口大小变化时，动态改变高度

      $('.knr').css('height',window.innerHeight);

     });

 });

  </script>

 <div class="knr">

 <form method="post" action="dozhuce.php">

 <span style="color:#336600;font-family:楷体;font-size:150%;">账　　号:</span>

 <input type="text" name="fmuser" style="background:transparent;color:white" id="fmuser"/><br/><br/>

 <span style="color:#336600;font-family:楷体;font-size:150%;">密　　码:</span>

 <input type="password" name="fmpw" style="background:transparent;color:white" id="fmpw"/><br/><br/>

 <input type="button" value="登入" style="background:transparent;color:white;" id="login"> <input type="button" value="注册" style="background:transparent;color:white;" id="getzhuce"><br/><br/>

 <div id="result" style="color:red"></div>

 </form>

 </div>

 </body>

当然，使页面自适应设备大小的还可以通过响应式来实现。

响应式网页设计，就是检测用户不同的设备，不同的浏览器器尺寸，提供给用户不同的页面，让所有用户都能达到美观的效果。

如何用最简单的方法将PCweb改成适合各种设备的web的更多相关文章

  1. 如何用比较快速的方法掌握Spring的核心——依赖注入，Java web轻量级开发面试教程 读书笔记

    我们知道,Java方面的高级程序员一定得掌握Spring的技能,其中包括Spring 依赖注入(IOC),面向切面(AOP),和数据库的整合(比如和Hibernate整合或声明式事务等)以及Sprin ...

  2. 消息函数一般是私有的，因为不需要程序员显示的调用，但子类如果需要改写这个方法，则改成保护方法Protected

    许多的面向对象程序设计语言都支持对消息的处理.消息处理是一种动态响应客户类发出的请求,它与过程调用不同.过程调用中,客户类必须知道服务类提供了哪些过程,以及每个过程的调用约定,并且在调用时需要明确指出 ...

  3. Qt在Linux环境下应用程序字体模糊的解决方法（先改成使用默认字体，然后使用qtconfig配置）

    这两天一直在用Qt实现一个跨平台的软件.软件之前在Windows上编写的,后来放到里Ubuntu 10.10下编译.程序运行时遇到一个很棘手的问题,界面文本非常模糊.后来在网上查阅了好几天的资料,经历 ...

  4. MySQL笔记-最简单的方法来解决找不到mysqld.sock文件的问题

    首先,环境:ubuntu 14.04,采用apt-get的方式安装的,手动安装可能路径设置稍有区别. 1.安装MySQL后,用命令行首次启动时发现找不到Mysqld.sock文件,提示: ERROR ...

  5. NGUI之Slider，最简单的方法做进度条。

    既然标题是最简单的,那么很多东西就不需要我们自己做了,使用的是NGUI的示例,只针对初学者,接下来让我们来做一个最简单游戏设置里的声音控制. 1.导入NGUI: 2.找到NGUI的Menu示例Demo ...

  6. mfc显示静态图片最简单的方法

    一致都是研究如何调用opencv显示动态图片,但是很多时候在显示图标的时候,都是需要显示静态图片,现在将最简单的方法总结下: 1.添加picture控件 2.添加资源,要求为bmp 3.修改属性 结果 ...

  7. ECshop设置301最快捷最简单的方法

    ECshop设置301最快捷最简单的方法 在 init.php中加入以下代码 if (strtolower($_SERVER['SERVER_NAME'])!='www.fz1688.com') { ...

  8. git 的简单使用方法

    git 的简单使用方法1. 服务器 安装完成2. ssh 中的账号创建完成3. 创建 ssh 账号,会在 ssh 的安装目录下的home 目录里面,多了用户家目录4. 进入该目录 ,创建一个新的文件夹 ...

  9. JavaScript，一个超级简单的方法判断浏览器的内核前缀

    先说明,此处的方法是说超级简单的方法,不是指代码超级少,而是用非常简单的知识点,只要懂得怎么写JavaScript的行内样式就可以判断. 大家应该还记得JavaScript行内样式怎么写吧?(看来我是 ...

随机推荐

  1. java表格的使用 单元格绘制二

    JTable单元格是由单元格绘制器绘制出来的,这是一些执行TableCellRenderer接口的类.TableCellRenderer接口定义了唯一的getTableCellRendererComp ...

  2. Tools

    Database: Online Schema Tool: http://dbdsgnr.appspot.com/ Orcale --> SQL developer MySQL--> To ...

  3. Ruby常用比较操作符

    操作符 含义 == 测试值是否相等 ==== 用来比较case语句的目标和每个when从句的项 <=>  通用比较操作符. 根据接受者小于, 等于, 大于其参数, 返回-1, 0. 1 & ...

  4. JavaScript方法call、apply、caller、callee、bind的使用详解及区别

    一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). 即  “某个方法”当做“指定的某个对象”的“方法”被执行. Js代 ...

  5. C和指针 第三章 指针常量与常量指针

    c语言中声明常量的两种方式 const int value int const value 如果要声明常量的指针,即指向常量的指针,则可以参考上面的常量声明修改一下 const int *ptr in ...

  6. sql 创建表、删除表 增加字段 删除字段操作

    下面是Sql Server 和 Access 操作数据库结构的常用Sql,希望对你有所帮助. 新建表:create table [表名]([自动编号字段] int IDENTITY (1,1) PRI ...

  7. UIStackView

    既要温故又要知新...温故而知新,我懂. 在Cocoachina上看到了,UIStackView. 没用过额,试iOS9的新特性.一研究,妈的还挺眼熟.一想,这不和Android上的线性布局一样么.. ...

  8. CH Round #56 - 国庆节欢乐赛解题报告

    最近CH上的比赛很多,在此会全部写出解题报告,与大家交流一下解题方法与技巧. T1 魔幻森林 描述 Cortana来到了一片魔幻森林,这片森林可以被视作一个N*M的矩阵,矩阵中的每个位置上都长着一棵树 ...

  9. js遮罩效果

    function ShowLoadingMaskLayer(text) { var htmlContent = '<div id=\"masklayer\">' + ' ...

  10. Java GridBagLayout 简单使用

    这里只介绍了很基础布局构建及使用,主要是关于 GridBagLayout. 首先整套流程大概是, 声明一个 GridBagLayout 对象 private GridBagLayout gridBag ...