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 ...
随机推荐
- BFC块级格式化上下文
BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...
- SQL注入关联分析
在Web攻防中,SQL注入绝对是一个技能的频繁项,为了技术的成熟化.自动化.智能化,我们有必要建立SQL注入与之相关典型技术之间的关联规则.在分析过程中,整个规则均围绕核心词进行直线展开,我们简单称之 ...
- Arduino传感器学习目录
Arduino-接口图 在Windows上安装Arduino-IDE 函数库和程序架构介绍 Arduino语法-变量和常量 Arduino常用的数据类型以及转换 Arduino—运算符 ...
- Xml序列化 详解
http://www.cnblogs.com/kissdodog/archive/2013/12/10/3468385.html
- ASP.NET Core学习之五 EntityFrameworkCore
目的:运用EntityFrameworkCore ,使用codefirst开发 一.创建web项目 创建一个不进行身份验证的 ASP.NET Core Web Application (.NET ...
- css :root 选择器
:root css 伪类匹配文档的根元素. 对于 HTML 来说, :root 表示<html>元素,除了优先级更高之外,与 html 选择器相同. 在声明全局 css 变量时 :root ...
- 帆软报表（finereport） 动态报表
动态表实现了不同的人根据需要选择不同的表进行查看,从而提高查询效率 在定义数据集时,通过if函数来判断参数的值从而来实现调用不同的数据表 如直接将SQL语句定义成:SELECT * FROM ${if ...
- 51nod--1072 威佐夫游戏 （博弈论）
题目: 1072 威佐夫游戏 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 有2堆石子.A B两个人轮流拿,A先拿.每次可以从一堆中取任意个或从2堆中取相同 ...
- Java框架之spring框架的优点，为什么要学习spring框架
为什么要学习Spring的框架a: 方便解耦,简化开发 Spring就是一个大工厂,可以将所有对象创建和依赖关系维护,交给Spring管理 b:AOP编程的支持 Spring提供面向切 ...
- 滑动时候报错：Unable to preventDefault inside passive event listener, 移动端滑动性能优化
https://www.jianshu.com/p/04bf173826aa 记录下 这篇帖子 解决办法1: 在touch的事件监听方法上绑定第三个参数{ passive: false }, 通过传 ...