display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: flex;
2017-05-25
<meta name="viewport" content="width=device-width, initial-scale=1">
逻辑像素等于物理像素
逻辑像素等于物理像素
2017-05-25
我觉得吧,是老师有些东西没有讲清楚,所以有人觉得混乱,这个课程里面只讲了两个视口,布局和可视化。在ppk的书里讲了3个,加上一个理想视口,也就是设备独立像素的大小。布局视口是一个浏览器固定大小的视口,用来布局,然后可视化视口来进行缩放显示页面的。但是在页面宽度大小大于布局视口的时候,老师没有仔细讲,为什么没有出现滚动条。这里是因为可视化视口进行了缩放导致的,所以我们在后面禁止页面的可视化视口进行缩放。出现滚动条的必要条件不是页面的宽度大于布局视口,而是大于布局视口宽度的一定比值之后才会出现滚动条。后面又让width=device-width,可视化视口=布局视口=理想视口。大概就是这样。
2017-05-22
总算是理解了 先算ppi 再得到对应的dpr 以常见的5.7寸 1920*1080屏做例子 那就是1920的平方加1080的平方和开根得到386ppi>320ppi 那么缩放比的dpr=2.0 那么1逻辑像素就等于4个设备像素 形象点就是由一个“口”变成的“田” 那么长宽就各是2倍的关系 高就是1920/2=960px 宽就是1080/2=640px
2017-05-05