发表于： 2019-05-17 21:31:02
0 718
今天完成的事情：
1. 像素、CSS像素、物理像素、设备独立像素、分辨率的区别。
像素不是一个固定值，是相对单位。
分辨率是指像素密度。单位有ppi、lpi、dpi，指在一个容器下所包含的方块有多少。常用的ppi是指，每英寸面积内所含有的方块数量。
.png)
设备独立像素DIP（device independent pixel)。
电脑和iphone4 之前手机 ，一个像素点就是一个独立像素。Retina显示屏将四个像素点压缩成一个独立像素。在不改变屏幕尺寸的前提下，提高了分辨率。
.png)
而电脑显示屏是一像素点是一个独立像素，和手机不太一样的地方在于，改变显示器分辨率大小，显示的内容大小是不同的。而手机分辨率改变了，内容不变，清晰度改变。手机改变的是单位面积内像素点的多少，而显示器改变的是显示尺寸。
物理像素是能够控制显示的最小单位，显示器上一个点，手机上四个点一组的这四个点都是物理像素。
CSS像素不太一样的地方在于，它是一个相对值。
.png)
.png)
第一个盒子是一个100px*100px,但将页面放大200%，变成了第二个盒子,放大了一倍。这个过程中，浏览器窗口没有改变，盒子 100px的属性没有改变。默认情况下，在电脑显示器上，1px=1CSS像素。
设备像素比（DevicePixelRatio）=设备物理像素/设备独立像素
.png)
ios这边设备像素比就有三种情况。而viewport中，content="width=device-width"，宏观上是将可视视口设定为布局视口，微观上则是设置了设备独立像素位于CSS像素。
为什么需要将设计稿/2，则是移动端设备独立像素是2。而通过 JS，能够获取到用户显示器的设备像素比是多少，使得css像素和设备独立像素相一致。
其他问题。
能否通过initial-scale=0.5进行缩小两倍的方式，进行适配？效果有什么不同？
width=device-width和initial-scale=1，区别在哪里？
rem在如何配合媒体查询，进行手机适配？
2.bootstrap中，两列并排，一列添加row类，另一类不添加的话，两列会有15px的间距。
.png)
根据文档定义，row会进行内补。
3.bootstrap布局中，高度也会影响横向排列。
.png)
当一列高度不同，第二列无法对齐排列过去，会空一格。
4.整理github文件结构，对工具使用不太熟练，遇到问题不能够解决。
明天计划的事情：
1.任务十
返回列表
评论