web前端

移动端rem 适配方案

知识点:

rem是什么?

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素(rem)一个是依赖父元素计算(em)。


个人理解rem布局可分为俩种情况无设计稿有设计稿

无设计稿

1、首先需要在<head>标签中加入

<meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no">

对于viewport的详细解释可以参考这篇文章:https://www.cnblogs.com/2050/p/3877280.html

2、在<script>标签中加入

window.onresize = function

彻底弄懂浏览器缓存策略

Web 缓存介绍

  • Web 缓存是指一个 Web 资源(如 html 页面,图片,js,数据等)存在于 Web 服务器和客户端(浏览器)之间的副本。
  • 缓存会根据进来的请求保存输出内容的副本;当下一个请求来到的时候,如果是相同的 URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。
            

单个域名下浏览器Cookie限制个数为多少

起因

去网上搜了下关于Cookie的介绍,看了好几篇都长得很一样,阉割一下内容不外乎说是"不同浏览器限制cookie数不同,大致在30-50这个范围,(前缀)浏览器允许Cookie多达4KB左右,包括名、值、等号"。

我还在上学那会儿,包括后面毕业后工作一段时间,我也没有特别去关注过这个话题,基本上如果面试官问到我了,也就把网上知道的这些讲了一下。

今年的遭遇给了我思考的时间特别多,最近我又重新去仔细读了下楼上那句话,我发现我读不懂了,第一个,我看的资料并不是特别权威的,也都是网上的博客帖子,对浏览器限制30-50个这个范围产生了一个质疑,是真的吗?第二个是允许多达4KB左右,就很迷糊,到底是一个域名下所有的Cookie加起来的值是4KB左右,还是说单独的Cookie的一个Name所表示的信息它可以是4KB左右,这让我很迷啊。

一行代码实现网页暗黑模式

随着 iOS 13 暗黑模式的发布,前端又要开始忙适配了。那么有没有一劳永逸的方法呢?当然是有的,往下看:

1
2
3
html {
    filter: invert(100%) hue-rotate(180deg);
}

就是这么简单,点击下面的按钮尝试一下吧


只要一行代码,实现十种 CSS 经典布局

页面布局是样式开发的第一步,也是 CSS 最重要的功能之一。

常用的页面布局,其实就那么几个。下面我会介绍5个经典布局,只要掌握了它们,就能应对绝大多数常规页面。

这几个布局都是自适应的,自动适配桌面设备和移动设备。代码实现很简单,核心代码只有一行,有很大的学习价值,内容也很实用。

        

Web Components 是什么?它为什么对我们这么重要?

摘要

先看一看未来的 WebComponent 标准,再简单了解怎么写 WebComponents,最后说说它的重要性。

简介

这篇文章简单介绍 WebComponent 标准,介绍哪些浏览器已经开始支持 WebComponents,讨论 WebComponents 能解决什么问题,以及它对 web 开发的重要性。你可以了解到如何利用 Vanilla javascript 编写一个简单的 WebComponent,我还会针对它的潜在优势分享我自己的一些拙见。…

                

玩转前端 Video 播放器

Web 开发者们一直以来想在 Web 中使用音频和视频,但早些时候,传统的 Web 技术不能够在 Web 中嵌入音频和视频,所以一些像 Flash、Silverlight 的专利技术在处理这些内容上变得很受欢迎。

这些技术能够正常的工作,但是却有着一系列的问题,包括无法很好的支持 HTML/CSS 特性、安全问题,以及可行性问题。

幸运的是,当 HTML5 标准公布后,其中包含许多的新特性,包括 <video><audio> 标签,以及一些 JavaScript APIs 用于对其进行控制。随着通信技术和网络技术的不断发展,目前音视频已经成为大家生活中不可或缺的一部分。此外,伴随着 5G 技术的慢慢普及,实时音视频领域还会有更大的想象空间。

接下来本文将从八个方面入手,全方位带你一起探索前端 Video 播放器和主流的流媒体技术。阅读完本文,你将了解以下内容:

jQuery性能优化指南

现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了,  比如我.  jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了<jQuery Performance Rules>这篇文章, 简单的摘译了一下:

  1. 总是从ID选择器开始继承
  2. 在class前使用tag
  3. 将jquery对象缓存起来
  4. 掌握强大的链式操作
  5. 使用子查询
  6. 对直接的DOM操作进行限制
  7. 冒泡
  8. 消除无效查询
  9. 推迟到 $(window).load
  10. 压缩js
  11. 全面掌握jquery库