如何用最简单的方法将PCweb改成适合各种设备的web
使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的更多相关文章
- 如何用比较快速的方法掌握Spring的核心——依赖注入,Java web轻量级开发面试教程 读书笔记
我们知道,Java方面的高级程序员一定得掌握Spring的技能,其中包括Spring 依赖注入(IOC),面向切面(AOP),和数据库的整合(比如和Hibernate整合或声明式事务等)以及Sprin ...
- 消息函数一般是私有的,因为不需要程序员显示的调用,但子类如果需要改写这个方法,则改成保护方法Protected
许多的面向对象程序设计语言都支持对消息的处理.消息处理是一种动态响应客户类发出的请求,它与过程调用不同.过程调用中,客户类必须知道服务类提供了哪些过程,以及每个过程的调用约定,并且在调用时需要明确指出 ...
- Qt在Linux环境下应用程序字体模糊的解决方法(先改成使用默认字体,然后使用qtconfig配置)
这两天一直在用Qt实现一个跨平台的软件.软件之前在Windows上编写的,后来放到里Ubuntu 10.10下编译.程序运行时遇到一个很棘手的问题,界面文本非常模糊.后来在网上查阅了好几天的资料,经历 ...
- MySQL笔记-最简单的方法来解决找不到mysqld.sock文件的问题
首先,环境:ubuntu 14.04,采用apt-get的方式安装的,手动安装可能路径设置稍有区别. 1.安装MySQL后,用命令行首次启动时发现找不到Mysqld.sock文件,提示: ERROR ...
- NGUI之Slider,最简单的方法做进度条。
既然标题是最简单的,那么很多东西就不需要我们自己做了,使用的是NGUI的示例,只针对初学者,接下来让我们来做一个最简单游戏设置里的声音控制. 1.导入NGUI: 2.找到NGUI的Menu示例Demo ...
- mfc显示静态图片最简单的方法
一致都是研究如何调用opencv显示动态图片,但是很多时候在显示图标的时候,都是需要显示静态图片,现在将最简单的方法总结下: 1.添加picture控件 2.添加资源,要求为bmp 3.修改属性 结果 ...
- ECshop设置301最快捷最简单的方法
ECshop设置301最快捷最简单的方法 在 init.php中加入以下代码 if (strtolower($_SERVER['SERVER_NAME'])!='www.fz1688.com') { ...
- git 的简单使用方法
git 的简单使用方法1. 服务器 安装完成2. ssh 中的账号创建完成3. 创建 ssh 账号,会在 ssh 的安装目录下的home 目录里面,多了用户家目录4. 进入该目录 ,创建一个新的文件夹 ...
- JavaScript,一个超级简单的方法判断浏览器的内核前缀
先说明,此处的方法是说超级简单的方法,不是指代码超级少,而是用非常简单的知识点,只要懂得怎么写JavaScript的行内样式就可以判断. 大家应该还记得JavaScript行内样式怎么写吧?(看来我是 ...
随机推荐
- 【PHP发展史】PHP5.2 到 PHP5.6 中新增的功能详解
截至目前(2014.2), PHP 的最新稳定版本是 PHP5.5, 但有差不多一半的用户仍在使用已经不在维护的 PHP5.2, 其余的一半用户在使用 PHP5.3. 因为 PHP 那“集百家之长”的 ...
- 编译PHP 报错:node.c: In function dom_canonicalization
编译PHP 报错:node.c: In function dom_canonicalization /opt/php-5.2.17/ext/dom/node.c:1953: error: deref ...
- SpringMVC Controller介绍
SpringMVC Controller 介绍 一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理 ...
- Zero-Copy&sendfile浅析
一.典型IO调用的问题一个典型的web服务器传送静态文件(如CSS,JS,图片等)的过程如下:read(file, tmp_buf, len);write(socket, tmp_buf, len); ...
- OOCSS的概念和思路
<概念> <思路> 面向对象的CSS有两个原则: 独立的结构和样式 独立的容器和内容 以下几点是创建OOCSS的关键部分: 创建一个组件库 独立的容器和内容,并且避免样式来依赖 ...
- [PHP][位转换积累]之pack和unpack
一.前面的话 PHP的pack和unpack提供了为一系列数据打包(pack)和解包(unpack)成2进制流的功能,这个功能在面向字节的字符串处理和套接字的编程环境中尤为适用. 在了解这两个函数之前 ...
- STL_lower_bound&upper_bound用法
ForwardIter lower_bound(ForwardIter first, ForwardIter last,const _Tp& val)算法返回一个非递减序列[first, la ...
- ios build时,Undefined symbols for architecture xxx问题的总结
简单来说,Undefined symbols基本上等于JAVA的ClassNotFoundException,最常见的原因有这几种: build的时候没有加framework 比如说,有一段代码我用了 ...
- TFS二次开发系列:一、TFS体系结构和概念
TFS是Team Fundation Server的简称,是微软VSTS的一部分,它是Microsoft应用程序生命周期管理(ALM)工具的核心协作平台,简单的说它是管理和开发软件项目的整个生命周期的 ...
- Loadrunner监控Linux系统资源
一.安装rsh和rpcbind 1.查看是否安装:rpm -qa |grep rsh 2.安装rsh:yum -y install rsh* 3.yum -y install nfs-utils r ...