代码： const fs = require('fs') const path = require('path') // 匹配style标签的正则 \s匹配所有空格；\S匹配所有非空格；*代表无限次...const regStyle = /[\s\S]*/ // 匹配script标签的正则 const regScript = /[\s\S]*<\/script...// 读取失败时直接return if (err) return console.log('读取html文件失败了', err.message); // 读取成功后，调用对应的三个方法...，分别拆解出css、js、html文件 resolveCss(dataStr); resolveJS(dataStr); resolveHTML(dataStr); }) //...定义处理css样式的方法 function resolveCss(htmlStr) { // 使用正则提取需要的内容 const r1 = regStyle.exec(htmlStr)
V\:*{behavior:url(#default#VML);} 漂亮的圆角... V:* { behavior: url(#default#VML) }漂亮的圆角!
Bootstrap提供了一套丰富CSS设置、HTML元素以及高级的栅格系统来帮助开发人员快速布局网页。...所有的CSS样式和HTML元素与移动设备优先的流式栅格系统结合，能让开发人员快速轻松的构建直观的界面并且不用担心在较小的设备上响应的具体细节。...所以为了更好的响应低分辨率的设备，我们需要结合不同的CSS栅格class。...Bootstrap Form（表单） 表单常见于大多数业务应用程序里，因此统一的样式有助于提高用户体验，Bootstrap提供了许多不同的CSS样式来美化表单。...然而默认的验证不使用Bootstrap指定的CSS。
Bootstrap提供了一套丰富CSS设置、HTML元素以及高级的栅格系统来帮助开发人员快速布局网页。...所有的CSS样式和HTML元素与移动设备优先的流式栅格系统结合，能让开发人员快速轻松的构建直观的界面并且不用担心在较小的设备上响应的具体细节。...所以为了更好的响应低分辨率的设备，我们需要结合不同的CSS栅格class。...，Bootstrap提供了许多不同的CSS样式来美化表单。...然而默认的验证不使用Bootstrap指定的CSS。
rem单位 效果：屏幕宽度不同，网页元素尺寸不同（等比缩放） 与px单位或百分比布局对比： px单位是绝对单位 百分比布局特点宽度自适应，高度固定 rem单位是相对单位 rem单位是相对于HTML标签的字号计算结果...作用：可以使用媒体查询, 根据不同的视口宽度, 设置不同的根字号。...设备宽度不同，HTML标签字号设置： 设备宽度大， 元素尺寸大 设备宽度小，元素尺寸小 目前在rem布局方案中，将网页分成10份，HTML标签的字号为视口宽度的1/10，可以便于计算。...像素尺寸转换rem： 1.根据视口宽度，设置不同的HTML标签字号 2.确定设计稿对应的设备的HTML标签字号 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）...flexible.js是手淘开发出的一个用来适配移动端的js框架，核心原理就是根据不同的视口宽度给网页中html根节点设置不同的 font-size。
由于CSS像素（CSS Pixels）是个逻辑性的像素，而非物理性的像素，所以1个CSS像素在不同设备上大小可能会有不同。但即便是如此，对于CSS来说，还是希望在不同设备上大小尽可能地看起来相同。...也合理的解释了为什么显示设备的物理尺寸与物理像素不同，但是同样CSS值的元素大小却相差无几了。这是因为不同设备的px实现的参考锚点不同。...通过上述一系列的名词介绍，我们可以知道不同设备的尺寸，分辨率，CSS像素大小都不尽相同，所以 视口(viewport) 的大小也就跟设备相关。...文档viewport可以通过三种方式进行设置： HTML标签 第一种方式就是在 HTML的 中引入 下面表格来自...图上信息就不作过多的解释了，有需要详细了解的可以参考https://zh.wikipedia.org/笛卡尔坐标系 WEB中的坐标系统 上面介绍的是我们数学概念中的坐标系，在WEB页面中，也有相应的坐标系统
://designlovr.com/examples/dynamic_stack_of_index_cards/ 2 媒体查询，支持不同的视口 语法: @media screen and...:Respond.js 重置样式:用来覆盖不同浏览器渲染HTML元素时的各种默认样式。 ...让图片随视口缩放 要先删除图片标签的宽度和高度属性，再设置百分比。 ...，以适应不同浏览器对视频格式的支持，依次方法还可针对老浏览器设置备用视频，加入flash的标签，更进一步，还可以提供下载链接。 ...Opera和Aaron Gustafson 可以使用html5验证工具来排除错误代码: http://validator.nu http://validator.w3.org
DOCTYPE 是用来声明文档类型和 DTD 规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。 HTML5 的文档类型声明： <!...优点 使得 HTML 文档结构清晰、布局合理、主体突出、可读性更强。 有利于 SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。 方便其他设备解析，如盲人阅读器根据语义渲染网页。...； ch 代表元素所用字体 font 中“0”这一字形的宽度； vh 1vh 相当于视口高度的 1%，100vh 就是视口的高度； vw 1vw 相当于视口宽度的 1%，100vw 就是视口的宽度； vmax...视口高度 vw 和宽度 vh 两者中的最小值 vmin 视口高度 vw 和宽度 vh 两种中的最大值； % 相对于父级元素的大小来确定； 参考：CSS [1] CSS percentage...在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。
另一方面，相对单位如其名称所示，是相对于另一个属性（大多数情况下是父元素）的。这些单位具有灵活性，可以根据视口动态增长，适应响应式设计，与绝对单位不同。...通常使用 rem 来实现整个布局的一致样式。 vh - 相对于视口高度的1%。 vw - 相对于视口宽度的1%。...例如，如果你需要修改一个元素的外观，你必须找到相应的HTML标签并进行直接的样式调整。想象一下，如果内联样式散布在各个地方，这种方法就不适合扩展。...内部样式表：在您的HTML文件中，使用 标签在HTML文档的 . 中。尽管这种方法是在HTML文件中，但您仍然可以实现内容（元素）与表现（样式）的分离。...标签选择器：这些选择器使用标签名称（例如：div, p ）来定位特定的HTML元素。它们具有最低的特异性，因为它们也会导致广泛的样式，即将样式应用于所有具有指定标签的HTML元素。
根据两者的特性， EM 更适合模块化的页面元素，比如 Web Components REM 则更加方便，只需要设置 html 的字体大小，所以 REM 的使用更加广泛一些 实际开发中，设计图的单位是 CSS...也就是你的手机屏幕，所以不同设备的视觉视口可能不同，有了 visual viewport，我们就可以实现网页的拖拽和缩放了，为什么？ 因为有了一个承载布局视口的容器。...> 进行设置，viewport 元标签的取值有 6 种， width，正整数 | device-width，视口宽度，单位是 CSS 像素，如果等于 device-width，则为理想视口的宽度 height...媒体查询 媒体查询（Media Query）是 CSS3 规范中的一部分，媒体查询提供了简单的判断方法，允许开发者根据不同的设备特征应用不同的样式。...为了强调这些规则的重要性，我甚至说过，“JS 和 CSS 是页面上最重要的部分”。几个月后，我意识到这是错误的。图片才是页面上最重要的部分。
响应式布局 原理 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备。...-- 视口标签的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 --> <meta name="viewport" content="width=device-width...-- 解决ie9以下浏览器对<em>html</em>5新增<em>标签</em><em>的</em>不识别，并导致<em>CSS</em>不起作用<em>的</em>问题 --> <meta name="viewport" content="width...-- <em>视</em>口<em>标签</em><em>的</em>设置：<em>视</em>口<em>的</em>宽度和设备一致，默认<em>的</em>缩放比例和PC端一致，用户不能自行缩放 --> <meta name="viewport" content="width
各种框架和编程语言可能会此消彼长，但 HTML 永不会过时。只是，就算 HTML 的应用如此广泛，这种语言中还是有不少多数开发人员都不了解的标签和属性。...而且，尽管市面上有各种模板引擎（例如 Pug）可用，但你仍然需要对 HTML 和 CSS 有所了解。...更改视口宽度时，你可能会注意到某些图像未按预期缩放。...幸运的是，HTML 的标签使开发人员可以很轻松地解决这一问题，这个标签让你可以添加适合不同宽度的多个图像，而不必只对一张图上下缩放。...最后的想法 HTML 和 CSS 非常强大，你可以只使用两者就构建出色的网站。 但是，尽管人们在大量使用这两种语言，可许多开发人员并没有真正沉浸其中。
GUI渲染线程 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等 解析html代码(HTML代码本质是字符串)转化为浏览器认识的节点，生成DOM树，也就是...，基本步骤重复 HTML 过程，不过是构建 CSS 而不是 HTML CSS 字节转换成字符，接着词法解析与法解析，最后构成 CSS对象模型(CSSOM) 的树结构 我们都知道，节点样式是可以继承的，...DOM树要小，CSS尽量用 id 和 class 少直接用标签 解析JavaScript脚本 这个解析 JS 的步骤是不固定的，因为在构建DOM 树的过程中，当 HTML 解析器遇到一个 script...> 上面代码网页的正文包含两个嵌套 div：第一个父 div 将节点的显示尺寸设置为视口宽度的 50%，父 div 包含的第二个 div 将其宽度设置为其父项的 50%，即视口宽度的 25% （网图侵删...，绘图上下文又分成两种类型 第一种是用来绘制2D图形的上下文，称之为2D绘图上下文（GraphicsContext） 第二种是绘制3D图形的上下文，称之为3D绘图上下文（GraphicsContext3D
dpr，也就是说，在不缩放 1 CSS像素 = 物理像素／分辨率 此外，在移动端的布局中，我们可以通过viewport元标签来控制布局，比如一般情况下，我们可以通过下述标签使得移动端在理想视口下布局：...3. px与自适应 上述我们了解到了当通过viewport元标签，设置布局视口为理想视口时，1个css像素可以表示成： 1 CSS像素 = 物理像素／分辨率 我们直到，在pc端的布局视口通常情况下为980px...此外不同的移动设备分辨率不同，也就是1个CSS像素可以表示的物理像素是不同的，因此如果在css中仅仅通过px作为长度和宽度的单位，造成的结果就是无法通过一套样式，实现各端的自适应。...与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。...，最后在header标签中执行这段代码，就可以动态定义font-size的大小，从而1rem在不同的视觉容器中表示不同的大小，用rem固定单位可以实现不同容器内布局的自适应。
rem 认识 优点： 可以适应不同大小的屏幕 使用px或者百分比布局不能实现： px单位时绝对单位 百分比布局是宽度自适应，高度固定的 rem使用 rem使用时需要配合: 媒体查询 flexible.js...(推荐使用⭐) rem 单位 相对单位 相对于HTML标签的字号计算结果 1 rem = 1 HTML字号大小 媒体查询 作用 能够检测视口宽度，根据不同的视口宽度设置不同的html字号大小 HTML...字号取值 不同的视口宽度，设置不同的HTML字体大小，取值为视口宽度的1/10 语法 @media (媒体特性) { 选择器 { css属性； } } 例如： @...标签字号 查看设计稿宽度 确定参考设备宽度（视口宽度）一般参考375px 确定基准根字号（1/10视口宽度） rem单位 = px数值/基准根字号值 ，取小数点后4位 flexible 动态的检测手机大小...，给网页中html根节点设置不同的font-size。
它研究了两个内容：meta视口和宽度媒体查询。通常我们都会称上述代码为CSS3的媒体查询功能。使用媒体查询功能能够解决针对桌面级的web设计在移动端不同尺寸下的兼容展现。...我们看html文档结构知道最外层的一层是html元素。那么html元素的包含块是什么？这就是要说得视口了。在CSS标准文档中，它被称为初始包含块。这个初始包含块是所有CSS百分比宽度推算的根源。...3、理想视口 布局视口的默认宽度并不是一个理想的宽度。显然用户希望在进入页面时可以不需要缩放就可以有一个理想的浏览和阅读尺寸。理想视口仍是为移动端设备准备的。只有手动添加meta视口标签方才生效。...如果没有meta视口标签，那么布局将会维持它的默认宽度。 如下代码，告诉浏览器，布局视口的宽度应该与理想视口的宽度一致。...并且它的CSS像素的数量会随着用户缩放而改变。 理想视口：为了使网站在移动端有最理想的浏览和阅读宽度而设定。需要手动添写meta视口标签通知浏览器操作。使用它配合css媒体查询制定移动端展示方案。
给所有用户提供同一份 HTML 和 CSS。通过使用几个关键技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。...做响应式设计时，一定要确保 HTML 包含了各种屏幕尺寸所需的全部内容。你可以对每个屏幕尺寸应用不同的 CSS，但是它们必须共享同一份 HTML。...千万不要让用户放大页面，才能点中一个小小的按钮或者链接。 # 给视口添加 meta 标签 视口的meta标签。这个 HTML 标签告诉移动设备，你已经特意将网页适配了小屏设备。...https://codepen.io/cellinlab/pen/LYeJOrM # 使用 srcset 提供对应的图片 媒体查询能够解决用 CSS 加载图片的问题，但是 HTML 里的 标签怎么办呢...对于这种行内图片，有另一个重要的解决方法：srcset 属性（“source set”的缩写）。 HTML 的一个较新的特性。它可以为一个 标签指定不同的图片URL，并指定相应的分辨率。
viewport（视口） ###3个视口### layout viewport（布局视口）:CSS初始包含块的尺寸。CSS中所有以百分比为单位的长度都是根据它推算出来的。...而完美视口需要通过viewport meta标签来进行相应的设置。 ###像素### 一个像素就是计算机屏幕能显示一种特定颜色的最小区域。屏幕上的像素越多，同一时间你可以看到的就越多。...CSS像素:px(设备独立像素) 逻辑像素，浏览器使用的抽象单位(之所以叫抽象单位，是因为其可以根据不同的设备和不同的关系来变大变小，所以称为抽象单位)为Web开发者创造的，在CSS和JavaScript...所以，对于图片高清问题，比较好的方案就是两倍图片(@2x)。 如：200×300(css pixel)img标签，就需要提供400×600的图片。...我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局 ###调整html元素大小的值### 有css与js两种方式 css方式： html { font-size:
2.3 理想视口 (ideal viewport) 为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口，对设备来讲，是最理想的视口尺寸,需要手动添写meta视口标签通知浏览器操作。...meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽。...理想视口由乔布斯提出 2.4 meta 视口标签 <meta name="viewport" content="width=device-width, user-scalable...使用 @media查询，可以针对<em>不同</em><em>的</em>媒体类型定义<em>不同</em><em>的</em>样式 @media 可以针对<em>不同</em><em>的</em>屏幕尺寸设置<em>不同</em><em>的</em>样式 当你重置浏览器大小<em>的</em>过程中，页面也会根据浏览器<em>的</em>宽度和高度重新渲染页面 目前针对很多苹果手机...排除某个媒体类型，相当于“非”<em>的</em>意思，可以省略 only 指定某个特定<em>的</em>媒体类型，可以省略 2.4 媒体特性 每种媒体类型都具体各自<em>不同</em><em>的</em>特性，根据<em>不同</em>媒体类型<em>的</em>媒体特性设置<em>不同</em><em>的</em>展示风格。
CSS 像素是逻辑像素。 为了在不同尺寸和密度比的设备上表现出一致的视觉效果，使用逻辑像素描述一个相同尺寸的物理单位。在具有高密度比的屏幕下，一个逻辑像素对应多个物理像素。...在 PC 端上， 元素的宽度被设置为 100% 时，等同于视口大小，等同于浏览器的窗口大小。...CSS 布局会基于布局视口进行计算。移动设备的浏览器基于虚拟的布局视口去渲染网页，并将对应的渲染结果缩小以便适应设备实际宽度，从而可以完整的展示站点内容且不破坏布局结构。...使用 viewport 元标签配置视口 开发者可以通过 对移动端的布局视口进行设置。...如果不进行 viewport 元标签的设置，可能会导致开发者设定的较小宽度的媒体查询永远不会被使用，因为默认的布局视口宽度为 980px。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
