webapp设置适应pc和手机的页面宽高以及布局层叠图片文字
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>我趣旅行网-美剧迷</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="wrapper">
<img class="bg" src="img/background.png"/>
<img class="logo" src="img/pisode_logo.png">
<p class="pisode">Pisode</p>
</div>
</body>
</html>
css:
html,body{
height:100%;
margin:0;
padding:0;
}
.wrapper{
position:relative;
margin: 0 auto;
max-width: 500px;
min-height: 100%;
text-align: center;
width: 100%;
}
.bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
height: 100%;
}
.logo{
width:100%;
}
.pisode{
font-size:14px;
}
效果图:
访问链接:http://2.chuang8.sinaapp.com
webapp设置适应pc和手机的页面宽高以及布局层叠图片文字的更多相关文章
- javascript 常用获取页面宽高信息 API
在页面的构建中 常常会需要获取页面的一些宽高信息,例如实现 惰性加载图片 需要获取页面的可见区域高度 和 已滚动区域的高度,以判断图片所在位置是否可见来决定加载图片的时间, 花点时间整理了一下,获取页 ...
- jquery获取元素各种宽高及页面宽高总结
window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/mar ...
- jquery获取元素各种宽高及页面宽高
如何使用jquery来获取网页里各种高度? 示例如下: $(document).ready(function(){ var divWidth = $("#div").width( ...
- js动态添加iframe,自适应页面宽高
function showIframe(url,w,h){ //添加iframe var if_w = w; var if_h = h; $("<iframe width='" ...
- jQuery 获取页面宽高
无滚动条的情况下(页面宽高比可视区域小):$(document)和$(window)的width.height方法获取的值都是一样的,都是可视区域的宽高即$(document).width()==$( ...
- 页面中iframe中嵌入一个跨域的页面,让这个页面按照嵌入的页面宽高大小显示的方式;iframe嵌套的页面不可以编辑的问题解决方案
<html> <head> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; ...
- jq弹窗(获取页面宽高,滚轮高度,始终居中)
jq写一个弹窗,效果如上图所示, 点击按钮弹窗弹出,右上角关闭. 弹窗始终显示在页面中间,无论放大缩小窗口,滚轮滚动. 代码如下: html: <br><br><br&g ...
- 屏幕的遮挡层,js得到屏幕宽高、页面宽高 (window.screen.availHeight)等--
window.screen.availWidth 返回当前屏幕宽度(空白空间) ------当手机有输入法的时候,要注意................window.screen.availHeigh ...
- js得到屏幕宽高、页面宽高 (window.screen.availHeight)等--笔记
window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width ...
随机推荐
- Wojilu学习笔记 (02)
使用RequireJS (1)整个页面,应该只有一个 <script src="" > 标签,并且放在页面底部,用来引入 RequireJS 和 main.js 文件 ...
- csharp: DBNull and DateTime
/// <summary> /// /// </summary> /// <param name="dateTime"></param&g ...
- Quartz中的时间表达式介绍和常用表达式
Quartz.NET是一个开源的作业调度框架,是 OpenSymphony 的 Quartz API 的.NET移植,它用C#写成,可用于winform和asp.net应用中.它提供了巨大的灵活性而不 ...
- Gym 101102D---Rectangles(单调栈)
题目链接 http://codeforces.com/gym/101102/problem/D problem description Given an R×C grid with each cel ...
- [css] CSS3中的单位
FROM http://www.qianduan.net/understand-the-unit-of-length-in-the-css.html CSS3中的单位: css3中引入了一些新的单位: ...
- 详解Javascript 函数声明和函数表达式的区别
Javascript Function无处不在,而且功能强大!通过Javascript函数可以让JS具有面向对象的一些特征,实现封装.继承等,也可以让代码得到复用.但事物都有两面性,Javascrip ...
- [js开源组件开发]tip提示组件
tip提示组件 常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件 ...
- swift学习笔记之-协议
//协议(Protocols) import UIKit /*协议(Protocols) 1.协议定义了一个蓝图,规定了用来实现某一特定任务或者功能的方法.属性,以及其他需要的东西 2.类.结构体或枚 ...
- AE,按照属性值关系选择要素
if(axMapControl2.LayerCount<=0) { MessageBox.Show("请加载图层后使用该功能","系统提示",Messag ...
- SharePoint 开启网站匿名访问图文详解
SharePoint 开启网站匿名,需要先开启web application的匿名访问,然后开启site的匿名访问.特别的,site可以选择整个网站开启或者列表和库开启匿名,如果选择列表和库开启匿名, ...