使用media来加载css
- 默认的,css被当做渲染时候必须加载的资源.
- 设备类型和设备询问允许我们设置一些css资源编程可选的
- 对于所有的css资源,无论是必须的还是可选的,都会被浏览器加载


上面显示了加载css和不加载css样式的效果,不加载css显示的页面同样被叫做 “Flash of Unstyled Content” (FOUC).
所有,页面的渲染必须需要DOM和CSSOM。
css是渲染所必须的资源,所以越快的获取css资源将优化渲染
CSS “media types”和 “media queries” 允许我们指定css的使用条件:
一个media query包括了设备类型和一个亦或更多的表达式来表明设备的特点。
如果设备满足media query,那么将会暂停阻塞来加载css资源。
<link href="style.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css" rel="stylesheet" media="print">
- 第一个声明表示在任何类型的设备上均会加载css文件
- 第二个声明中all是默认参数,和第一个是等价的。
- 第三个声明表明css文档的加载将根据设备的方向来决定是否加载
- 最后一个旨在打印设备中才会加载
记住,不管media上对css做出了怎样的加载显示,浏览器都是下载了所有css文件的。
使用media来加载css的更多相关文章
- 加载 CSS 时不影响页面渲染
转自:http://www.oschina.net/translate/loading-css-without-blocking-render 本文展示了一种技术,它能通过异步下载样式表,以阻止它们的 ...
- 异步加载CSS
说到加载 CSS 这种事儿不是很简单吗?像这样咯: <link rel="stylesheet" href="cssfile.css"> 这不就完事 ...
- 异步加载css 和 谷歌浏览器各实用小工具介绍
异步加载css资源 加开页面首屏显示速度使我们前端一直在追求的目标,而css资源在这些优化中同样也是不可或缺的. 一个网站可能有一部分css资源是必须的,他需要在页面渲染完之前就被加载完,并和html ...
- JQuery 加载 CSS、JS 文件
JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...
- CI模板加载css和js
1.需求 ci无法加载css和js文件. 2.解决 删除..htaccess文件. 在config目录下配置base_url,并传给页面 $base_url = $this->config-&g ...
- webpack模块加载css文件及图片地址
webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了 ...
- [AngularJS] 使用AngularCSS动态加载CSS
[AngularJS] 使用AngularCSS动态加载CSS 前言 使用AngularAMD动态加载Controller 使用AngularAMD动态加载Service 上列两篇文章里,介绍了如何如 ...
- yii2 如何在页面底部加载css和js
作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...
- 用JavaScript动态加载CSS和JS文件
本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...
随机推荐
- array_map常用技巧
array_map() 函数将用户自定义函数作用到数组中的每个值上,并返回用户自定义函数作用后的带有新值的数组. 简单来说 “array_map” 会对数组中的每一项进行处理,并返回处理后的数据. 定 ...
- QlikView显示所选时间前一年的数据
客户常常提出这种需求,当用户选择某一时间时.图表中显示所选时间之前一年的数据.以下是我的方法.如有不当,请多不吝赐教: 数据准备例如以下所看到的: SalesData: LOAD Num(ID) as ...
- GB28181对接视频流
今天抽空写下以GB28181的方式获取摄像机视频流以备后用,同时也希望能帮助到正着手开发GB28181对接视频的同学,这块的资料实在不多. 今天讲的内容不涉及到平台对接,平台对接下次有时间再讲,平台对 ...
- 使用Caffe完成图像目标检测 和 caffe 全卷积网络
一.[用Python学习Caffe]2. 使用Caffe完成图像目标检测 标签: pythoncaffe深度学习目标检测ssd 2017-06-22 22:08 207人阅读 评论(0) 收藏 举报 ...
- eclipse下Android工程名称的修改方法
eclipse下Android工程名称的修改方法 对于已经建立的工程,如果发现原来的工程名不合适,此时若想彻底更改工程名,需要三个步骤: 1.更改工程名 选中工程名,右键-->Refactor- ...
- gridcontrol复选框功能实现(超具体)
博主这几天就准备离职了,以后不再做.Net开发.因此这应该是我写的最后一篇关于dev控件的博文.既然是最后一篇,那就写的具体一些.画个圆满的省略号...... 本文介绍gridcontrol怎样实现复 ...
- mongodb查看连接数、同步时间、oplog及修改表名的操作
1) mongodb查看连接数: db.serverStatus().connections; 2) mongodb查看同步时间: db.printSlaveReplicationInfo(); % ...
- 【BZOJ2111】[ZJOI2010]Perm 排列计数 组合数
[BZOJ2111][ZJOI2010]Perm 排列计数 Description 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi> ...
- css3-calc用法
css3--calc()使用 css3新增的一个功能,可以计算元素的长度 例如说:一个百分百布局中,分左右两侧,中间需要一个分隔空间,使用padding或者margin则会超出100%,这时候使用ca ...
- 无法启动FTP站点,服务目前停止
在本地搭建了一个FTP服务器(windows搭建FTP服务器实战),再启动的时候提示错误: 错误提示信息: 根据提示可以查出问题原因:FTP服务没有开启 启动服务,再次重启站点服务.一切OK. 亲测好 ...