前端面试基础必备web收录CSS

移动端适配方案

2018-11-13  本文已影响45人  puxiaotaoc

二、viewport视口

浏览器可见视口和布局视口
  • visual viewport：可见视口，即屏幕宽度；
  • layout viewport：布局视口，即DOM宽度；
  • idea viewport：理想适口，使布局视口就是可见视口；
  • 设备宽度（visual viewport）与DOM宽度（layout viewport），scale的关系是：
    （visual viewport）= （layout viewport）* scale
  • 获取屏幕宽度（visual viewport）的尺寸：window. innerWidth/Height
  • 获取DOM宽度（layout viewport）的尺寸：document. documentElement. clientWidth/Height

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：
width：设置layout viewport 的宽度，为一个正整数，或字符串"width-device"；
initial-scale：设置页面的初始缩放值，为一个数字，可以带小数；
minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数；
maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数；
height：设置layout viewport 的高度，这个属性对我们并不重要，很少使用；
user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许；

<meta name="viewport" content="width=device-width,initial-scale=1">

参考：移动前端开发之viewport的深入理解

三、物理像素(physical pixel)

四、CSS像素

作为Web开发者，我们接触的更多的是用于控制元素样式的样式单位像素。这里的像素我们称之为CSS像素
参考：CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport #21
五、设备像素比

// 获取当前设备的dpr：
JavaScript: window.devicePixelRatio。
CSS: -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio。不同dpr的设备，可根据此做一些样式适配(这里只针对webkit内核的浏览器和webview)。

六、设备独立像素dip与设备像素dp

七、屏幕像素密度PPI(pixel per inch)

八、概念关系图

屏幕尺寸、屏幕分辨率-->对角线分辨率/屏幕尺寸-->屏幕像素密度PPI
                                             |
              设备像素比dpr = 物理像素 / 设备独立像素dip(dp)
                                             |
                                       viewport: scale
                                             |
                                          CSS像素px
CSS像素与设备像素“田字图解”

九、前端实现相关方式

// 设置理想视口，使得DOM宽度(layout viewport)与屏幕宽度(visual viewport)一样大，DOM文档主宽度即为屏幕宽度，1个CSS像素（1px）由多少设备像素显示由具体设备而不同；
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

十、动态设置视口缩放为1/dpr

(function (doc, win) {
  var docEl = win.document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var dpr = 0;
  var scale = 0;

  // 对iOS设备进行dpr的判断，对于Android系列，始终认为其dpr为1
  if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/[iphone|ipad]/gi);
    var devicePixelRatio = win.devicePixelRatio;

    if(isIPhone) {
      dpr = devicePixelRatio;
    } else {
      drp = 1;
    }
    
    scale = 1 / dpr;
  }

  /**
    * ================================================
    *   设置data-dpr和viewport
    × ================================================
    */

  docEl.setAttribute('data-dpr', dpr);
  // 动态改写meta:viewport标签
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    document.documentElement.firstElementChild.appendChild(metaEl);
  } else {
    metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  }

})(document, window);

十一、px单位的适配
设置动态缩放视口后，在iphone6上，缩放为0.5，即CSS像素2px最终显示效果为1px，而在scale=1的设备，CSS像素1px显示效果为1px，为了达到显示效果一致，以px为单位的元素（比如字体大小），其样式应有适配不同dpr的版本，因此，在动态设置viewport:scale的时候，同时在根元素上加上data-dpr=[dpr]，但是这种方式还是不够，如果dpr为2，3之外的其他数值，px就没办法适配到，因此会选择用rem为单位进行适配；

.p {
    font-size: 14px;

  [data-dpr="2"] & {
    font-size: 14px * 2;
  }

  [data-dpr="3"] & {
    font-size: 14px * 3;
  }
}

// 为写样式方便，可以借助sass的mixin写代码片段：
// // 适配dpr的字体大小
@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
      font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
      font-size: $font-size * 3;
  }
}
@mixin px-dpr($property, $px) {
  #{$property}: $px;

  [data-dpr="2"] & {
    #{$property}: $px * 2;
  }

  [data-dpr="3"] & {
    #{$property}: $px * 3;
  }
}

// 使用
@include font-dpr(14px);
@include px-dpr(width, 40px); @include px-dpr(height, 40px);

十二、设置缩放视口与设置理想视口有什么不同

十三、rem(一个css单位)

设备 设备大小 根元素font-size/px 宽度/rem
iPhone5/SE 320*568 js计算所得 --
iPhone6/7/8 375*667 16 23.4375
i6/7/8 Plus 414*736 js计算所得 --
iPhone x 375*812 js计算所得 --
iPad 768*1024 js计算所得 --
- 360 js计算所得 --

