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 ...
随机推荐
- kafka 自启脚本
每次使用的时候都要手动去启动真头痛! 解决办法,自启吧! 方法一: 方法一: /etc/rc.local中添加 文件地址记得替换掉 ,我没使用这种,发现不是每次都行,就换了第二种方法 /usr/loc ...
- 对opencv.hpp头文件的认识
OpenCV学习笔记(二):对opencv.hpp头文件的认识 - 安东的技术博客 - CSDN博客 https://blog.csdn.net/xidiancoder/article/details ...
- 微信支付 php发送POST请求
https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=20_1 <_xml> <mch_id>132</mc ...
- rest_framework之访问频率控制
一 自定义频率控制类 class MyThrottle(): visitor_dic = {} def __init__(self): self.history = None def allow_r ...
- Java String.split() 使用注意
java的split()方法用于字符串中根据指定的字符进行分割,得到的是一个字符串数组 public String[] split(String regex) Splits this string a ...
- 对数值数据的格式化处理(保留小数点后N位)
项目中有时会遇到对数值部分进行保留操作,列如保留小数点后2位,所有的数据都按这种格式处理, //保留小数点后2位,都按这种格式处理,没有补0 DecimalFormat df = new Decima ...
- 阿里云上Docker Compose部署wordpress
先上官方文档: https://docs.docker.com/compose/wordpress/ 我的环境: [root@xyjk1002 ~]# cat /etc/redhat-release ...
- php foreach函数的用法
php foreach函数用法举例. Foreach 函数(PHP4/PHP5) foreach 语法结构提供了遍历数组的简单方式. foreach 仅能够应用于数组和对象,如果尝试应用于其他数据类 ...
- str()和repr()(以及``操作符)
内建函数str()和repr()或反引号操作符(``)可以方便的获取字符串. str它会把值转换为合理形式的字符串,可读性更好,同时对用户来说更加友好. repr它会创建一个字符串,以合法的Pytho ...
- day4-递归
递归 特点 递归算法是一种直接或者间接地调用自身算法的过程.在计算机编写程序中,递归算法对解决一大类问题是十分有效的,它往往使算法的描述简洁而且易于理解. 递归算法解决问题的特点: (1) 递归就是在 ...