媒体查询:

1、媒体查询优点:基于设备的属性检测设备,这样一来就不需要使用浏览器探测脚本,之后允许直接安装设备的功能去设定目标样式表,也就是说检测用户使用小屏幕的设备,css规则就会调整以适应该屏幕的尺寸,从屏幕上去除无关元素,提供更小的图片,让文本变得更加清晰

2、语法

@link元素调用,多种媒体选择中间用逗号隔开

 <link href="" rel="stylesheet" media="logic media and (expression)" >
 <link href="" rel="stylesheet" media="srceen,projection" >

@import指令调用

 @import url("file") logic media and (expression)

@在样式表中或style元素中添加

 @media logic media and (expression){
rules
}

3、媒体特征

@样式

 @media screen (min-width:400px){
h1{
background:
}
}

@设备宽度以及高度

 @media media and (device-width:1024px) {rules}
@media media and (max-device-width:1024px) {rules}
@media media and (min-device-width:1024px) {rules}

@方向

 @media media and (orientation:landscape/portrait){rules}

@高宽比

 @media media and (aspect-ratio:horizontal/vertical){rules}
@media media and (device-aspect-ratio:horizontal/vertical){rules}

@像素比

 @media media and (-webkit-device-pixel-ratio : number){rules}
@media media and (-moz-device-pixel-ratio : number){rules}
@media media and (max--moz-device-pixel-ratio : number){rules}
@media media and (min--moz-device-pixel-ratio : number){rules}

css3 -- 媒体查询的更多相关文章

  1. CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)

    /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...

  2. iPhone的CSS3媒体查询

    iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...

  3. iPhone6的CSS3媒体查询

    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : po ...

  4. CSS3媒体查询使用小结

    首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 <meta name="viewport" content=& ...

  5. CSS3媒体查询

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

  6. CSS3媒体查询总结

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  7. css3 媒体查询的学习。

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  8. Html5 @media + css3 媒体查询

    css3 media媒体查询器用法总结   随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错 ...

  9. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

  10. 关于css3媒体查询和响应式布局

    响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...

随机推荐

  1. 【jquery】字符ascii码转换函数

    js 字符ascii码转换函数 字符转ascii码:用charCodeAt();ascii码砖字符:用fromCharCode(); 看一个小例子 <script> str="A ...

  2. Rsync+lsync实现触发式实时同步

    使用rsync+lsync实现触发式实时同步 服务器信息 centos6.5 主:192.168.5.4 搭建lsync 从:192.168.5.3 搭建rsync 1.1 从服务器设置 # yum ...

  3. 使用rdesktop连接Windows远程桌面

    rdesktop 使用简单,windows也不和装什么服务端,是要把远程桌面共享打开就行了 安装 yum -y install rdesktop 具体使用方法要先打开终端,然后输入以下命令: rdes ...

  4. 更新补丁Bind

    1.查询补丁版本信息 (1) rpm -qa|grep bind (2) dig @localhost version.bind 2.下载安装 BIND最新漏洞和升级解决办法 现在有非常多的公司的都有 ...

  5. js方法类库封装的简易示例

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></s ...

  6. linux初体验

    linux系统和window一样,也是一套独立的操作系统,它只是没有图形化界面而已

  7. mysql 得到重复的记录

    select devicetoken from client_user group by devicetoken having count(devicetoken)>1

  8. java Unicode、ISO-8859-1、GBK、UTF-8编码转换深入浅出

    参考文献:搞懂ASCII, ISO8859-1, ANSI和Unicode Unicode百度文献 ISO-8859-1百度文献 注: 1.utf-8虽然是国际编码,对不同范围的字符使用不同长度的编码 ...

  9. nyoj998(euler)

    题意:题意:给出n和m,求满足条件gcd(x, n)>=m的x的gcd(x, n)的和,其中1<=x<=n,1<= n, m <= 1e9:思路:此题和nyoj1007差 ...

  10. 三、jQuery--Ajax基础--Ajax全接触--JSON

    JSON基本概念 JSON:JavaScript对象表示法(JavaScript Object Notation) JSON是存储和交换文本信息的语法,类似XML.它采用键值对的方式来组织,易于人们阅 ...