移动前端开发进阶之路—页面布局

Viewport

移动Web开发自然要从Viewport说起,那什么是Viewport呢?字面意思是视图窗口,通俗的讲就是指移动设备上能用来显示页面的那部分区域。

设备像素

对于设备来说,有两个设备像素:物理像素和独立像素。物理像素:是指设备显示屏中使用的最小显示单位,也就是屏幕分辨率独立像素:Web编程种的逻辑像素,也就是CSS像素。

像素密度

PPI(pixels per inch)用来表示设备每英寸所拥有的物理像素数目。这个数值越高,我们看到的屏幕越清晰。

设备像素比

DPR(Device Pixel Ratio)是指物理像素和CSS像素的比例。在javascript中,可以通过window的devicePixelRatio 属性来获取当前设备的DPR,如下:

<script>

var dpr=window.devicePixelRatio

</script>

布局形式



©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 19,641评论 5 80
  • (转自:http://blog.csdn.net/tengdazhang770960436/article/det...
    一个废人阅读 4,026评论 0 1
  • 《我,一丛荒漠中的红柳》 文/逸茹 如果沙漠不再苍凉, 那一定是我在默默的陪伴。 如果戈壁不再灰暗, 那便是我散发...
    逸茹阅读 3,499评论 0 1
  • 好多葫芦娃-所以对我好点 菜地做点堆肥:羊粪+米糠+荒草+草木灰+ 小白鹭怯生生的,却不怕人 更多的田块-稻好草亦...
    王陆良阅读 1,643评论 0 0
  • 今天老师讲的是销售技巧的讲解。刘老师费劲心思为我们讲解了销售是什么?如何进行销售?如何准备工作?但我总结下来一个词...
    婷下来思考阅读 3,878评论 0 0

友情链接更多精彩内容