webApp屏幕适配

如今随着web技术的发展，webApp逐渐成为热门。其具有便捷性，开发成本低，维护成本低的优点。当是，如今安卓、ios，手机制造商百花齐放，手机屏幕也是大小不一。连一只比较规范的苹果，也出现了多种屏幕尺寸。这样为web前端工程师的屏幕适配提出了新的挑战。
在今天的文章之前，我们先了解几个主要的关键词

1. px (pixel）指的是屏幕显示的最小单位。一般交过物理像素。一切屏幕都是有许多个小点组成的，这一个点的大小就是一个px。
2. pt(points)指的是屏幕显示的实际大小。也叫做逻辑像素。他是在现实中可以明确地长度。1pt大约等于1/72英寸。因此，对于不同分辨率的手机，他的pt单位表示的实际大小是一样的，但是px表示的是不一样的。
3. ppi指的是每英寸所包含的像素点数量。ppi越高，像素密度越大，显示越清晰。同时，相同px大小的图标，显示越小
   4.css中的px.值得是html中1px等于的是pt，也就是逻辑像素。所以各位请注意，html中的px和设计师给你的设计图中的px是不同的，
   了解了这些，我们来谈一下为什么要做屏幕适配。先说一下一般网页开发的流程。首先设计师做出设计稿，然后标注好尺寸，交给前端开发人员。由于设计师设计师，一般都是采用px为单位来做。因此，如果都做相同的px，那么在各个手机上的显示就会有非常大的差别。用户体验也不好。那么有同学就问了，为什么不用pt呢？这其实是治标不治本，虽然显示的大小一样了，但是比例还是不同。美的标准之一就是和谐吗，所以一定要成比例。这也就引出了屏幕适配的必要性。

屏幕适配现如今主要有一下三种方法：

1. 采用自适应布局方式。所有的宽使用百分比模式。但是这样有个坏处就是高度和字体么办法设置，只是设置了宽度可以自适应，所以并不是主流的方法
2. 采用@media进行媒体查询，然后在不同大小屏幕中设置不同的缩放比率。从而进行整体的缩放。但是这个也导致一些东西可能会显示不够清晰
3. 采用rem来进行屏幕适配。rem是指元素大小同根元素字体大小的比值。比如说要设置一个宽100px的矩形，根元素字体大小设为20px，则用rem表示时候，就设置为5rem即可。这种方式，可以在判断了屏幕大小后，通过css来改变html中font-size的大小来解决。这一方法，非常便捷。很实用，是目前主流的一种方法