利用媒体查询 link不同的CSS文件:
<link rel="stylesheet" media="screen and (min-width:1px) and (max-width:500px)" href="/css/d1.css" />
<link rel="stylesheet" media="screen and (min-width:500px)" href="/css/d2.css" />
 meta标签:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" /> meta是html语言head区的一个辅助性标签。
meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等。
meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性。
1、name属性 A、Keywords(关键字)  说明:keywords用来告诉搜索引擎你网页的关键字是什么。 举例:<metaname="keywords"content="信息参数"> B、description(网站内容描述) 说明:description用来告诉搜索引擎你的网站主要内容。 举例:<metaname="description"content="信息参数"> C、robots(机器人向导) 说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。 content的参数有all,none,index,noindex,follow,nofollow。默认是all。 举例:<metaname="robots"content="none"> D、author(作者) 说明:标注网页的作者 举例:<metaname="author"content="root,root@xxxx.com"> 2、http-equiv属性
使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。

A、Expires(期限) 

说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。 

用法:<metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 

注意:必须使用GMT的时间格式。 

B、Pragma(cache模式) 

说明:禁止浏览器从本地计算机的缓存中访问页面内容。 

用法:<metahttp-equiv="Pragma"content="no-cache"> 

注意:这样设定,访问者将无法脱机浏览。 

C、Refresh(刷新) 

说明:自动刷新并指向新页面。 

用法:<metahttp-equiv="Refresh"content="2;URL=http://www.jb51.net">(注意后面的引号,分别在秒数的前面和网址的后面) 

注意:其中的2是指停留2秒钟后自动刷新到URL网址。 

D、Set-Cookie(cookie设定) 

说明:如果网页过期,那么存盘的cookie将被删除。 

用法:<metahttp-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/"> 

注意:必须使用GMT的时间格式。 

E、Window-target(显示窗口的设定) 

说明:强制页面在当前窗口以独立页面显示。 

用法:<metahttp-equiv="Window-target"content="_top"> 

注意:用来防止别人在框架里调用自己的页面。 

F、content-Type(显示字符集的设定) 

说明:设定页面使用的字符集。 

用法:<metahttp-equiv="content-Type"content="text/html;charset=gb2312"> 

G、content-Language(显示语言的设定) 

用法:<metahttp-equiv="Content-Language"content="信息参数"/> 

H、Cache-Control指定请求和响应遵循的缓存机制

在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。
请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached,
响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。
 

meta标签、利用媒体查询 link不同的CSS文件的更多相关文章

  1. 移动端常用的meta标签,媒体查询以及一些样式设置《转载收藏》

    <meta name="screen-orientation" content="portrait"> <meta name="fu ...

  2. 兼容html5新标签及媒体查询引入插件

    <!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的,如果不用可移除 --> <!--[if lt IE 9]> <script src="htt ...

  3. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

  4. 移动设备上的媒体查询 CSS media queries for mobile device

    CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...

  5. 详解css媒体查询

    简介 媒体查询(Media Queries)早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的. 简单的来讲媒体查询是一种用于修饰css何时起作用的 ...

  6. 简单使用媒体查询@media

    @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 那媒体查询该如何使用呢? 一.铺垫 1.首先我们在使用 @media 的时候需要 ...

  7. 轻轻松松学CSS:媒体查询

    轻轻松松学CSS:利用媒体查询创建响应式布局 媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用 下面实例在屏幕可视窗口尺寸大 ...

  8. 初识CSS3之媒体查询(2015年05月31日)

    一.什么是媒体查询 媒体查询是面向不同设备提供不同样式的一种实现方式,它可以为每种类型的用户提供最佳的体验,也是响应式设计的实现方式. 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各 ...

  9. 媒体查询的应用以及在css3中的变革

    CSS一直都支持设置与媒体相关联的样式表.它们可以适应不同媒体类型的显示.例如,文档在屏幕显示时使用sans-serif字体,在打印时则使用serif字体.screen和print是两种预定义的媒体类 ...

随机推荐

  1. 关于Spring Cloud Feign的一些记录!

    学习Spring Cloud Feign过程中,相关资料都会反复强调:微服务调用的话(@FeignClient)  客户端方法的返回值和服务端方法的返回值还有方法名之类的都是要求一致的! 关于方法名是 ...

  2. 用this 对方法的扩展

    *都是静态方法 this指向的是调用的object*

  3. rpm包安装过程中依赖问题“libc.so.6 is needed by XXX”解决方法-转

    原文:http://raksmart.idcspy.com/781 在CentOS上的Canon LBP2900安装打印机驱动,中间遇到了一些问题,主要是安装rpm包出现的依赖问题,现在解决了,现在简 ...

  4. PKU--1976 A Mini Locomotive (01背包)

    题目http://poj.org/problem?id=1976 分析:给n个数,求连续3段和的最大值. 这个题目的思考方式很像背包问题. dp[i][j]表示前i个数字,放在j段的最大值. 如果选了 ...

  5. css3 做border = 0.5px的细线

    参考: https://blog.csdn.net/Tyro_java/article/details/52013531

  6. 详解 equals() 方法和 hashCode() 方法

    创建实体类时,最好重写超类(Object)的hashCode()和equals()方法 equals()方法: 通过该实现可以看出,Object类的实现采用了区分度最高的算法,即只要两个对象不是同一个 ...

  7. 跟我一起学习webpack使用配置文件(二)

    接着跟我一起学习webpack(一)中的项目来,我们接下来使用配置文件 使用npx webpack -h 我们可以查看webpack的配置参数 从我们在package.json中添加的命令来看,当项目 ...

  8. 基于 Kubernetes 实践弹性的 CI/CD 系统

    大家好,我是来自阿里云容器服务团队的华相.首先简单解释一下何为 Kubernetes 来帮助大家理解.Kuberentes 是一个生产可用的容器编排系统.Kuberentes 一方面在集群中把所有 N ...

  9. Tuxera ntfs软件如何删除干净

    sudo /Library/Filesystems/fusefs_txantfs.fs/Contents/Resources/Support/uninstall-package.sh

  10. 说说前端开发中的SEO

    SEO(Search Engine Optimization),就是传说中的搜索引擎优化,是指为了增加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为.我认为这是一门说来简单,但操 ...