移动端适配

补发18年文章
前几天在想设备像素比的时候,突然想到iphone6p的设备像素比是3,但是设备独立像素是414,414*3大于1080啊,就有点懵,因为一直以为都是直接用物理像素/独立像素的比就是设备像素比,于是就有了接下来的复习。

  • 设备像素(dp)

设备像素即物理像素,知道是设备能控制显示的最小单位,就是显示屏上一个个的像素点(以iphone6来说,iphone6宽有750个像素点,长有1334个像素点)

  • 屏幕尺寸

指得是屏幕对角线长度,单位是英寸,1英寸 = 2.54厘米。

  • 屏幕分辨率

指的是手机屏幕的物理像素点数,就是纵向设备像素横向设备像素表示,比如iphone6 是1334750

  • 屏幕像素密度(ppi)

指的是每英寸物理像素点数量Math.sqrt(Math.pow(1334,2)+Math.pow(750,2)) / 4.7

  • 设备独立像素(dip)

也可以称之为逻辑像素,这个点是给程序控制和使用的,是抽象的。现在的高分辨率屏幕会用多个设备像素来显示一个设备独立像素。比如iphone6上宽度的dip是375iphone6+414(标准模式)',window.screen.width可取

  • 设备像素比(dpr)

指的是设备像素和设备独立像素的比例。通常情况之间用设备分辨率的宽除以设备逻辑宽就可以。比如iphone6就是750/375 = 2。在程序中可以通过window.devicePixelRatio来获取。
多数情况下,我们的图片都是以dpr2来设置的,也就是说,实际情况下,iphoneX下显示的图片会有略微的模糊。但是专门去适配的很少,因为都是网络上传的图片。
如果后台支持的话,可以用srcset来做到。只需要提供图片资源、以及断点,其他都交给浏览器智能解决,浏览器会自动根据场景匹配最佳显示图片

    

移动端完美支持,就算安卓4.3、4.4不支持也可以用默认的src
如果是本地的话,还有一个熟悉image-set可以用,就是不支持安卓4.3

div {
    background-image: image-set( url(test.png) 1x, url(test-2x.png) 2x );
}

所以原生端的情况,都会使用@2x,@3x的图来匹配对应的设备。

  • viewport

viewport是一块区域,浏览器根据这个区域来计算宽度是百分比的元素的宽度。描绘图案。
一般来说PC端端viewport跟浏览器的大小是一致的,移动端的viewport 宽度大多都是980px,可见移动端的viewport比真实的移动端屏幕大多了。window.innerWidth
所以,我们写代码的时候,在h5页面基本都会加上meta标签

    

可以看到name=viewport,就是用于控制页面缩放的

但是我们通常看到的meta标签并不止一个,那么meta标签有什么作用呢?
meta标签是HTML标记HEAD区的一个关键标签,提供文档字符集、使用语言、作者等基本信息,以及对关键词和网页等级的设定等,最大的作用是能够做搜索引擎优化(SEO)。

平常使用最多的莫过于descriptopn和keywords了,用于搜索引擎搜索的

既然不同的手机,它们的设备独立像素并不一样,那么如果我在iphone6p上使用宽度200px的div在iphone6p上还只是占屏幕的一半不到,到了iphone4上就会立马超过一半了。
这个时候,rem就派上用场了。

  • rem(font size of the root element)

即根据根元素的 font-size 来设置字体的大小。跟 px 一样,它是 CSS 中的一个样式单位,会根据根元素的 font-size 值来转换成 px 单位,公式为:px = rem * html(font-size)

那么,如何去选择一个基准来设置根元素的font-size呢?

选择iphone手机使用分辨率最广的手机来设置,跟着设计师走

5年前,设计师还是以iphone4的基准来设置640

现在,设计师已经按照iphone6的基准来设置750

那么,算法就很容易了

device-width / 750 * 100

以iphone6为例,2倍的dpr。375 / 750 * 100 = 50px;

这样的话,设计稿上面24px,就直接写0.24rem; 0.24*50 = 12px实际渲染。

这样的话,如果页面超过750px了,就会出现超过PC大小的像素,所以就需要判断一下当 deviceWidth 大于 750px 时我们不应该再改变根元素的 font-size 值

(function(window) {
    function refreshRem() {
        var docEl = document.documentElement;
        var screenWidth = docEl.getBoundingClientRect().width;
        var rem = Math.min(screenWidth, 750) * 100 / 750;
        docEl.style.fontSize = rem + 'px';
    }
    refreshRem();
    window.addEventListener('resize', function() {
        clearTimeout(time);
        time = setTimeout(refreshRem, 300);
    }, false);
})(window);
$vm_base: 750; 
@function vw($px) {
    @return ($px / $vm_base) * 100vw;
}

你可能感兴趣的:(移动端适配)