em  参照本身元素的 font-size

rem 参照 html 根元素 的 font-size

1. rem 适配   （同一元素，在不同设备上，效果一样）

适用情况： 当页面大于 独立像素375 时，或者页面元素很多时

  • 原理

页面中的元素，统一 单位 rem（字体使用 px 而不使用 rem）

根元素字体大小 设置成 整个屏幕的宽（1 rem = 375px），然后元素的 css 像素根据占据屏宽，使用 rem

  • // 适配 (手写 面试题)
    
            (function(){
    
                /* 1. 创建 style 标签 */
    
                var styleNode = document.createElement("style");

                /* 2. 给 style 标签添加内容 (屏幕分份, 大多数公司 16 份) */
    
                styleNode.innerHTML = "html {"+
    
                                           "font-size:"+width/16+"px !important"+
    
                                      "}";    /* IPhone 6 的 font-size: 23.4375px */

                /* 3. 把 style 标签追加到 head 标签里 */
    
                document.head.appendChild(styleNode);
    
            }());

缺点： 需换算元素占屏幕的 rem

2. viewport 适配

适用情况： 当 ui 设计图 小于 独立像素 375时。        避免换算，直接使用 css 像素单位 px

缺点： 图片可能失真； 打破完美布局视口。

  • 原理：

让 布局视口 等于 设计图纸的 width

  • 方案1

（直接 让meta 标签中 content 的 布局视口 width=320px 安卓不支持）

  • 方案2
  • （放大操作 initial-scale=375/320，布局视口变小）
  • <head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    
</head>

<script type="text/javascript">
    
    var clientWidth = document.documentElement.clientWidth;

    var targetWidth = 320;

    var scale = clientWidth/targetWidth;

    var metaNode =
    
    document.querySelector("meta[name='viewport']");

    metaNode.content = "initial-scale="+scale+
    
                       ", user-scalable=no";
    
</script>

3. 百分比适配

zepto 移动端实战项目。

适用情况： 页面元素少。

4. 媒体选择器（响应式布局）

不同屏幕，自适应呈现出不同的布局。

5. 具体像素值

适用情况： 当 ui 设计图 未标明 宽度，以及元素的具体位置时。

关键点：

  • 结合 媒体选择器 在不同情况下，使用 2x 图 和 3x 图（dpr=2时使用2x图，dpr=3时使用3x图）
  • 元素不可直接使用 ui 设计图 的标注px，必须问清楚 dpr 是多少，然后算出具体的 css 像素
    • css 像素 = 物理像素 / dpr  = 位图像素/dpr = 设计图px/dpr
    • css 像素 = 128/2 = 64          比如 128px*128px 的图片的 css 像素应该是 64 px

mobile_5 种常见适配_设备兼容的更多相关文章

  1. 迅为4412开发板Linux驱动教程——总线_设备_驱动注册流程详解

    本文转自:http://www.topeetboard.com 视频下载地址: 驱动注册:http://pan.baidu.com/s/1i34HcDB 设备注册:http://pan.baidu.c ...

  2. 解决蓝屏代吗0x0000007B的几种常见办法

        解决蓝屏代吗0x0000007B的几种常见办法 0x0000007B 蓝屏代码的分析 ◆错误分析:Windows在启动过程中无法访问系统分区或启动卷. 网络上经过收集,主要有四种可能.第一是新 ...

  3. 移动Web开发图片自适应两种常见情况解决方案

    本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...

  4. 迅为4412开发板Linux驱动教程——总线_设备_驱动注冊流程具体解释

    视频下载地址: 驱动注冊:http://pan.baidu.com/s/1i34HcDB 设备注冊:http://pan.baidu.com/s/1kTlGkcR 总线_设备_驱动注冊流程具体解释 • ...

  5. 几种常见的Android自动化测试框架及其应用

    随着Android应用得越来越广,越来越多的公司推出了自己移动应用测试平台.例如,百度的MTC.东软易测云.Testin云测试平台…….由于自己所在项目组就是做终端测试工具的,故抽空了解了下几种常见的 ...

  6. 移动站Web开发图片自适应两种常见情况解决方案

    本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...

  7. 【原】pageResponse - 让H5适配移动设备全家(移动端适配)

    上一篇文章<为什么选择iPhone5的分辨率作为H5视觉稿尺寸>最后留下了问题:是否需要视觉设计师设计多套的视觉稿供给前端工程师做页面适配呢?按照自己以前的方法,通常会要求设计师设计2套的 ...

  8. 【原】让H5页面适配移动设备全家 - 前端篇 - PPT

    7月份在部门内给设计中心的同事们带来<让H5页面适配移动设备全家 - 设计师篇 - PPT>的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同 ...

  9. 几种常见的Shell

    Unix/Linux上常见的Shell脚本解释器有bash.sh.csh.ksh等,习惯上把它们称作一种Shell.我们常说有多少种Shell,其实说的是Shell脚本解释器. bash bash是L ...

随机推荐

  1. VMware 虚拟机运行卡慢的解决办法

    虚拟机的运行速度有一部分原因决定于你的物理机的配置,如果你的物理机配置不高,建议不要运行虚拟机,那样反而会更卡! 切记!!!在操作之前,先给虚拟机拍摄一个快照,然后所有操作都在虚拟机关机的情况下执行! ...

  2. Entity Framework入门教程（10)---离线场景保存和删除实体/实体图集

    离线场景保存和删除实体/实体图集 这一节的内容是在离线场景中保存实体和实体图集 在离线场景中,当我们保存一个离线的实体图集或一个单独的离线实体时,我们需要做两件事.首先,我们要把实体附加到新的上下文中 ...

  3. 第四节：Task的启动的四种方式以及Task、TaskFactory的线程等待和线程延续的解决方案

    一. 背景 揭秘: 在前面的章节介绍过,Task出现之前,微软的多线程处理方式有:Thread→ThreadPool→委托的异步调用,虽然也可以基本业务需要的多线程场景,但它们在多个线程的等待处理方面 ...

  4. 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性)

    一. 简介 上一个章节中,也介绍了立即加载和延迟加载,但上一个章节是针对单表而言的,不含外键,立即也好,延迟也好,都是指单表中的数据.但本章节重点介绍的三种加载方式均是针对含(导航属性.外键)的情况下 ...

  5. HTML（五）HTML表格

    标准表格 <table border="1"> <caption>Monthly savings</caption> <tr> &l ...

  6. 五十、进程间通信——System V IPC 之共享内存

    50.1 共享内存 50.1.1 共享内存的概念 共享内存区域是被多个进程共享的一部分物理内存 多个进程都可把该共享内存映射到自己的虚拟内存空间.所有用户空间的进程若要操作共享内存,都要将其映射到自己 ...

  7. ceph简单用户管理

    列出所有用户 ceph auth list 获取指定用户 ceph auth get client.admin 新增用户并输出密钥环 ceph auth get-or-create client.ge ...

  8. 【译】索引进阶（一）：SQL SERVER索引介绍

      [译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正]  原文链接:http://www.sqlservercentral.com/articles/Stairway+Series/7 ...

  9. perl 之 正则表达式 （简）

    正则表达式,简单介绍: 元字符 匹配项 字符类:单字符与数字   . 匹配除换行符之外的任意字符 [a-z0-9] 匹配集中任意单字符 [^a-z0-9] 匹配不在集合中的任意单字符 \d 匹配单个数 ...

  10. C++设计模式——命令模式

    什么是命令模式? 在GOF的<设计模式:可复用面向对象软件的基础>一书中对命令模式是这样说的:将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以 ...