摘要:屏幕分辨率是指一块屏幕中画面水平方向的像素值画面垂直方向的像素值。图像分辨率是指每英寸图像内的像素点数。图像分辨率是有单位的,叫像素每英寸。设备像素可能不相同物理像素不会改变,单位是。及英寸,而英寸等于厘米举个
viewport是什么
移动端中,分为两个视口:
layout viewport 布局视口: 视口的分辨率接近于PC显示器,也就是html的宽度接近于pc端的宽度。
visual viewport 视觉视口: 手机的物理可视窗口,不借助滚动条所看到的内容。
移动设备的viewport默认是layout viewport
可以这两理解,有一个图片(layout viewport),宽度是:1090 1090,有一个画框(visual viewport),宽度是:320 460,用户通过画框来看画。当layout viewport与visual viewport完全一致时,用户通过画框看到的就是整个画。如果layout viewport较大,用户需要通过移动画框来查看画面内容。
viewport是meta中的一个值,通过设置viewport,可以控制浏览器如何规范的渲染Web页面
要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,如果initial-scale和viewport有冲突,浏览器会取比较大的值。
viewport值:
name | value | Description |
---|---|---|
width | 正整数或device-width | 定义视口(layout viewport)的宽度,单位为像素, |
height | 正整数或device-height | 定义视口的高度,单位为像素 |
initial-scale | [0.0-10.0] | 定义初始缩放值 |
minimum-scale | [0.0-10.0] | 定义缩小最小比例,它必须小于或等于maximum-scale设置 |
maximum-scale | [0.0-10.0] | 定义放大最大比例,它必须大于或等于minimum-scale设置 |
user-scalable | yes/no | 允许用户手动缩放页面,默认是yes |
以上所说的宽度,其实是分辨率
什么是分辨率像素:每张图片都是由色点组成的,每个色点称为一个像素。
屏幕分辨率:是指一块屏幕中画面水平方向的像素值 * 画面垂直方向的像素值。
图像分辨率: 是指每英寸图像内的像素点数。图像分辨率是有单位的,叫 像素每英寸。
设备像素:device pixel屏幕上的像素。是物理像素。 设备像素可能不相同
物理像素不会改变,单位是pt。
1pt = 1/72(inch),inch及英寸,而1英寸等于2.54厘米
举个
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/117560.html
摘要:高度模型浅识为的简写,简称为块级格式化上下文,为浏览器渲染某一区域的机制,中只有和中还增加了和。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不...
摘要:此外,跟踪尚未延迟加载的元素数量,以及取消绑定滚动事件处理程序的繁琐工作将由开发者来完成。图像延迟加载列表图顺序加载的组件已经开源啦有兴趣的同学可以查看使用起来非常简单图片延时加载十分重要,尤其是对于移动端用户。 从理论上来看,图像延迟加载机制十分简单,但实际上却有很多需要注意的细节。 此外,有多个不同的用例均受益于延迟加载。 首先,我们来了解一下在 HTML 中延迟加载内联图像。 延迟加载...
摘要:首先举个例子,的像素分辨率为英寸。像素密度定义代表的就是像素密度指的是每英寸的长度上排列的像素点数量。物理尺寸如图可以知道,英寸也就指的是屏幕对角线的物理长度。英寸是一个固定长度,等于厘米。显示效果如下如图看出显示要比清晰的多。 首先举个例子,iphone6s的像素分辨率为1334x750,326ppi,4.7英寸。如图下面我们一个一个来解释。showImg(https://segme...
阅读 3162·2021-11-12 10:36
阅读 1210·2019-08-30 15:56
阅读 2426·2019-08-30 11:26
阅读 522·2019-08-29 13:00
阅读 3588·2019-08-28 18:08
阅读 2739·2019-08-26 17:18
阅读 1881·2019-08-26 13:26
阅读 2417·2019-08-26 11:39