使用 position:sticky 实现粘性布局
如果问，CSS 中 position 属性的取值有几个？
大部分人的回答是，大概是下面这几个吧？
|
1
2
3
4
5
6
|
{ position: static; position: relative; position: absolute; position: fixed;} |
额，其实，我们还可以有这 3 个取值：…
H5唤起APP指南(附开源唤端库)
前一段时间在做一些H5页面，需求中落地页占比较大，落地页承担的职责就是引流。引流有两种形式，同时也是我们对唤端的定义：引导已下载用户打开APP，引导未下载用户下载APP。
引导已下载用户打开APP，从数据上说用户停留在APP中的时间更多了，是在提高用户粘性；从体验上说，APP体验是要比H5好的。引导未下载用户下载APP，可以增加我们的用户量。
上面其实分别解释了 什么是唤端 以及 为什么要唤端，也就是 3W法则 中的 What 和 Why，那么接下来我们就要聊一聊 How 了，也就是 如何唤端 。
原Web Components 是什么？它为什么对我们这么重要？
摘要
先看一看未来的 WebComponent 标准，再简单了解怎么写 WebComponents，最后说说它的重要性。
简介
这篇文章简单介绍 WebComponent 标准，介绍哪些浏览器已经开始支持 WebComponents，讨论 WebComponents 能解决什么问题，以及它对 web 开发的重要性。你可以了解到如何利用 Vanilla javascript 编写一个简单的 WebComponent，我还会针对它的潜在优势分享我自己的一些拙见。…
前端开发必配置：html5shiv.js和respond.min.js的作用说明！
一、做页面开发时我们基本都会需要解决的问题：
1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
2、让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，故这两种问题还是需要解决的，…
H5页面唤起微信各种功能
年初的动态化分享热潮里，基本上都提到了 URL 跳转，天猫称为统跳协议，蘑菇街称为 URL 路由。其实很多大厂都默默地做了一套 URL 跳转机制，比如说 – 微信。
…原响应式图像正确设置方法
响应式图像正确设置方法，代码如下：
PC,平板，手机显示良好：
我们用<picture>标签来实现同时适配不同像素密度、不同大小的屏幕。srcset属性用来指定多张图像，适应不同像素密度的屏幕。
通过 媒体查询，来为不同宽度的屏幕设置不同的图片。
其中，1x 2x 3x 代表设备像素比。
通常 pc的设备像素比为1，iphone7为2，iphone7 plubs为3，一些手机为4，还有一些为1.5，3.65等非整数值。
在下面，所有的设备像素比都要用同一张图片，这样才能显示正常。…
HTML rel属性值释义大全
一、HTML rel属性值索引
HTML中有一个名为rel的属性，是relationship这个单词的缩写，指明两个文档之间的关系，专门用来链接相关元素上，如<a>、<area>、<form>或<link>元素上，因此rel的属性值也是“链接类型”的代称。
rel支持非常多的属性值，包含的知识非常多，且有些属性值非常重要，完整细读至少需要30分钟时间。
二、33个rel属性值完全展示
1. rel=”alternate”
| 允许使用的链接元素 | 不允许使用的链接元素 |
|---|---|
| <a>、<area>、<link> | <form> |
单词alternate有交替、替换的意思。顾名思意就是链接有替换内容。主要有下面3大应用场景，有些场景还非常实用。
- 用在
<link>元素中，和stylesheet链接类型一起使用，配合title属性（必须），可以定义替换CSS，可以以一种体验更好的方式实现类似换肤这种功能。
兼容性非常好，IE，Chrome和Firefox均支持这种更原生的换肤效果实现。具体原理与实现可以参见这篇热门文章：“link rel=alternate网站换肤功能最佳实现”。 - 如果网站包含RSS订阅。可以使用该值进行指明，需要设置type属性值为
application/rss+xml或者
H5解决m3u8视频直播流问题
作者：蒲小花
链接：https://www.zhihu.com/question/21087379/answer/252216119
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
… 链接：https://www.zhihu.com/question/21087379/answer/252216119
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
最近接触了这一块，简单说下吧。
m3u8 是一种基于 HTTP Live Streaming 文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。目前 由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持，你可以直接通过
video.src = 'xxx.m3u8'
来实现。
如果你希望兼容所有的浏览器的话, 你需要知道 Chrome 和 Firefox 支持的 Media Source Extensions（ 非常不理想，在IE和国内具备兼容模式的极速浏览器下） 的情况：
目前 Youtube 和 Netflix 等主流视频网站，即使
移动前端不得不了解的HTML5 head 头标签
HTML的头部内容特别多，有针对SEO的头部信息，也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容，除了平常的项目开发，HTML 头部标签功能，特别是meta，link等标签的功能属性显得非常重要。这里整理了一份 <head> 部分的清单，让大家了解每个标签及相应属性的意义，写出满足自己需求的 <head> 头部标签，可以很有效的增强页面的可用性。…
移动端]专用的meta
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
这个用的最多，
width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字，要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。
user-scalable指令指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放 …
近期评论