html:<link> 标签中的 media 属性
HTML <link> 标签的 media 属性
定义和用法
media 属性规定被链接文档将显示在什么设备上。
media 属性用于为不同的媒介类型规定不同的样式。
media属性值 (所有浏览器都支持值)
screen
all
语法
<link media="value">
值 | 描述 |
---|---|
screen | 计算机屏幕(默认)。 |
tty | 电传打字机以及类似的使用等宽字符网格的媒介。 |
tv | 电视机类型设备(低分辨率、有限的滚屏能力)。 |
projection | 放映机。 |
handheld | 手持设备(小屏幕、有限带宽)。 |
打印预览模式/打印页面。 | |
braille | 盲人点字法反馈设备。 |
aural | 语音合成器。 |
all | 适用于所有设备。 |
CSS3 @media 查询
CSS 语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
你也可以针对不同的媒体使用不同 stylesheets :
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"> <link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)"> @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
.class {
background: #ccc;
}
}
总结:顺序不能反
@media (max-width: 767px) { ... col-xs-3... } { //<=767的设备 } 手机
@media (min-width: 768px) { ... col-sm-3... } { //>=768的设备 } 平板
@media (min-width: 992px) { ... col-md-3...} { //>=992的设备 } 电脑
@media (min-width: 1200px) { ... col-lg-3...} { //>=1200的设备 } 大显示器
html:<link> 标签中的 media 属性的更多相关文章
- 【131031】rel 属性 -- link标签中的rel属性,定义了文档与链接的关系
此属性通常出现在a,link标签中 属性值 Alternate -- 定义交替出现的链接 Alternate 属性值 -- alternate是LinkTypes的一个值,网页设计者可以通过此值,设计 ...
- 标签中的rel属性的含义
rel与rev属性相同,它们都是属于LinkTypes属性. rel 属性 -- rel属性,描述了当前页面与href所指定文档的关系, rel是relationship(关系)的英文缩写. rev ...
- 标签中的name属性和ID属性的区别
标签中的name属性和ID属性的区别 2018年05月13日 10:17:44 tssit 阅读数:760 编程这么久,细想了一下,发现这个问题还不是很清楚,汗!看了几篇文章,整理了一下,分享下! ...
- meta标签中的http-equiv属性使用介绍(转载)
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...
- <c:out>标签中的escapeXML属性
<c:out>标签中的escapeXML属性 在<c:out>中,escapeXML属性默认为true. 当设置escapeXML的属性为true时,将value中的值以字符串 ...
- spring property标签中的 ref属性和ref 标签有什么不同? 如下:<property name="a" ref="b" />
spring property标签中的 ref属性和ref 标签有什么不同? 如下:<property name="a" ref="b" /> sp ...
- [转]spring property标签中的 ref属性和ref 标签有什么不同
spring property标签中的 ref属性和ref 标签有什么不同? 如下:<property name="a" ref="b" /> sp ...
- 关于meta标签中的http-equiv属性使用介绍
关于meta标签中的http-equiv属性使用介绍 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标 ...
- 【转】meta标签中的http-equiv属性使用介绍
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...
随机推荐
- Gym - 101572E Emptying the Baltic bfs加剪枝
题目传送门 题目大意:给出一幅海洋的描述,0为海平面,负数即有水,在给出的xy坐标的底部安放抽水机,问最多能有多少水.水往低处流,且八个方向都可以. 思路:bfs,记录到每一个节点有效的最低海平面,然 ...
- hdu6440 Dream 2018CCPC网络赛C 费马小定理+构造
题目传送门 题目大意: 给定一个素数p,让你重载加法运算和乘法运算,使(m+n)p=mp+np,并且 存在一个小于p的q,使集合{qk|0<k<p,k∈Z} 等于集合{k|0<k&l ...
- HMAC算法加密
/** * HMAC算法加密 * @param message 待加密信息 * @param key 密钥 * @return */ public static String HmacSHA256(b ...
- django ORM 连表查询2
set() 更新model对象的关联对象 book_obj=models.Book.objects.first() book_obj.authors.set([2,3]) 把book_obj这个对象重 ...
- Nmap工具使用
Nmap是一款网络扫描和主机检测的非常有用的工具. Nmap是不局限于仅仅收集信息和枚举,同时可以用来作为一个漏洞探测器或安全扫描器.它可以适用于winodws,linux,mac等操作系统.Nmap ...
- spring 事务 @EnableTransactionManagement原理
@EnableXXX原理:注解上有个XXXRegistrar,或通过XXXSelector引入XXXRegistrar,XXXRegistrar实现了 ImportBeanDefinitionRegi ...
- 使用media query 来实现响应式设计
你的网页在手机上显示效果可以在电脑上一样好看.完成这个任务的奥秘被称为响应式设计,媒体查询(media query)是实现网页响应的关键. 在电脑上一个例子: <div class=" ...
- android studio NDK配置
向您的项目添加 C 和 C++ 代码 本文内容 下载 NDK 和构建工具 创建支持 C/C++ 的新项目 构建和运行示例应用 向现有项目添加 C/C++ 代码 创建新的原生源文件 创建 CMake 构 ...
- python 实现连接mysql并读一条数据写到csv一条数据
import MySQLdb as mdb import csv with open('my.csv', 'w+', newline='') as csv_file: writer = csv.wri ...
- VUE环境搭建及打包上线
1.vue2.0新手填坑攻略之使用vue-cli搭建vue项目开发环境到项目发布 https://blog.csdn.net/u010020858/article/details/72865101 2 ...