适应屏幕的方案:

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适应屏幕的方案的更多相关文章

  1. JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案

    1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...

  2. HTML5实现屏幕手势解锁

    HTML5实现屏幕手势解锁(转载) https://github.com/lvming6816077/H5lockHow to use? <script type="text/java ...

  3. Unity2D多分辨率屏幕适配方案(转载)

    一下内容转自:http://imgtec.eetrend.com/forum/3992 此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有 ...

  4. Cocos2d-JS的屏幕适配方案

    Cocos2d引擎为游戏开发者提供了屏幕适配策略(Resolution Policy)解决方案. 使用方式 1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolut ...

  5. cocos2dx屏幕适配方案

    我们在利用cocos2dx来开发游戏时,在开始时就不可避免的会遇到屏幕适配问题,来使我们的游戏适应移动终端的各种分辨率大小.目前,大家采用的屏幕适配方案不一,网上的资料也比较丰富,下面我也将自己使用的 ...

  6. [原创]一种Unity2D多分辨率屏幕适配方案

    此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有使用第三方2D插件,如Uni2D,2D toolkit等开发的游戏,NGUI插件不受这个 ...

  7. HTML5的在线视频播放方案

    移动端H5音频与视频问题及解决方案 看下最后实际效果:兼容PC,iphone, 安卓5.0 解决了,手动,自动,不全屏的问题 左边视频代替了动画,然后支持背景蒙板效果,能够透出底图 右边是原视频文件 ...

  8. Android 屏幕适配方案

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45460089: 本文出自:[张鸿洋的博客] 1.概述 大家在Android开发 ...

  9. 实用Android 屏幕适配方案分享

    转载地址:http://blog.csdn.net/gao_chun/article/details/45645051 真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android ...

随机推荐

  1. kafka 自启脚本

    每次使用的时候都要手动去启动真头痛! 解决办法,自启吧! 方法一: 方法一: /etc/rc.local中添加 文件地址记得替换掉 ,我没使用这种,发现不是每次都行,就换了第二种方法 /usr/loc ...

  2. 对opencv.hpp头文件的认识

    OpenCV学习笔记(二):对opencv.hpp头文件的认识 - 安东的技术博客 - CSDN博客 https://blog.csdn.net/xidiancoder/article/details ...

  3. 微信支付 php发送POST请求

    https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=20_1 <_xml> <mch_id>132</mc ...

  4. rest_framework之访问频率控制

    一  自定义频率控制类 class MyThrottle(): visitor_dic = {} def __init__(self): self.history = None def allow_r ...

  5. Java String.split() 使用注意

    java的split()方法用于字符串中根据指定的字符进行分割,得到的是一个字符串数组 public String[] split(String regex) Splits this string a ...

  6. 对数值数据的格式化处理(保留小数点后N位)

    项目中有时会遇到对数值部分进行保留操作,列如保留小数点后2位,所有的数据都按这种格式处理, //保留小数点后2位,都按这种格式处理,没有补0 DecimalFormat df = new Decima ...

  7. 阿里云上Docker Compose部署wordpress

    先上官方文档: https://docs.docker.com/compose/wordpress/ 我的环境: [root@xyjk1002 ~]# cat /etc/redhat-release ...

  8. php foreach函数的用法

    php foreach函数用法举例.  Foreach 函数(PHP4/PHP5) foreach 语法结构提供了遍历数组的简单方式. foreach 仅能够应用于数组和对象,如果尝试应用于其他数据类 ...

  9. str()和repr()(以及``操作符)

    内建函数str()和repr()或反引号操作符(``)可以方便的获取字符串. str它会把值转换为合理形式的字符串,可读性更好,同时对用户来说更加友好. repr它会创建一个字符串,以合法的Pytho ...

  10. day4-递归

    递归 特点 递归算法是一种直接或者间接地调用自身算法的过程.在计算机编写程序中,递归算法对解决一大类问题是十分有效的,它往往使算法的描述简洁而且易于理解. 递归算法解决问题的特点: (1) 递归就是在 ...