C3媒体查询的俩种常用方式
2016-03-23 20:00
253 查看
媒体类型做为CSS常用的属性在应对不同设备屏幕上面起着非常重要的作用,其中最常用的俩种方式如下:
1.link方法
link方法引入媒体类型其实就是在<link>标签引用样式的时候,通过link标签中的media属性来指定不同的媒体类型,这种方式跟着引用的样式文件走,代码如下
2.@media方法
@media 是CSS3中新引进的一个特性,称为媒体查询,在页面中也可以通过这个属性来引入媒体类型,在css文件中引用媒体类型的代码如下
补充内容:媒体特性(Media Query)
媒体特性(Media Query)是CSS3对媒体类型(Media type)的增强版,相当于"Media type(判断条件)+CSS样式(符合条件的样式规则)",简单实例
上面代码表示当媒体为电脑屏幕或者媒体类型小于或等于600px时样式生效
1.link方法
link方法引入媒体类型其实就是在<link>标签引用样式的时候,通过link标签中的media属性来指定不同的媒体类型,这种方式跟着引用的样式文件走,代码如下
<link rel = "stylesheet" type= "text/css" href="style.css" media="screen"/> <link rel = "stylesheet" type= "text/css" href="print.css" media="print"/>
2.@media方法
@media 是CSS3中新引进的一个特性,称为媒体查询,在页面中也可以通过这个属性来引入媒体类型,在css文件中引用媒体类型的代码如下
@media screen { 选择器{/*样式代码写在这里*/} }
补充内容:媒体特性(Media Query)
媒体特性(Media Query)是CSS3对媒体类型(Media type)的增强版,相当于"Media type(判断条件)+CSS样式(符合条件的样式规则)",简单实例
1.link方式 <link rel = "stylesheet" media = "screen and (max-width:600px)" href = "small.css"> 2.@media 方式 @media screen and (max-width:600px){ 选择器{/*样式代码*/} }
上面代码表示当媒体为电脑屏幕或者媒体类型小于或等于600px时样式生效
相关文章推荐
- 作业3
- iOS 最新版 CocoaPods 的安装流程
- Unity3D动态字体破碎问题的解决方案
- 301域名跳转
- arm linux启动流程带dts
- 链表实现约瑟夫环
- SiteMesh--decorator(HTML装饰器)
- leetcode 25. Reverse Nodes in k-Group
- 我与CSDN
- Java 堆内存和栈内存
- IOS开发之第三方登陆——友盟
- Java 堆内存和栈内存
- View和viewController的生命周期
- POJ3414 Pots(BFS)
- STL库中的字符串相关的函数
- 多态绑定
- 对偶和KKT条件
- HDU1054 Strategic Game(树形dp)
- 默认虚拟主机设置
- hdu 4497