移动端适配 学习笔记

几个专有名词和单位

(iphone6)

• 分辨率：1334pt x 750pt

  屏幕垂直像素有 1136 个，水平有 750 个

• 屏幕像素密度：326 ppi

  每英寸屏幕拥有的像素数，显示器中，dpi = ppi, dpi 强调每英寸多少点

  屏幕像素密度 = 分辨率 / 屏幕尺寸

• 设备独立像素

  虚拟化的。

• 设备像素比(dpr)

  设备像素比 = 设备像素 / css 像素(垂直或水平方向)

  -webkit-device-pixel-ratio
  -webkit-max-device-pixel-ratio
  -webkit-min-device-pixel-ratio
  //css中，进行媒体查询，对不同 dpr 的设备，做一些样式适配
  resolution | min-resolution | max-resolution(新的标准方式)
  

  window.devicePixelRatio //js获取设备像素比
  

• 屏幕尺寸：4.7in

  英尺，长度单位，4.7in 指屏幕对角线长度为 4.7in，1in = 2.54cm;

PC端、移动端视口比较

视窗 viewport

严格等于浏览器窗口。桌面浏览器中，viewport为浏览器窗口的宽度高度，但移动端的viewport太窄，为更好为css布局，提供两个viewport：虚拟的 visualviewport和布局的layoutviewport

视窗单位

• vw: 1vm = 视窗宽度的1%
• vh：1vh = 视窗高度的1%
• vmin：选取 vw 与 vh 中最小的那个
• vmax：选取 vw 与 vh 中最大的那个

PC端

状态	默认	放大	缩小
布局视口	相等	缩小	放大
视觉视口	相等	缩小	放大
浏览器窗口(基准)	-	-	-

移动端

状态	默认	放大	缩小
布局视口(CSS)	偏大	不变	不变
视觉视口(呈现给用户)	相等	缩小	放大
浏览器窗口(基准)	-	-	-

理想视口

即浏览器(屏幕)宽度

<meta name = "viewport" content = "width=device-width">
//IE横竖屏切换过程中出现不兼容
<meta name = "viewport" content = "width=device-width,initial-scale=1">

initial-scale=1,初始缩放比例为 1，同时会将 布局视口的尺寸设置为缩放后的尺寸

Retina 屏幕&普通屏幕，模糊的由来

• 位图像素

  栅格图像 ( png , jpg , gif 等) 最小的数据单元，每一个位图像素均包含一些自身的显示信息(显示位置，颜色值，透明度等)

  一个位图像素 --> 1个物理像素，图片才能得到完美清晰的展示

• 缩放比 scale

  scale = 1/dpr

dpr 的表现

普通屏幕，retina 屏幕(高清设备屏幕，1个css像素对应4个物理像素) ，CSS像素呈现的大小一致。不同的是，1个css像素对应(覆盖)的物理像素个数

模糊的解决

布局概念

1. 静态布局

   以px作单位

2. 流式布局

   宽度使用百分比，高度使用px作单位

3. 自适应布局

   创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。使用@media媒体查询切换多个布局

4. 响应式布局

   流式布局 + 弹性布局，搭配媒体查询技术

5. 弹性布局

   rem/em布局，

   • rem ,相对于html元素的font-size大小而言，有一些hack的特点
   • 比较规范的是 vm单位
   • em,相对于父元素

   淘宝的Flexible(Rem布局的应用)

REM 布局

1 rem = 100 px

核心: 设置根 html 元素的 font-size

一般来说，为了防止在高清屏幕下像素不够用导致模糊，我们拿到的设计稿是640px（iphone5 设备宽为320px）或750px的两倍稿（iphone6 设备宽为375px），按照设备宽度做了两倍的大小。

那开发的时候在CSS中要设置什么尺寸呢，如何做到一份设计稿适配到不同机型中

最佳方案： 在photoshop或其他工具中量出某个元素或图片或文字的尺寸，然后直接写到代码中。额外的适配不需要理会。

width:px2rem(200);

示例设置宽度375px，是以iPhone6为例，如果页面的宽度超过了640px，页面中html的font-size恒为120px，否则，页面中html的font-size的大小为：

100 * (移动端屏幕宽 document.documentElement.clientWidth / 640) 

#html{
font-size: 100px;
}

function recalc(){
    var h = document.getElementById('html1');
    //w,实际宽度，获取当前屏幕可视区域大小
    var w = document.documentElement.clientWidth;
    console.log(w);
    //d, 设计宽度
    var d = 375
    // 动态设置 html 根标签字体大小
    if(w >= 640){
        h.style.fontSize = '120px';
    }else{
        h.style.fontSize = w / d * 100 + 'px';
    }
    console.log(h.style.fontSize);
}
window.addEventListener("resize",recalc,false);
document.addEventListener("DOMContentLoaded",recalc,false);

效果图

参考1
参考2
参考3