大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！Chrome 通过 Viewport Segments API 支持可折叠设备2025 年 6 月 9 日 Google 开发者 Alexis Menard 宣布支持 Viewport Segments …
技术教程
什么是WebRTC?WebRTC，网页即时通信（Web Real-Time Communication），实现了基于网页的视频会议。WebRTC具有免安装，方便接入的特点，它不需要安装任何插件，在浏览器上就可以实现网页端的实时通信。在浏览器之间快速地实现音视频通信。WebRTC是一个开源项目，旨在使得浏览器能为实时通信（RTC）提供简单的JavaScript …
问题：盒模型是什么？解析：当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框架模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。盒模型由content（内容）、padding（内边距）、border（边 …
前言：这是一个使用HTML、CSS和JavaScript实现的Markdown编辑器。该编辑器无需任何服务器环境，所有功能完全在客户端运行。使用浏览器打开即可（推荐ChromeFirefox）。所有资源均为本地文件（除了marked.js使用CDN）。如果需要完全离线使用，可以下载marked.min.js文件到本地并修改引用路径。适用于：快速Markdow …
在前端开发中1.想要网站兼容手机、平板电脑、pc，就得为不同的设备定制不同的版本。2.想要网站的某些页面在宽屏显示器下一行显示更多的内容，又得为宽屏定制一个版本。3.很多人并不是在全屏的情况下浏览我们的页面，如果让页面随着浏览器宽度改变而相应的调整会不会比较好？为了解决上述的问题，常用的解决方法——web响应式。响应式的概念，网上到处都有，就不在累赘了，下面 …
MediaInfo提供有关视频或音频文件的技术和标签信息。信息示例包括编解码器、比特率、每秒帧数、宽度、高度、频道数、持续时间、标题、作者、字幕语言和章节名称。多种方式可以查看信息（文本、工作表、树和HTML），您可以自定义这些视图。可以导出文本、CSV、HTM、图形界面或命令行。支持的格式包括MKV、OGM、AVI、MPEG1、MPEG2、MPEG4、DV …
阻止后续事件当给一个本身就带有事件的标签绑定事件时，需要先阻止那个标签的原生事件，不然会容易产生BUG。阻止事件冒泡事件冒泡是指在DOM中，当一个特定元素上发生某个事件时，如果该元素有父元素，那么父元素也会接收到相同的事件。接着，如果父元素上也有相同类型的事件监听器，那么它也会被触发。这个过程会一直向上传播，直到到达DOM树的根节点。举个例子，假设有一个按钮 …
先来看两组数据，下图为iOS设备分辨率分布，图中包含5种不同分辨率，每种分辨率都有相当多比例的用户群体。再来看看android设备分辨率分布。这里边android设备只展示有9种屏幕分辨率，每一种分辨率都拥有一定比例的用户群体。与ios合起来至少有10种分辨率，需要页面支撑。如果按照目前网站设计中多站点方式去支持如此众多的视口，开发和维护工作是非常沉重的。需 …
如何制作适用于移动设备的网站？近年来，随着移动互联网的快速发展，越来越多的用户使用移动设备访问网站，因此，制作适用于移动设备的网站已经成为一个非常重要的问题。在本文中，我们将探讨如何制作适用于移动设备的网站，并提供一些实用的建议和技巧。首先，设计一个适应不同屏幕大小的布局是制作适用于移动设备的网站的关键。移动设备的屏幕大小和分辨率各不相同，因此，网站应该能够 …
响应式布局简明示例，响应式布局最好同时也是自适应布局，然后再配合css3媒体查询，来达到完美的响应式布局。css3的媒体查询ie9一下是不支持的，这太遗憾了，不过幸运的是有大神已经为前端屌丝们写好了用于IE9以下的媒体查询脚本文件，引用方式如下：<!--[if lt IE 9]><script src="http:css3-mediaque …