网页布局相关

分辨率

  1. 屏幕分辨率
    指的是屏幕由多少个像素点构成的,比如 375 * 667 就是说有375 * 667个像素点组成
  2. 图像分辨率
    指的是一张图片由多少个像素点构成,表示图片分别在垂直和水平上所具有的像素点数,当然对于同一大小尺寸的图片,像素点越多,分辨率越高,图片越清晰
  3. PPI(Pixel Per Inch):每英寸包括的像素数
    这个数字越大,说明同一尺寸的像素点越多,当然越清晰了
  4. DPI(Dot Per Inch):即每英寸包括的点数
    这个主要形容打印机的墨点数的,如果放到设备上,和楼上的意义是一样的
  5. DP 设备独立像素
    新的智能设备的出现,追求更精细的像素,比如宽度都是375,老版手机可能真的是用375个像素去渲染,但是为了更精细的体验,新的智能设备会采用750个物理像素去渲染,但是显示出来的大小最终是一样的,我们用一种单位来告诉不同分辨率的设备,在当前设备上,一个元素究竟应该使用多少个像素,这个单位就是DP
  6. DPR device pixel ratio物理像素和设备独立像素比
    对于iphone6 7 8这样的机器,DPR=3 因此当你构建一个宽高都是200px的div时,实际渲染的物理像素点是600 * 600
    获取: web中可以通过 window.devicePixelRatio来帮助我们获取设备的dpr
    设置:css的媒体查询可以解决 @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ }

视口

  1. 布局视口
    布局视口(layout viewport):当我们以百分比来指定一个元素的大小时,它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时,它就是基于布局视口来计算的。默认情况下,布局视口就等于当前浏览器的窗口大小,不包括滚动条,borders和margins等
    我们可以通过调用document.documentElement.clientWidth / clientHeight来获取布局视口大小

  2. 视觉视口
    视觉视口(visual viewport):用户通过屏幕真实看到的区域。默认情况下也是浏览器的窗口大小,但是会包含上滚动条,borders等这些内容的宽高
    我们可以通过调用window.innerWidth / innerHeight来获取视觉视口大小。

  3. 理想视口
    当页面的缩放比例是100%的时候,css像素就是设备独立像素,理想视口大小就是视觉视口的大小

  4. meta viewport
    常用:

    1
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;”>

    具体详解:

    width:正整数或者device-width 定义的是布局视口的宽度
    height:同上,定义的是布局视口的高度
    Inital-scale:定义的是页面的初始缩放比例
    Minimum-scale:定义最小的缩放比例,必须小于或者等于最大缩放比例
    maximum-scale:定义最大缩放比例
    User-scalable: bool值,表示用户是否可以手动缩放页面,默认是yes,设置为no,即可禁止缩放
坚持原创技术分享,您的支持将鼓励我继续创作!