利用媒体查询 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. 【牛客挑战赛31D】 雷的打字机

    题目 首先看到这个出现长度至少为\(2\)的回文子串 这就等价于不能出现两个连续且相同的字符 于是我们用概率生成函数来搞 设\(g_i\)表示\(i\)次操作后游戏没有结束的概率,\(f_{i,j}\ ...

  2. drools跳转出现错误问题(400)

    400 Sorry, a technical error occurred. Please contact a system administrator. 今天drools的管理平台tomcat部署完 ...

  3. 网络结构解读之inception系列一:Network in Network

    网络结构解读之inception系列一:Network in Network   网上有很多的网络结构解读,之前也是看他人博客的介绍,但当自己看论文的时候,发现存在很多的细节和动机解读,而这部分能加深 ...

  4. ssh 免密码登入

    1.普通免密码登入 (1)  生成秘钥 [root@vick ~]# ssh-keygen -t rsa Generating public/private rsa key pair. Enter f ...

  5. 第三方博客同步xmlrpc、rest、API等相关的文章网址记录

    http://answers.microsoft.com/en-us/windowslive/forum/writer-wlsettings/i-am-encountering-a-problem-s ...

  6. Http请求中的Content-Type

    转载至:https://segmentfault.com/a/1190000013056786?utm_source=tag-newest 一 前言 ----现在搞前端的不学好http有关的知识已经不 ...

  7. C# 无边框窗体移动和改变大小的实现

    自己给软件做的皮肤,将窗体设为无边框后,想要其具有正常窗体的移动和改变大小功能,以下代 码可以实现.... //需添加using System.Runtime.InteropServices; [Dl ...

  8. http协议与servletl理解

    协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超文本传输协议(HTTP)是一种通信协议,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器     s ...

  9. 2019-8-31-C++-驱动开发-error-LNK2019-unresolved-external-symbol-__CheckForDebuggerJustMyCode-referenced-...

    title author date CreateTime categories C++ 驱动开发 error LNK2019 unresolved external symbol __CheckFor ...

  10. python利用paramiko执行服务器命令

    话不多说直接上代码 封装连接 @staticmethod def connect(ip, server_user, server_port, server_path): ""&qu ...