width：视口宽度

height：视口高度

device-width：渲染表面的宽度，就是设备屏幕的宽度

device-height：渲染表面的高度，就是设备屏幕的高度

orientation：检查设备处于横向还是纵向

aspect-ratio：基于视口宽度和高度的宽高比，width/height，如16/9,4/3

device-aspect-ratio：渲染表面的宽高比，就是设备屏幕的宽高比

color：每种颜色的位数bits，如：min-color：16位、8位

resolution：检测屏幕或打印机的分辨率，如：min-resolution：300dpi

以上属性都可以添加max-或min-前缀

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媒体查询和响应式布局

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

  6. css3 -- 媒体查询

    媒体查询: 1.媒体查询优点:基于设备的属性检测设备,这样一来就不需要使用浏览器探测脚本,之后允许直接安装设备的功能去设定目标样式表,也就是说检测用户使用小屏幕的设备,css规则就会调整以适应该屏幕的 ...

  7. CSS3媒体查询

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

  8. CSS3媒体查询总结

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

  9. css3 媒体查询的学习。

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

随机推荐

  1. 课程8：《Maven精品教程视频》--视频目录

    2017年3月18日 老师讲的课程 \day01视频\01maven依赖管理.avi; \day01视频\02maven项目构建.avi; \day01视频\03maven程序安装.avi; \day ...

  2. hadoop3.x.x错误解决

    错误信息:there is no HDFS_SECONDARYNAMENODE_USER defined. Aborting operation. 解决方案: (缺少用户定义而造成的)因此编辑启动和关 ...

  3. 20165237 2017-2018-2 《Java程序设计》第十周考试补做及编程题

    20165237 2017-2018-2 <Java程序设计>第十周考试补做及编程题 知识点 1.链表是由若干个称作节点的对象组成的一种数据结构,每个节点含有一个数据和下一个节点的引用 . ...

  4. Nginx系列6：对称加密与非对称加密各自的应用场景

    强推:推荐一篇通俗易懂的对称加密和非对称加密的文章:https://segmentfault.com/a/1190000004461428 推荐一篇文章:对称加密算法与非对称加密算法的优缺点:http ...

  5. Nginx系列4：用GoAccess实现可视化并实时监控access日志

    1.ubuntu16.04安装GoAccess GoAccess下载地址:https://goaccess.io/download 安装步骤: $ wget https://tar.goaccess. ...

  6. SpringSecurity实现短信登录功能

    ⒈封装短信验证码类 package cn.coreqi.security.validate; import java.time.LocalDateTime; public class Validate ...

  7. EF Codefirst入门之创建数据库

    实验环境是VS 2015.MSSQL Server 2008.windows 10 一.创建项目 通过VS创建一个MVC5项目EntityFrameworkExtension 二.安装Entity F ...

  8. 《转》return *this和 return this有什么区别？

    别跟我说 return *this 表示返回当前对象,return this 表示返回当前对象的地址(指向当前对象的指针). 正确答案为:return *this 返回的是当前对象的克隆或者本身(若返 ...

  9. 使用OneNote2016发送博客

    本人使用的是博客园的博客,其他的博客设置应该大同小异,OneNote使用的是2016版本,系统为Win10家庭中文版. 传统的在web端编辑发布博客的方式是在是心累,图文编辑麻烦,不便于存储,编辑的时 ...

  10. SpriteKit 学习体会贴（不断完善中）

    1. 关于 SKShapeNode 刚接触SpriteKit时,看到这个类,以为它会比SKSpriteNode更为轻量级,但其实不是: Shape nodes are useful for conte ...