黑马程序员技术交流社区

标题: 小小看法 [打印本页]

---

作者: comeonbaby    时间: 2020-4-30 20:24
标题: 小小看法
今天我想分享一下关于H5移动端开发关于视口和像素的一些小小的分享学习总结
对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：
1.首先，选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。
2.对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。
viewport（视口）
###3个视口###
layout viewport（布局视口）:CSS初始包含块的尺寸。CSS中所有以百分比为单位的长度都是根据它推算出来的。如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做 layout viewport。
可以通过document.documentElement.clientWidth来获取。
visual viewport（视觉视口,即用户实际看见的部分）：屏幕上显示的网页区域的尺寸，会被缩放影响，可以通过window.innerWidth来获取。
ideal viewport（完美视口）:完美适配移动设备的viewport，它的宽度等于移动设备的屏幕宽度。有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口需要通过viewport meta标签来进行相应的设置。
###像素###
一个像素就是计算机屏幕能显示一种特定颜色的最小区域。屏幕上的像素越多，同一时间你可以看到的就越多。
设备物理像素
设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。
CSS像素:px(设备独立像素)
逻辑像素，浏览器使用的抽象单位(之所以叫抽象单位，是因为其可以根据不同的设备和不同的关系来变大变小，所以称为抽象单位)为Web开发者创造的，在CSS和JavaScript中使用的一个抽象的层。px是相对长度单位，相对的是设备物理像素(device pixel)
注意：在旧的屏幕上，当缩放程度为100%时，一个CSS像素等于一个设备像素。但当在高密度屏幕上，例如苹果的视网膜屏幕，一个CSS像素跨越了多个设备像素。如果用户缩小到足够的程度，一个CSS像素会变得明显比一个设备像素小。
举个例子：
当给一个元素设置width:200px时，到底会发生什么事情？
这个width为200px的元素跨越了200个CSS像素。而200个CSS像素相当于多少个设备物理像素取决于屏幕的特性(是否是高密度)和用户进行的缩放。
用户放大得越大，一个CSS像素覆盖的设备物理像素就越多。因此，这个元素不一定会跨越200个设备物理像素。例如：在苹果的视网膜屏幕上，视网膜屏幕的像素密度是普通屏幕的两倍，那么这个元素就跨越了400个设备物理像素。如果用户放大，它将跨越更多的设备物理像素。
这是我个人的小小总结，大家如果有其他想法，欢迎留言讨论哟~

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2