十四、动态设置根元素fontSize

// 以320px的屏幕为基准
const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";

/**
  * 以下这段代码是用于根据移动端设备的屏幕分辨率计算出合适的根元素的大小
  * 当设备宽度为375(iPhone6)时，根元素font-size=16px; 依次增大；
  * 限制当为设备宽度大于768(iPad)之后，font-size不再继续增大
  * scale 为meta viewport中的缩放大小
  */
(function (doc, win) {
  var docEl = win.document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  /**
    * ================================================
    *   设置根元素font-size
    * 当设备宽度为375(iPhone6)时，根元素font-size=16px; 
    × ================================================
    */
  var refreshRem = function () {
    var clientWidth = win.innerWidth
                      || doc.documentElement.clientWidth
                      || doc.body.clientWidth;

    console.log(clientWidth)
    if (!clientWidth) return;
    var fz;
    var width = clientWidth;
    fz = 16 * width / 375;
    docEl.style.fontSize = fz + 'px';
  };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, refreshRem, false);
  doc.addEventListener('DOMContentLoaded', refreshRem, false);
  refreshRem();

})(document, window);

十五、rem计算(px2rem)

/* 
 * 此处 $base-font-size 具体数值根据设计图尺寸而定
 * flexible中设置的标准是【fontSize=16px, when 屏幕宽度=375】，因此，按此标准进行计算，
 * 若设计图为iPhone6(375*667)的二倍稿，则$base-font-size=32px
 *
 */ 
@function px2rem($px, $base-font-size: 32px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2rem($px + 0px); // That may fail.
  } @else if (unit($px) == rem) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}

// 使用，eg:
font-size: px2rem(18px);

十六、问题思考

十七、vm/vh:CSS单位

十八、一些问题

十九、手淘的实现方案

通过一段JS代码根据设备的屏幕宽度、dpr设置根元素的data-dpr和font-size, 这段JS代码要在所有资源加载之前执行，建议做内联处理。

各种元素(文本、图片)处理方案参考：
图：怎样让你的网站适应视网膜分辨率

二十、px转rem的mixin

// 使用sass的混合宏
// 淘宝手淘的方案里，i6(375pt)屏幕宽度为10rem，即font-size=75px, scale=0.5 因设计图为二倍图，$base-font-size=75px
@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
    //Conver the baseline into rems
    $baseline-rem: $baseline-px / 1rem * 1;
    //Print the first line in pixel values
    @if $support-for-ie {
        #{$property}: $px-values;
    }
    //if there is only one (numeric) value, return the property/value line for it.
    @if type-of($px-values) == "number"{
        #{$property}: $px-values / $baseline-rem;
    }
    @else {
        //Create an empty list that we can dump values into
        $rem-values:();
        @each $value in $px-values{
            // If the value is zero or not a number, return it
            @if $value == 0 or type-of($value) != "number"{
                $rem-values: append($rem-values, $value / $baseline-rem);
            }
        }
        // Return the property and its list of converted values
        #{$property}: $rem-values;
    }
}

二十一、小结

二十二、Retina视网膜屏
       Retina视网膜屏，是指人眼在正常观察距离（iPhone定义为10英寸，iPad定义为15英寸）下，视网膜已经无法分辨单个像素，不再出现像素颗粒感，仅能观察到如丝般细腻的画面，可以理解为超高分辨率屏幕；

最先使用retina屏幕是iphone 4，屏幕分辨率为960 * 640（326ppi）。

对比如下两幅图，可以清晰地看出是否 Retina 屏的显示差异：


屏幕快照 2018-08-20 下午3.00.23.png

两代iPhone 的物理尺寸（屏幕宽高有多少英寸）是一样的，从上图可以看出，iphone 4的显示效果要明显好于iphone 3GS，虽然 iPhone 4 分辨率提高了，但它不同于普通的电脑显示器那样为了显示更多的内容，而是提升显示相同内容时的画面精细程度。这种提升方式是靠提升单位面积屏幕的像素数量，即像素密度来提升分辨率，这样做的主要目的是为了提高屏幕显示画面的精细程度。以第三代 MacBook Pro with Retina Display为例， 工作时显卡渲染出的2880x1880个像素每四个一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同，但精细度是原来的4倍。

注意：在桌面显示器中，我们调整了显示分辨率，比如从 800 * 600 调整到 1024 * 768 时，屏幕的文字图标会变小，显示的内容更多了。但 Retina 显示方式不会产生这样的问题，或者说， Retina 显示技术解决的是显示画面精细程度的问题，而不是解决显示内容容量的问题。

二十三、相关链接

上一篇下一篇

猜你喜欢

热点阅读