## 深入理解px 保持统一效果的等比缩放。 图片特殊的特性 * * * * * 宽度好说，用百分比很容易适配，是和屏幕保持等比缩放的，但是高度用百分比就不行了，所以一般高度给个固定值，但这样就会感觉怪怪的，让元素看起来（短短）窄窄的或（矮矮）扁扁的（比如按钮，一般宽度用百分比，是可以随着屏幕宽度变化自动进行等比缩放的，而高度是固定不变的，这样在屏幕很宽时会感到强烈的拉伸效果，在屏幕变窄时又感觉挤在一起），在要求不高时可以这么做，但这样显然没达到我们高标准的适配要求（真实还原设计稿）。 * * * * * 设备都有一个默认初始的设备独立像素，和一个dpr，但是设备独立像素可以被修改的（通过 viewp缩放改），设备分辨率即物理像素是不能被改变的。设备独立像素，是虚拟的像素，即屏幕的一个点，这个点是程序虚拟的，css像素是一种设备独立像素。 * * * * * 百分比适配，rem适配，viewpro适配 ，比例缩放适配(通过缩放，修改设备独立像素，而不直接设置设备宽度)，缺点所有设备都是一样的，相同的独立像素，这样大屏就发挥不了作用，不能显示更多的内容，rem虽然也有这个问题，但是rem还可以使用px，更加灵活，大屏可以等比缩放适配效果图，也可以使用px显示更多的内容，而比例缩放适配就悲剧了。每一种技术方案都有好有坏，没有绝对的，只有在合适的使用场景下，才能突显方案的好坏，有些时候要多种方案联合使用，通力协作，取长补短，一起来实现最好的效果。 * * * * * 每个设备都有默认的设备独立像素，和dpr，但设备独立像素是可以被改变的(dpr不能被修改)，调整默认viewpo sva缩放（默认为1），当大于1为放大页面，当小于1为缩小页面。放大页面时缩小了默认设备独立像素，缩小倍数为aca值，缩小页面时，放大了默认的设备独立像素，放大倍数为ac。 * * * * * Y=P/Z，Z为一个常量。除以多少相当于是把屏幕分为多少份，这是一个定值，设为多少都可以，并不影响实际的适配，是根据设计稿宽度来决定的，选一个好算的默认基准值就可以。750的设计稿，分为7.5份，基准值为100就比较好算了。640那就分为6.4份，保持基准值100。所以严格按照设计稿来确定，只有以设计稿为标准适配，那么其它屏幕也就能同等适配了。 设计稿就是标准，记住这句话，我们只管以设计稿为标准时的常量和基准值，单位换算就是以这个标准基准值换算的。 适配时必须始终以设计稿为标准适配，不能变，因为代码是写死了的，换算时是以设计稿为标准的。 ---- 用缩放解决高清屏下1px边框问题，难道这样不会把元素都缩小了吗？ 修改sc缩放页面了，元素大小不会缩小是因为大小是用rem单位的，而缩放页面其实是放大了设备独立像素而已。 还记得吗，之前我们证明过，只要在标准设计稿中适配好了，其它所有大小屏幕下也就同等的适配了。要仔细体会这句话的意义。屏幕大小的变化不就是设备独立像素的变化吗，而今设备独立像素的缩放也是如此。 放大的页面，那么按道理说1px会缩小，而rem布局的元素会放大，那这样的话淘宝的方案就不行了啊，但其实淘宝那个一直设置了设备独立像素等于设备宽度啊，也就是没变啊。 待做实验，缩放，如果固定设备独立像素为设备宽度会怎样，对rem和px又会有什么样的影响，以及为什么。 rem是比例，而缩放设备屏幕大小并没有改变。 又缩放了，又设置设备独立像素为设备宽度，那么到底什么情况啊，缩放时设备独立像素到底变化没有？这种情况是怎么处理的，需要搞懂细节。 难道设置了设备独立像素为设备宽度的情况，缩放并不会改变设备独立像素，也就不会影响rem，这是一种特殊的情况，只会缩小px，px减半？ 所以用rem单位的就不会受缩小页面影响，而边框使用的是px为单位，所以才会受缩放影响。 ---- 只要方便好用就可以，淘宝那样不好，分成100份还说是为了以后向后兼容vm，这叫什么向后兼容啊，以后用vm时自然有方案，何必现在这样，没有任何意义，强行这样导致不好算，又搞个工具来计算，这真是故意引入新工具，增加复杂性和不确定性。而网易小米的就很简单，直观，不在乎非要分100份，只要好算了就行了，这样无需引入其它工具，方便简单。 * * * * * 媒体查询断点肯定不是随便设置的，也没有所谓的什么的递增规律，不要忘记适配、响应式的初衷是为了要满足不同设备，如果随便来，要是把多个阶段的屏幕大小当成一个断点里面了，那就没有意义了。所以断点也是根据设备屏幕大小来的，苹果比较标准好说，但是安卓就麻烦了，所以适配尽量包容苹果和安卓各个阶段的屏幕，当然根据高清屏可以针对性的做些设媒体查询设计。 * * * * * 苹果的屏幕真比安卓清晰吗，网上都是关于苹果视网膜屏幕比安卓清晰的文章，其实就是说像素密度ppi比较高，但那都是以前了，基本都是16年以前文章，现在不一样了，安卓屏幕基本都1080了，苹果8p还是750，已经没有可比性了，安卓的dpr都是3了基本，现在在说苹果比安卓屏幕清楚就站不住脚了。 * * * * * px是固定单位，1px所显示的尺寸大小是固定，不会随屏幕大小而发生变化（1px为一个点，它所包含的物理像素数量是固定的，与屏幕尺寸大小无关，但是视口缩放可以改变点所包含的物理像素数量，下面会说到），所以不满足适配要求。而rem以跟元素为基准，相当于把屏幕分为多少份了，1rem相当于1份，1份代表的点数量为基准值，只要根元素基准值变化了，rem所表示的px也会变化，所以只要屏幕大小变化时，控制基准值变化，就能实现与屏幕等比缩放的适配效果。css像素是虚拟像素，也就是设备独立像素，1px代表一个虚拟像素，即一个点，元素就是由这些点组成的，我们只能控制虚拟像素。 虚拟像素可以想象成是铺在屏幕上的一张网，面积始终和屏幕面积相同，屏幕上是一个个格子，也就是物理像素，是固定的，这张网也是一个个格子，这个格子大些，一个网格子可以包含几个屏幕上的格子，网格子可以无限大，包含更多的屏幕格子，也可以变小，包含少量的屏幕格子，但最小不能小于屏幕格子，屏幕格子不能分割，也就是最小时刚好和屏幕一一对应。 视口缩小时，设备独立像素，也就是屏幕上的点，数量增多，也就是网格子数量增多，屏幕面积是不变的，随着格子数量增多，那么每个格子大小就会变小，即一个格子所包含的屏幕格子数量减少，即一个设备独立像素所包含的物理像素数量减少，而px元素的点数量，px值是写好不变的，所以当视口缩小后，导致一个点所包含的物理像素数量减少了，那么px元素的物理尺寸自然缩小了，这就是视口缩放的原理。（至于设备独立像素的变化规则，为什么会这样，这不是我们所控制的，这种变化规则是我们通过获取到的值观察到的） 视口放大同理推导。 ---- 响应式是让元素（同一html）在不同设备的屏幕上（屏幕大小，像素密度不同）有不同的展示效果，主要是布局样式的不同，以达到在不同设备上有着不同的视觉效果，和满足在不同设备中浏览、和操作习惯上的差异。 屏幕适配主要是以还原设计稿为目标，实现页面与屏幕尺寸的等比缩放，使得页面在不同屏幕下达到一致的体验，以及解决高清屏1px边框问题。 两者都涉及到元素的布局，但是它们各自的目标和关注点是不同的。 下面我们就来看如何结合两者的开发过程，一起融入项目中。 从代码差异的角度来看，响应式需要写很多的媒体查询代码（如果是pc页面要做成响应式兼容移动端，也需要非常多的响应式样式代码），而屏幕适配则主要集中精力在将设计稿尺寸按照规则还原成rem代码上，适配的规则是一段很小的js代码。 一般pc页面是不需要屏幕适配的，直接使用固定像素就可以了。我们思考一下，最难得一个题，如何将pc页面做成响应式的，并且还要屏幕适配呢。 首先屏幕适配需要使用rem单位，那么pc页面一开始也要使用rem单位，但是pc页面无需适配，也就是无需运行适配规则代码动态改变根元素的字体大小，那么我们就只让适配规则代码在移动端才执行，只要pc端，一开始默认根元素字体大小为100px，移动端设计稿适配标准基准值也是100px。这样我们就实现了pc端，响应式，屏幕适配，三者的融合了。 ---- 物理尺寸 = 单个像素的物理尺寸 * 物理像素个数 单个像素的物理尺寸与 像素密度PPI有关，物理像素个数与 设备独立像素数值 和倍数有关 物理像素个数 = 设备独立像素数值 * 倍数 倍数不可能小于1，因为无论怎么缩小，一个物理像素都不可能拆分而表示两个设备独立像素。 上面的关于单个像素的物理尺寸与像素密度有关的说法不严谨，应该是屏幕尺寸固定的情况下，像素密度越高，单个像素的物理尺寸的越小，反之像素密度越低，单个像素的物理尺寸越大。 如果有两块屏幕，它们单个像素的物理尺寸相同，那么可以认为这两块屏幕是相同的。此时如果它们屏幕大小是相同的，那么屏幕密度也是相同的。如果像素间是没有空隙的，那么单个像素的物理尺寸大小就决定密度，只要单个像素的物理尺寸是相同的，那么它们的像素密度也都是相同的，而不论它们的屏幕大小是否一致。 所以屏幕尺子在不校准的情况下是无法使用的，我们知道屏幕的像素数量，但却不知道单个像素的物理尺寸，所以我们需要校准，方式是让你拿起你的银行卡在屏幕上校准大小（我们都知道银行卡的宽度是比较标准的一个宽度），选好后就能得到单个像素的物理尺寸是多少了。 [UC头条：苹果iPhone 8屏幕及其分辨率大小亮眼分析]([http://s4.uczzd.cn/webapp/webview/article/news.html?app=smds-iflow&aid=7683138143860936654&cid=0&zzd\_from=smds-iflow&uc\_param\_str=dndseiwifrvesvntgipf&rd\_type=share&pagetype=share&btifl=100&sdkdeep=2&sdksid=b89efb22-20e7-3ef9-2052-ccfac138f4af&sdkoriginal=b89efb22-20e7-3ef9-2052-ccfac138f4af](http://s4.uczzd.cn/webapp/webview/article/news.html?app=smds-iflow&aid=7683138143860936654&cid=0&zzd_from=smds-iflow&uc_param_str=dndseiwifrvesvntgipf&rd_type=share&pagetype=share&btifl=100&sdkdeep=2&sdksid=b89efb22-20e7-3ef9-2052-ccfac138f4af&sdkoriginal=b89efb22-20e7-3ef9-2052-ccfac138f4af)) [详解LayaAir引擎游戏屏幕适配，及有效抗锯齿](https://cloud.tencent.com/developer/article/1595389) > 我们屏幕的像素点，是由行与列的矩阵序列组成。也就是说屏幕中是不存在斜线的。基于像素绘图的画布，要是画横竖的直线，那绝对是相当的平滑。可是画曲线和斜线怎么办。只能是由两个相邻的像素点不断重复延申组成，如果这句话不好理解，我们想象一下楼梯，从侧面去看，大概就是这个样子。 * * * * * last update：2018-7-31 00:49:30