CSS常用单位介绍及大小适配问题

CSS常用单位介绍及大小适配问题

px

px指像素，在CSS中指的是逻辑像素，而非屏幕设备的物理像素。而在进行适配时，使用px作为单位并不合适

em

指的是相对长度单位，它的1em即一个汉字的宽度，所以em的具体宽度和我们在css中设置的字体大小即font-size有关。
如：font-size:20px;  1em = 20px;  10em = 200px;  
注意：决定em长度的font-size是相对于其元素的父元素而言，因此em也不适合用来适配。	

rem

指的是根相对长度单位，和em一样，1rem也是一个汉字的宽度，它同样和font-size的值有关。
和em不同的是，em的宽度是继承与其父元素的font-size大小，而rem的宽度是继承与html标签（根标签）font-size大小。因此只要设置了html的font-size属性，rem的宽度就相对固定，可以作为适配单位使用。

适配问题

一、什么是适配

适配即使网页中的内容随着屏幕的大小经行相应的放大缩小，使显示的内容正常。
如何实现适配？
使用媒体查询，得知显示设备的设备独立像素，根据不同的设备独立像素，使用rem进行适配。

二、适配的过程

1.得到设计稿，一般一张设计稿的宽度为750px
2.将浏览器的模拟器的宽度改为750px，和设计稿保持一致
3.严格按照设计稿，使用rem单位，将设计稿内容还原出来
4.编写样式表，首先需确定html标签的宽度。为了便于计算，通常会将html标签的font-size设置为100px。这一值为rem基准值。
如此时有一盒子，width为20px   1rem = 100px。
将盒子宽度20px换算成rem，即为0.2rem。
像这样将元素的宽度全部根据100px的rem基准值换算成以rem为单位。
5.将写好的页面迁移到其他屏幕上，完成适配工作
在我们进行迁移时，屏幕的宽度不都是750px，因此我要进行换算。
如： 在750px的屏上，html的font-size的大小为100px。
        在375px的屏上，html的font-size的大小为50px。
        在320px的屏上，html的font-size的大小为42.6666666px。
        在414px的屏上，html的font-size的大小为55.2px。
然后写入相关代码：

	@media only screen and (width:750px) { html{ font-size: 100px; } }
    @media only screen and (width:375px) { html{ font-size: 50px; } }
    @media only screen and (width:320px) { html{ font-size: 42.6666px; } }
    @media only screen and (width:414px) { html{ font-size: 55.2px; } }