html5适应屏幕的方案
1、css3 Media queries (针对多版本设计稿)
2、设计稿不复杂的时候 通过宽度自适应用百分比
3、通过更新meta:viewport标签,通过设计稿尺寸和设备尺寸的比例去设置
优点:
1、简单易懂,不需要JavaScript的支持,跨度大
2、适应能力强,代码量较少
3、适应能力强,针对不同的屏幕基本都可以适应
缺点:
1、代码量冗余,需要针对不同的屏幕尺寸去处理,
2、对设计稿有限制
3、页面比较大的时候,加载显示的时候会重绘(待验证)
1、可视区域宽度小于600的时候回应用
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
3、根据设计稿和devicewidth 获得bfb
var design = 420,device = document.documentElement.clientWidth;
var bfb = (device/design).toFixed(1); var atts = "width="+design+", user-scalable=no, initial-scale="+bfb+", maximum-scale="+bfb+", minimum-scale="+bfb
id.setAttribute("content",atts);
html5适应屏幕的方案的更多相关文章
- JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...
- HTML5实现屏幕手势解锁
HTML5实现屏幕手势解锁(转载) https://github.com/lvming6816077/H5lockHow to use? <script type="text/java ...
- Unity2D多分辨率屏幕适配方案(转载)
一下内容转自:http://imgtec.eetrend.com/forum/3992 此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有 ...
- Cocos2d-JS的屏幕适配方案
Cocos2d引擎为游戏开发者提供了屏幕适配策略(Resolution Policy)解决方案. 使用方式 1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolut ...
- cocos2dx屏幕适配方案
我们在利用cocos2dx来开发游戏时,在开始时就不可避免的会遇到屏幕适配问题,来使我们的游戏适应移动终端的各种分辨率大小.目前,大家采用的屏幕适配方案不一,网上的资料也比较丰富,下面我也将自己使用的 ...
- [原创]一种Unity2D多分辨率屏幕适配方案
此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有使用第三方2D插件,如Uni2D,2D toolkit等开发的游戏,NGUI插件不受这个 ...
- HTML5的在线视频播放方案
移动端H5音频与视频问题及解决方案 看下最后实际效果:兼容PC,iphone, 安卓5.0 解决了,手动,自动,不全屏的问题 左边视频代替了动画,然后支持背景蒙板效果,能够透出底图 右边是原视频文件 ...
- Android 屏幕适配方案
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45460089: 本文出自:[张鸿洋的博客] 1.概述 大家在Android开发 ...
- 实用Android 屏幕适配方案分享
转载地址:http://blog.csdn.net/gao_chun/article/details/45645051 真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android ...
随机推荐
- CoffeeScript编译手记
最近折腾bootstrap,看到一个Messager插件挺好的,可这丫的发出来的都是CoffeeScript的DEMO,顿时让我感觉自己已经落后了一百年. 于是各种搜索,各种脑补,原来Coffee最后 ...
- 第20章—跨域访问(CORS)
spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...
- sql语句select group by order by where一般先后顺序
写的顺序:select ... from... where.... group by... having... order by..执行顺序:from... where...group by... h ...
- AHOI2019退役记
$DAY\quad -1$: 连作业都不写了来刷题... 希望能长点$RP$吧... 反正也是抱着退役的心情来考试... 我要是到了周日还不出长门我就退游!!! $DAY\quad 0$: 早上一起来 ...
- Python元组组成的列表转化为字典
虽然元组.列表不可以直接转化为字典,但下面的确是可行的,因为经常用python从数据库中读出的是元组形式的数据. # 原始数据 rows = (('apollo', 'male', '164.jpeg ...
- Linux ssh面密码登录
1.生成自己的公钥和私钥 ssh-keygen -t rsa -P '' -f ~/.ssh/id_rsa 进入~/.ssh目录看多了两个文件:id_rsa id_rsa.pub 其中一个是公钥一 ...
- git常用命令总结(转载)
Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remote:远程仓库 一.新建代码库 # 在当前目录新建一个Git代码库 $ git in ...
- Flash本地共享对象 SharedObject
以下内容是对网上一些资料的总结 Flex SharedObject 介绍(转自http://www.eb163.com/club/thread-3235-1-1.html): Flash的本地共享对象 ...
- mysql中解决主键自增长断号问题
情况一:如果表中本来已经存在数据,并且有断号的现象.那先得删除主键再添加,重新设置自增长. 1.ALTER TABLE student DROP id; 2.ALTER TABLE student A ...
- Git学习笔记-精简版
注意本文参考廖雪博客: http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 一:Git ...