注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

CSS3 media query  

2014-07-29 18:39:55|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

媒体类型
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备 
projection 打印预览
screen 彩屏设备
speech '听觉'类似的媒体类型
tty 不适用像素的设备
tv  电视

关键字
and
not      not关键字是用来排除某种制定的媒体类型
only     only用来定某种特定的媒体类型

媒体特性
(max-width:600px) 
(max-device-width: 480px)  设备输出宽度
(orientation:portrait)  竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips

样式引入
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
@import url("css/reset.css") screen;
@media screen {
    选择器 {
     属性:属性值;
    }
}

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>

@media screen and (min-width:400px) and (max-width:500px) {
    .box {
      margin: 0 auto;
    }
}
<meta name="viewport" content="" />

width [pixel_value | device-height]
height [pixel_value | device-height]
user-scalable 是否允许缩放 (no||yes)
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例 
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 
  评论这张
 
阅读(462)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017