大屏幕现场活动页面
来源:互联网 发布:美图边框软件 编辑:程序博客网 时间:2024/04/28 02:06
思路:
1.脚本:
使用下方代码,来进行比例缩放
//缩放比例
if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
var phoneScale = parseInt(window.screen.width)/750;
document.write('<meta name="viewport" content="width=750, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=750, target-densitydpi=device-dpi">');
}
}else{
document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');
}
2.样式:
最外层
body{height:100%;添加background-color,与设计稿的底色一样}
下层div{position:relative;宽高按照设计稿尺寸设置;margin:0 auto;overflow:hidden;}
配置各个模块样式即可
PS:background-size:cover;(背景图平铺)
例子:
/*全站通用样式*/
html,body { height:100%; }
body.page-pc { background:#2387f8; }
.pageWrap { position:relative; width:1024px; height:768px; margin:0 auto; overflow:hidden; }
/*第一页*/
.page1{position:relative; width:100%; height:100%; margin:0 auto; background:url(../images/bg.jpg) no-repeat center; background-size:cover;}
.page1 .btn{position:absolute; top:164px; right:52px;width: 138px;height:138px;cursor:pointer;}
/*第二页*/
.page2{position:relative; width:100%; height:100%; margin:0 auto; background:url(../images/bg2.jpg) no-repeat center; background-size:cover;}
.page2 span{display:block; width:50px; height:80px; line-height: 80px; position: absolute; top:50%; left:50%; margin-top:-75px; margin-left: -60px; font-size: 100px; color:#fcf02a; text-align: center;}
3.逻辑:
手机页面进行动作,如:填写用户信息,点赞等等
后台进行信息获取后,跳转页面,
将信息ajax传回页面上显示
以下即为最近刚做的大屏幕项目的效果
ps:
稿的宽度是750px。
因为给的设计稿比例是4:3,
所以按照4:3做的,
但是现场的屏幕是16:9的,还好做了底色填充才没有穿帮,
如果最开始设计稿就按照16:9设计的话效果会更好
- 大屏幕现场活动页面
- Bootstrap 徽章、大屏幕展播、页面标题、缩略图
- “国际软件自由日”活动现场记录
- 简单活动页面布局
- 6.24 BEA成都User Group活动现场相片
- IBM用户组12月最新活动现场照片
- 活动现场-SD 2.0 2009 组织级敏捷实施路线图
- 富士通笔记本现场品鉴活动开始接受报名啦!
- 富士通笔记本现场品鉴活动开始接受报名啦!
- 大观楼第一天划船比赛日 活动现场回顾
- 当技术遇到激情 -云助力活动现场播报
- 使用Azure媒体服务对现场活动进行直播
- 敏捷之旅西安站现场活动,6大主题
- 大屏幕自适应
- 3.7Bootstrap学习组件篇之大屏幕介绍、页面标题、缩略图、警示框、Well
- Bootstrap3.0学习第十五轮(大屏幕介绍、页面标题、缩略图、警示框、Well)
- Bootstrap3.0学习第十五轮(大屏幕介绍、页面标题、缩略图、警示框、Well)
- 优惠券(现活动)一级页面
- 海量U盘传输协议的一点总结汇总
- MongoDB Windows环境安装及配置
- EAS 根据人员查找职位申报部门
- JCS原理及使用
- ARKit从入门到精通(9)-ARKit让飞机跟着镜头飞起来
- 大屏幕现场活动页面
- php 引用并不是指针
- 动态加载 高级应用之StoryBorad
- ReactNative开发——滑动组件
- Matlab中xlabel和ylabel的用法
- 笔记-虚拟化
- 【excel VBA】合并一个文件夹下多张excel表数据,前提字段一样
- git常用命令记录
- Java 取中间文本(getSubString)