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

基本概念

• 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为根字体大小
}
复制代码