可视化大屏页面开发

页面显示区域大小以chrome为基准

假设浏览器属于最大化状态下

桌面一共有以下几个部分构成

• 电脑的任务栏，根据用户的操作习惯决定（假设用window系统），不同位置出现的概率底部>左侧>顶部>右侧， 并且高度也不一定

window10 默认高度是40px中等任务栏高度为48像素，大高度为72像素，小高度为32像素

• 浏览器标签栏：主要用于切换不同tab页的标签
• 浏览器工具栏：主要用于用户输入页面链接和页面的其他操作（刷新、前进、后退）
• 浏览器书签栏：主要是用户对一些网站的快捷方式的记录（用户可以配置是不是显示）
• 页面显示区域：前端开发页面显示的真正区域

如图所示

页面显示区域的高度获取

横向分辨率：window.screen.width
纵向分辨率：window.screen.height
浏览器的宽度：window.outerWidth
浏览器的高度：window.outerHeight
页面渲染区域的宽度：window.innerWidth
页面渲染区域的高度：window.innerHeight

三者之间的关系

浏览器的高度 = 页面渲染区域的高度 + 浏览器标签栏 + 浏览器工具栏 + 浏览器书签栏

• 当电脑工具栏在垂直方向时：

纵向分辨率 >= 浏览器的高度 + 电脑任务栏高度
横向分辨率 >= （浏览器的宽度 = 页面渲染区域的宽度）

• 当电脑工具栏在水平方向时

纵向分辨率 >= （浏览器的高度 = 页面渲染的高度）
横向分辨率 >= 电脑任务栏宽度 + 浏览器的宽度或者页面渲染的宽度

自适应设计和响应式设计

都是前端开发中用于优化网页在不同设备上显示效果的方法，但它们有着明显的区别

核心原理

响应式设计

• 使用流式布局、弹性网格、媒体查询等技术，使网页能够根据不同设备的屏幕大小、分辨率进行自适应调整
• 强调一个统一的代码库，无需为不同设备维护多个版本，从而简化开发和维护工作
• 媒体查询是响应式设计的核心，允许开发者根据屏幕尺寸或分辨率应用不同的CSS样式

自适应设计

• 是为特定设备尺寸或分辨率创建多个独立布局的网页设计方法
• 预定义的几种屏幕尺寸，设计出几套固定的布局，并使用JavaScript或CSS媒体查询进行切换
• 可能需要维护多个布局版本，因此可能增加开发和维护成本

实现方式

响应式设计

-使用百分比或相对单位（如em、rem）定义元素的宽度、高度和间距，以实现流式布局
-通过媒体查询调整布局和样式，以适应不同屏幕尺寸
-弹性图片和视频等媒体内容，确保它们在不同屏幕尺寸下保持合适的比例和分辨率

自适应设计

• 为不同的设备尺寸设计固定的布局，并使用断点进行切换。
• 可能依赖服务器端或客户端的设备检测技术来确定用户设备类型，并返回相应的布局。
• 针对特定设备进行优化，以提供更好的用户体验和性能