viewport-fit 这个属性解决全屏的问题，设置了这个属性后，页面就会填充整个刘海区域。 <meta name=“viewport” content=“width=device-width, initial-scale=1.0, viewport-fit=cover”> 上面属性设置之后，再把html,boby高度设置成100% 发现底部出现空白没有填满，这主要是这里的100%，只是安全区域的高度，是不包含非安全区域的。需要主动获取屏幕像素高度为html、body设置。 其他 viewport-fit 可设置的值: contai …
一、目的 文章主要实现的目的：代码一致性和最佳实践。 通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。 同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。 本文章只是起指导作用，除个别条目强制之外，大多数为非强制约束，开发者可根据自己的实际情况自行决定是否要遵守，该指南只是保证大方向一致性和最佳实践的阶段性总结，不是最后结论，它会随着时间而变化。 二、基本规范 1. 结构、样式、行为分离 尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。 2. 缩进 统一两个空格缩进，不要使用 Tab 或者 Tab、空格混搭。 3. 文件编码 使用不带 BO …
注：文章内引号为中文标点，请自行转换标点。 mui.openWindow({ url: ‘xxx.html’, //String类型,要打开的界面的地址 id: ‘id’, //String类型,要打开的界面的id styles: { //Webview窗口对象的样式 width: ‘100%’, //String类型,窗口的宽度.支持百分比、像素值，默认为100%.未设置width属性值时,可同时设置left和right属性值改变窗口的默认宽度. height: & …
CSS3 filter(滤镜) grayscale(%)： 属性将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； 设置: html { -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms-filter: grayscale(100%); /*ie9*/ -o-filter: grayscale(100%); /*opera* …
impress.js 可以让演示文稿更有新意，结合CSS/JS动画，自己掌控视觉效果，比 PowerPoint 更加灵活精美，以下是一些 DEMO例子： 使用 空格 或 方向键 操作 http://scottcheng.github.io/revolutionary-css3/ http://introtonode.herokuapp.com/ http://bartaz.github.io/meetjs/css3d-summit/ http://www.toforge.com/wp-content/impressjs_amazonaws_cubes/index.html http://exe …
思路: 将文字放到一个容器中，从最小的值开始逐一尝试增加字号是否超出容器宽度。 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /> <!– 默认使用webkit内核 –> <meta name=&# …
代码 <h1 class=“css-jump”> <span>C</span> <span>S</span> <span>S</span> <span>跳</span> <span>动</span …
实现基于两点： 图形是在被设置了 filter: contrast() 的画布背景上进行动画的 进行动画的图形被设置了 filter: blur()（ 进行动画的图形的父元素需要是被设置了 filter: contrast() 的画布） 意思是，上面两圆运动的背后，其实是叠加了一张设置了 filter: contrast() 的白色背景，而两个圆形则被设置了 filter: blur() ，两个条件缺一不可。 <div class=“container”> <div class= …