## 番外篇 [了解真实的『REM』手机屏幕适配](https://mp.weixin.qq.com/s/JIRN56acxvJgmzk1Fjj6LA) [移动web开发适配秘籍Rem-慕课网](http://www.imooc.com/learn/942) **自适应，响应式，屏幕适配，这是三个独立不同的概念。** * * * * * ### css像素与设备独立像素 物理像素与设备像素的关系，几个人或一个人可以搞定一条线，但一个人绝对搞不定多条线。多个物理像素可以配合出一个设备独立像素，但一个物理像素不可能再分割而显示出多个颜色。 设备独立像素（密度无关像素） css像素，也是一种设备独立像素，也称为屏幕无关像素。 >[danger] 设备独立像素的值就是设备独立像素的数量，也就是当前屏幕上虚拟点的数量。我们对元素的控制都是通过控制这个虚拟的点来进行的，而不能直接控制器物理像素。 * * * * * ### 放大与缩小都是软件实现的，原理是改变了元素的像素，或者虚拟像素。 屏幕的物理像素是固定的，画面显示的原理就是，虚拟像素映射到设备物理像素的效果。 只有屏幕足够大，理论上就可以无限放大（几个物理像素显示一个像素），但是却无法无限缩小（一个物理像素不可再分割），因为物理像素再小也会有极限。而我们缩小图像的方式其实就是，减少图像的像素，所以缩小的图像会变得模糊就是这个原因。 * * * * * ### 适配：只兼容最小那还算适配吗？只是保证最低限度能用而已。 以前我们没有rem和媒体查询时，做移动端页面的适配就是先按照最小手机屏幕比如320px来做，只有在最小手机屏幕上显示不挤了，那么大屏幕显示也没有问题，但是这样的效果真的很差，当到大屏幕手机上看，元素就会特别小。对尺寸有严格要求的，这样是无法还原设计稿真实尺寸的。 * * * * * ### 响应式样式作用在哪些地方？ 响应式css一般是布局类的，比如元素位置，大小（宽高），形状等，而其他样式，比如颜色，边框等通常不会有什么大的变化。 > 在响应式网页中，PC样式和媒体查询样式有交融的部分，通常只需要在媒体查询中重写元素布局类样式，而元素其它样式如，背景颜色、文字颜色等样式则是重用的部分。重写与重用，利用得好的话将一定情况下改善响应式网页代码冗余的情况。 * * * * * ### 必须要多端适配 页面不可能在多端上都长一样的，每个端屏幕不一样，操作方式和习惯不一样，所以多端必须有对应单独优化的页面展示，否则就不行。不要想偷懒。 * * * * * ### 媒体查询规则还可以写在标签属性上 媒体查询规则还可以写在link标签的属性上啊，这样可以把自适应的css写到单独的文件中（有点类似.js文件中不需要`<script></script>`标签），但是这样能实现动态/懒加载文件吗？NO，不会动态加载文件，还是和普通标签一样，一开始就直接加载文件了，不会只在满足媒体查询时才加载文件。 ``` <link id="mobile-style" media="only screen and (max-width: 767px)" type="text/css" rel="stylesheet" href="/skins/LessIsMore/bundle-LessIsMore-mobile.css?v=d9LctKHRIQp9rreugMcQ1-UJuq_j1fo0GZXTXj8Bqrk1"/> /* by: https://www.cnblogs.com/chenjfblog/p/8715580.html */ ``` * * * * * ### 设计稿切图 [UI设计教程：APP切图适配规范](https://www.365yg.com/a6337139493007556865#mid=5891797386) > 设计眼中的程序员，看她们切图时是怎么想我们的。 > > 2倍图应该是制作时就按照最大的尺寸制作，不然放大的二倍图会模糊，不过缩小的倍图不会失真吗，这样的话岂不是制作时就要制作多份，还是这个导出多倍图并不是简单的缩放处理，不会导致模糊和失真吗。 * * * * * last update：2018-7-19 15:45:27