mobile_5 种常见适配_设备兼容
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 种常见适配_设备兼容的更多相关文章
- 迅为4412开发板Linux驱动教程——总线_设备_驱动注册流程详解
本文转自:http://www.topeetboard.com 视频下载地址: 驱动注册:http://pan.baidu.com/s/1i34HcDB 设备注册:http://pan.baidu.c ...
- 解决蓝屏代吗0x0000007B的几种常见办法
解决蓝屏代吗0x0000007B的几种常见办法 0x0000007B 蓝屏代码的分析 ◆错误分析:Windows在启动过程中无法访问系统分区或启动卷. 网络上经过收集,主要有四种可能.第一是新 ...
- 移动Web开发图片自适应两种常见情况解决方案
本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...
- 迅为4412开发板Linux驱动教程——总线_设备_驱动注冊流程具体解释
视频下载地址: 驱动注冊:http://pan.baidu.com/s/1i34HcDB 设备注冊:http://pan.baidu.com/s/1kTlGkcR 总线_设备_驱动注冊流程具体解释 • ...
- 几种常见的Android自动化测试框架及其应用
随着Android应用得越来越广,越来越多的公司推出了自己移动应用测试平台.例如,百度的MTC.东软易测云.Testin云测试平台…….由于自己所在项目组就是做终端测试工具的,故抽空了解了下几种常见的 ...
- 移动站Web开发图片自适应两种常见情况解决方案
本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...
- 【原】pageResponse - 让H5适配移动设备全家(移动端适配)
上一篇文章<为什么选择iPhone5的分辨率作为H5视觉稿尺寸>最后留下了问题:是否需要视觉设计师设计多套的视觉稿供给前端工程师做页面适配呢?按照自己以前的方法,通常会要求设计师设计2套的 ...
- 【原】让H5页面适配移动设备全家 - 前端篇 - PPT
7月份在部门内给设计中心的同事们带来<让H5页面适配移动设备全家 - 设计师篇 - PPT>的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同 ...
- 几种常见的Shell
Unix/Linux上常见的Shell脚本解释器有bash.sh.csh.ksh等,习惯上把它们称作一种Shell.我们常说有多少种Shell,其实说的是Shell脚本解释器. bash bash是L ...
随机推荐
- ETL过程跑完后，使用python发送邮件
目标库中,如果有行数为0的表,使用python发送邮件 # -*- coding:utf-8 -*- # Author: zjc # Description:send monitor info to ...
- Spring Cloud使用样例
Spring Cloud Demo 项目地址:https://github.com/hackyoMa/spring-cloud-demo 组件 基于Spring Boot 2.0.4.Spring C ...
- 第六节：WebApi的部署方式(自托管)
一. 简单说明 开篇就介绍过WebApi和MVC相比,其中优势之一就是WebApi可以不依赖于IIS部署,可以自托管,当然这里指的是 .Net FrameWork 下的 WebApi 和 MVC 相比 ...
- 使用 functional interface 和 lambda 表达式来优化代码
========================================原始代码========================================RoleService 类有删除 ...
- Best Practice API
# 建议直接使用的第三方类 Common Lang =>StringUtils =>Validate Guava =>Cache =>Ordering JDK7(LTS JDK ...
- 关于Linux的随笔笔记
1.Ctrl+c.Ctrl+z和Ctrl+d的区别: Ctrl+c和Ctrl+z都是中断命令,但是他们的作用却不一样: Ctrl+c 是向当前进程发送SIGINT信号,用于终止进程: Ctrl+z 是 ...
- mac使用apktool打包回apk
升级最新版的apktool 下载目录:https://ibotpeaches.github.io/Apktool/install/. 权限修改 将上述的文件放在usr/local/bin目录下并执行 ...
- if 语句中的判断
经常写shell的朋友可能已经很熟了.有不同意见的同学请指出来,在这里多谢大家了. bash中如何实现条件判断?条件测试类型: 整数测试 字符测试 文件测试 一.条件测试的表达式: ...
- Mac OS X系统下，svn: Can't remove file Operation not permitted.解决方案
当你的svn出现类似以下错误时,提示Operation not permitted之类的问题,说明项目下 .svn文件夹内的文件权限有问题. 一般是由于windows和mac操作系统同时操作同个svn ...
- python-argparse批量修改后缀名-batch_file_rename.py
#!/bin/usr/env python3 __author__ = 'nxz' import os import argparse def batch_rename(work_dir, old_e ...