前端学习之路之自适应设计(sass语法)

[husky-dot]

基本概念

• css像素、设备像素、逻辑像素、设备像素比

• viewport

• rem

1. css像素、设备像素、逻辑像素、设备像素比

大家可以先看这篇文章了解一下基本概念。

css像素：我们大家经常写高多少px，宽多少px,这个就是px像素。

逻辑像素：其它就是css像素，他们其实是同一回事。

设备像素比：css像素与物理像素的一个比值。

设备像素：手机上像素的点，通常一个像素点就是一点，但从苹果出了Retina屏 幕后，如果像素比为2,代表一个逻辑像素表示2个物理像素，如上图，就是说一般我们写高等于2px，宽等于2px，正常对应就是正面的面积为4的4个像素，这是大家所能正常理解的，但是在Retina屏的时候，如果像素为2，它是1比2，就是说css 1px等于
Retina 2px ,所以原来用2 x 2表示4个px,现在在Retina需要16个像素来表示。

2. viewport

如上图,viewport相信大家都 会，但对于width=device-width,为什么 要这样设置以及设置的原理，我想大家可能不太明白。

1）viewport主要分为三类 visual viewport，layout viewport, ideal viewport

layout viewport:如上图蓝色的页面，你可以认为你写的页面,它就是一个layout viewport。

visual viewport:如上图手机里， 如里说没有width=device-width的话，你这个很庞大的页面，在手机 有限的窗口范围内，是不是放不下。如果说手机是透明的话，你怎么拖后面的大图，在手机上只能看到一个相对大小 的页面，相当于大图进行裁剪一样，呗裁剪出来的这块东西就叫visual viewport.

ideal viewport:简单说就是手机 的宽和高组成的组成这种尺寸就叫ideal viewport。

2）width=device-width主要做了什么事情？

width=device-width它主要的作用就是让大图layout viewport等于手机的ideal viewport。这样就做到了2个不同的窗口大小 是一样的

3. rem

上图是官方说明，简单的说，rem的计算就是按照html的根标签进行计算。

工作原理

• 利用viewport和设备像素比调整基准像素
• 利用px2rem自动转换css单位

1）利用viewport和设备像素比调整基准像素

上图中的设计尺寸，比如5s,它的像素是320，像素比drp为2，这个320指的是刚才的css像素，所以物理像素等于320 x 2 = 640,也就是说手机的硬件提供640个真实的像素点，这里所说的是宽，不要考虑高。举个粟子，如右图设备尺寸，比如说当你的设备宽是375 css像素，设备像素比为3，所以物理像素为375 x 3 =1125 个物理像素。然后通过数学的线性比我们就可以根据比例来做自适应，但这处方法在真实世界是不科学的，因为手机尺寸很多，不可能像这样一个一个调整，所以这种方法不适用。

想想刚才的说的rem，我们通过设备像素比和viewport调整基准像素， 我们不需要所以的设备都 要去除以一下设备像素比的关系，我们是利用js自己计算，算法就是利用上图的1125/640这个线性比。

比如说设计尺寸下当前html字体大小 为40px,以它为基准单位，那么到设备尺寸下，html的字体大小为( 40 x 1125 )/ 640=71.1,然后所有的单位为rem，这样就可以达到自适应。

2. 利用px2rem自动转换css单位

@function torem($px){//$px为需要转换的字号
    @return $px / 40px * 1rem; //40px为根字体大小
}