简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽…

百分比只能实现元素的自适应，不能实现字体大小的自适应。 rem是一个相对单位，1rem等于html元素上字体设置的大小。 标注稿一般指设备的实际尺寸（750px），而我们编码的尺寸是css像素(375px)。

作为前端人员，为了适配各种型号的电脑、手机，我们往往离不开屏幕分辨率的适配； 那么如何做好屏幕分辨率的适配呢

css是一个不确定的物理像素，它是根据它所在的机型设备而决定的。 设备独立像素也叫做逻辑像素，与css像素一样是一种虚拟的像素，它是操作系统定义的一种像素单位，应用程序将设备独立设备告诉操作系统，操作系统再将独立设备像素转为设备像素。 显示屏是由无数个物理像素点组成的，通过控制…

在前端开发之前，设计师都会为前端开发者提供视觉稿/设计稿。 一. 分辨率 ..... PPI: Pixels Per Inch(像素每英寸),该值越高，则屏幕越细腻。 PPI数值越高，代表显示屏能够以越高的密度显示图像，画面的细节就会越丰富。 DPI: Dots Per Inc…

当我们介绍一个设备的屏幕时，我们会怎么描述呢。除了说很大很细腻之外，还有更精确的概念吗。屏幕尺寸、分辨率、PPI、社保独立像素是什么意思。

一篇文章，让你远离移动端软键盘疑难杂症。"踩坑人"带你远离软键盘之坑，从避坑（软键盘问题）到填坑（如何解决）

我们不妨先从电脑端入手，在适配不同逻辑分辨率的电脑端时，一定少不了使用媒体查询来实现自适应布局。 @media only screen 会查询浏览器的逻辑分辨率宽 document.documentElement.clientWidth。然后根据 clientWidth 值匹配…

在iPhone还处于2G，3G，3GS时代（非retina屏幕时代）的时候，设计师在设计UI的时候，只需要按照屏幕设备像素320px*480px（注意这里的px含义指的是设备像素，可参考文末解释）1：1来设计。之后iPhone4的划时代出现，打破了这种局面。苹果把iPhone4…