响应式设计是在不同设备下分辨率不同显示的样式就不同。
  media 属性用于为不同的媒体类型规定不同的样式。根绝浏览器的宽度和高度重新渲染页面。
    语法: @media mediatype and | not | only (media feature) {}
    示例:
      <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>
    结果: 分辨率在大到600的时候 显示这个样式表里面的样式。

  媒体类型:

      all 用于所有设备

      print 用于打印机和打印设备      

      screen 用于电脑屏幕,平板电脑,智能手机。

          speech 用于阅读器等发声设备

  关键字:

       and 运算符用于符号两边规则均满足条件则匹配。

      @media screen and (max-width : 600px) {
          /*匹配宽度小于600px的电脑屏幕*/
      }

    not关键字是用来排除某种制度的媒体类型。
      @media not print {
        /*匹配除了打印机以外的所有设备*/
      }
    only 用来定某种特定的媒体类型。
      @media only screen and (min-width:300) and (max-width:500){
        /*这段是只(only)针对彩色屏幕设备*/
    }

  媒体特性: (常用的)    

    max-width(max-height): 最大宽度和最大高度

      @media (max-width: 600px) {
        匹配界面宽度小于600px的设备
      }
    min-width(min-height) : 最小宽度和高度
      @media (min-width : 400px) {
        匹配界面宽度大于400px的设备
      }
    max-device-width(max-device-height) 设备的最大宽度和高度
      @media (max-device-width: 800px) {
        匹配设备(不是界面)宽度小于800px的设备
      }
    min-device-width(min-device-height):  设备的最大宽度和高度
      @media (min-device-width: 600px) {
        匹配设备(不是界面)宽度大于600px的设备
      }
    orientation: portrait 竖屏
      <link rel="stylesheet" media="all and
        (orientation:portrait)"
      href="indexa.css"/>
     结果: 在竖屏下显示这样式
    orientation:landscape 横屏
      <link rel="stylesheet" media="all and
        (orientation:landscape)"
          href="indexa.css"/>
     结果: 在横屏下显示这样式

css3响应式布局设计——回顾的更多相关文章

  1. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  2. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  3. <HTML5和CSS3响应式WEB设计指南>译者序

    "不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

  4. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

  5. WinForm响应式布局设计实践

    引言 创建响应式WinForm应用程序并不那么简单. 响应式布局,在此我指的是应用程序在不同屏幕分辨率下的可用性. 对于WinForm应用程序,我们需要明确地根据分辨率来调整控件的大小和重新定位. 虽 ...

  6. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

  7. css3响应式布局

    响应式布局 分栏布局,-webkit-column-width(定义每栏的宽度,会根据每栏宽度自动分成若干栏) <style> .wrap {width: 900px; border: 1 ...

  8. CSS3 响应式布局: @media (min/max-width:***) @font-face

    响应式布局 responsive design @media 属性 bootstrap  css 分析: @media (min-width:768px){ body{***} } use @medi ...

  9. css3 响应式布局 Media Query

    1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...

随机推荐

  1. Java集合一

    java的集合类主要由两个接口派生而出:Collection && Map 这两个接口是集合框架的根接口 Collection----直接派生:Set(无序集合,元素不可重复) Lis ...

  2. SQLServer 2016 Express 安装部署,并配置支持远程连接

    在项目中需要用到SQLServer,于是安装部署了SQLServer,部署的过程中遇到了一下问题,记录一下以便之后遇到同样问题能快速解决. 一.安装包下载 首先下载必要的安装包: 1.SQLServe ...

  3. ActiveReport报表更改连接字符串及参数

    PageReport pr = new PageReport (new FileInfo("报表路径")); //报表路径如../Order/OrderSale.rdlx if(p ...

  4. OpenLayers 3 给features 添加手势

    map.on('pointermove',function(e){ var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasF ...

  5. JavaScirpt(JS)——DOM文档对象模型

    一.HTML DOM介绍 HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HT ...

  6. CSS的两种格式化上下文:BFC和IFC

    CSS的两种格式化上下文   文章包含很多个人理解,如果错误,欢迎指出~   在看本文之前,你要对CSS的盒子模型,Block-Level元素,Inline-Level元素有所了解,具体可参考CSS的 ...

  7. MongoDB(online) 优化

    MongoDB(online) 优化 1. find.findOne 2. 操作 vip_emp_relation 的一个公共方法 3. 查询记录数 4. save.insert 5. 总结 1. f ...

  8. 关于 C# 中接口的一些小结

    < 关于 C# 中“接口”的一些小结 > 对于 C# 这样的不支持多重继承的语言,很好的体现的层次性,但是有些时候多重继承的确有一些用武之地.   比如,在 Stream 类 . 图形设备 ...

  9. AS打包出现app:transformClassesAndResourcesWithProguardForRelease错误

    今天打包项目的正式签名APK出现以下错误,当时挺着急用的实在没办法就只能用测试apk凑合来对付一下了 Error:Execution failed for task ':app:transformCl ...

  10. linux命令有用

    uptime 命令用来输出系统任务队列信息 last 列出目前与过去登入系统的用户相关信息 free 用来显示系统内存状态 ps 相應的選項組合為ps -ef.ps aux,可以通過這些組合準確定位系 ...