CSS3媒体查询@media功能使用总结 | GCidea's blog

作者:JerryXia | 发表于 , 阅读 (25)
目录1. 前言2. 示例3. 语法4. 媒体功能
前言  媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,这些表达式会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备的类型以及所有的表达式的值都是true,那么该媒体查询的结果就是true。例如width,height,color。CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身。
示例1234567891011<!-- link元素中的CSS媒体查询 --><link rel="stylesheet" media="(max-width: 600px)" href="example.css" /><!-- 样式表中的CSS媒体查询 --><style>@media (max-width: 600px) {  .facet_sidebar {    display: none;  }}</style>解释:
当媒体查询是true时,其相应的样式表或样式规则就会被应用。比如上面的写法表示,当设备宽度在600px以内,就会...阅读全文

Hexo博客框架配置优化-网站sitemap和RSS源订阅 | GCidea's blog

作者:JerryXia | 发表于 , 阅读 (27)
目录1. 前言2. Hexo的sitemap 配置和RSS 配置3. 使用百度站长工具提交sitemap并抓取4. 使用AZ Reader进行RSS订阅测试
前言  Sitemap 可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的 Sitemap 形式,就是XML 文件,在其中列出网站中的网址以及关于每个网址的其他元数据(上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等),以便搜索引擎可以更加智能地抓取网站。    简易信息聚合(也叫聚合内容)是一种RSS基于XML标准,在互联网上被广泛采用的内容包装和投递协议。RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,是使用最广泛的XML应用。RSS搭建了信息迅速传播的一个技术平台,使得每个人都成为潜在的信息提供者。发布一个RSS文件后,这个RSS Feed中包含的信息就能直接被其他站点调用,而且由于这些数据都是标准的XML格式,所以也能在其他的终端和服务中使用,是一种描述和同步网站内容的格式。  可以看出,sitemap可以使得博客被搜索引擎抓取,增加博客受众...阅读全文

使用dora-proxy-plugin处理异步请求跨域问题 | GCidea's blog

作者:JerryXia | 发表于 , 阅读 (27)
目录1. 前言2. 概述3. 实践
前言  这个问题描述的背景,是基于访问本地前端项目的nodejs服务器,但是却请求线上API数据接口的场景。如果能做到统一本地线上环境是更好的,有利于维护和调试,具体做法可以参考:使用SwitchyOmega和Charles配置统一的开发和生产环境、客户端代理配置的几种常见方式
概述  根据前后端分离的原则,前端独立进行功能的开发,在与后端真实接口进行对接之前,可以自己通过mock数据的方式进行自测。如果后端已经产生接口,这时,代码中以相对路径发出的所有异步请求,就不能发送至本地服务器,而要通过代理进行转发。
实践  以dora为例,项目地址https://github.com/dora-js/dora。这是一个轻量的开发测试服务器。其配置文件为proxy.config.js,一般位于项目的根目录下,通过如下配置可达到效果。
12345678不使用mock数据的情况下,通过dora-proxy-plugin代理进行跨域请求转发工程运行在当前服务器(端口8989),所有API请求跨域转发至当前服务器(默认端口80)module.exports ...阅读全文

HTTP协议的持久连接-"keep-alive"与"persistent" | GCidea's blog

作者:JerryXia | 发表于 , 阅读 (23)
目录1. 前言2. “keep-alive”2.1. 概述2.2. 优点2.3. 主要参数3. “persistent”
前言
“keep-alive”概述  HTTP协议采用“请求-应答”模式,当使用普通模式,即非KeepAlive模式时,每个请求/应答客户和服务器都要新建一个连接,完成之后立即断开连接(HTTP协议为无连接的协议);当使用Keep-Alive模式(又称持久连接、连接重用)时,Keep-Alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立或者重新建立连接。
优点  可以看出keep-alive减小了连接的开销,时间有所缩短。
主要参数
“persistent”  “keep-alive”主要用于HTTP1.0及以前的协议,新协议应使用”persistent”(保持对”keep-alive”的支持)。  HTTP1.0中默认是关闭的,需要在http头加入”Connection:Keep-Alive”,才能启用Keep-Alive;HTTP1.1中默认启用Keep-Alive,如果加入”Connectio...阅读全文