当前位置: 首页 > article >正文

【学习笔记】桌面浏览器的视口

概念:设备像素和CSS像素

设备像素:设备物理屏幕的像素分辨率,使用screen.width/height获取

这里有四个像素100%缩放,CSS像素完全覆盖设备像素
在这里插入图片描述

缩小后,CSS像素开始缩小,意味着一个设备像素覆盖多个CSS像素
在这里插入图片描述

放大后,CSS像素变大,现在一个CSS像素覆盖多个设置像素
在这里插入图片描述

您只对CSS像素感兴趣。正是这些像素决定了样式表的呈现方式

屏幕大小

用户显示器的大小,使用screen.width/height获取,对我们来说这个数据没什么用

屏幕尺寸示例
在这里插入图片描述

窗口尺寸

它准确地告诉您用户当前有多少空间可用于CSS布局
使用window.innerWidth/innerHeight获取

窗口大小示例
在这里插入图片描述

如果用户放大,窗口中的可用空间就会减少。innerWidth/Height通过减小来反映这一点。

注意,测量的宽度和高度包括滚动条

这里的例外是Opera,它的窗当用户放大时,innerWidth/Height不会减小:它们是以设备像素为单位测量的。这在台式机上很烦人,但在移动设备上却是致命的,我们稍后会看到。

滚动偏移

window.pageXOffsetwindow.pageYOffset,包含文档的水平和垂直滚动偏移
因此,可以得到滚动条偏移了多少,不管在什么缩放状态,测量的也是CSS像素。

滚动偏移示例
在这里插入图片描述

概念:视口(viewport)

viewport的功能是约束元素,它是站点最上面的包含块

视口不是HTML结构,所以你不能通过CSS来影响它。它只是有浏览器窗口的宽度和高度-在桌面上。在手机上,情况就复杂多了。

视口宽度示例
在这里插入图片描述

测量视口

使用document.documentElement.clientWidth/clientHeight,测量视口,不包含滚动条
document.documentElement其实代表<html>dom元素

虽然是html元素,但是这个属性是一个特例,就是指定html的尺寸,它也是视口尺寸
在这里插入图片描述

测量html元素

document.documentElement.offsetWidth/offsetHeight,测量真正的html尺寸

html元素的真正尺寸演示
在这里插入图片描述

事件坐标

pageX/Y,以CSS像素表示相对于<html>元素的坐标
clientX/Y,以CSS像素为单位给出相对于视口的坐标
screenX/Y,以设备像素为单位给出相对于屏幕的坐标。
您将在90%的时间使用pageX/Y;通常您想知道事件相对于文档的位置。另外10%的时间您将使用clientX/Y。你永远不需要知道事件相对于屏幕的坐标

媒体查询

您可以定义特殊的CSS规则,这些规则只在页面宽度大于、等于或小于某个大小时执行
width/height,类似于clientWidth/Height,及视口尺寸,是CSS像素
device-width/device-height,类似于screen.width/height,是设置像素

演示
在这里插入图片描述


http://www.kler.cn/a/441388.html

相关文章:

  • python 统计相同像素值个数
  • [b01lers2020]Life on Mars1
  • WPS数据分析000006
  • 企业信息化2:行政办公管理系统
  • 【Flask】在Flask应用中使用Flask-Limiter进行简单CC攻击防御
  • websocket实现
  • 【mysql】大型互联网项目为什么考虑禁止使用外键
  • 中阳科技:量化模型驱动的智能交易革命
  • DATA-HUB 安装与启动:
  • 静态路由、RIP、OSPF、BGP的区别
  • Qt 实现 UDP 广播的详细教程
  • 部署WordPress6.7.1版本(官网最新版本)
  • C# 机器视觉-RANSAC算法拟合圆
  • 基于RRT(Rapidly-exploring Random Tree)的无人机三维路径规划,MATLAB代码
  • 【Redis】一人一单秒杀活动
  • Spring Boot 启动时间优化全攻略
  • macos big sur 软件icons图标大全(新增至2719枚大苏尔风格图标)
  • Nodejs架构
  • 【MySQL中多表查询和函数】
  • Linux 入门指南(详细版:基于 CentOS,使用 WSL 环境)
  • 【Linux】软件包管理与vim工具使用详解
  • 微服务系统架构设计参考
  • 题目 3010: 奇偶数之和
  • 【算法day14】二叉树:搜索树的递归问题
  • 如何利用Python爬虫京东获得JD商品详情
  • 力扣-图论-12【算法学习day.62】