专栏首页柠檬先生css3响应式布局设计——回顾

css3响应式布局设计——回顾

响应式设计是在不同设备下分辨率不同显示的样式就不同。 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"/>      结果: 在横屏下显示这样式

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • python 基础 切片 迭代 列表生成式

    对list 进行切片   如列表     L = ['Adam', 'Lisa', 'Bart', 'Paul']     L[0:3]     ['Adam'...

    用户1197315
  • jquery mobile 移动web(3)

    可折叠功能块。   div 元素的 data-role 属性设置为 collapsible   代码如下:     <div data-role="...

    用户1197315
  • NEC 框架规范 css reset

    /* reset */ html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,h...

    用户1197315
  • 总结CSS3新特性(媒体查询篇)

    总结CSS3新特性(媒体查询篇) CSS3的媒体查询是对CSS2媒体类型的扩展,完善; CSS2的媒体类型仅仅定义了一些设备的关键字,...

    贾顺名
  • 设计模式~简单工厂模式

    从上图可以看出,简单工厂模式涉及到工厂角色、抽象产品角色以及具体产品角色等三个角色:

    Vincent-yuan
  • 设计模式之工厂方法模式

    工厂方法模式(Factory Method Pattern) 隶属于设计模式中的创建型模式,前面的简单工厂模式是工厂方法模式的简化版,因此两者在很多方面都是相似...

    Dylan Liu
  • 工厂方法模式

    概述        工厂方法模式,英文Factory method pattern,工厂方法模式是简单工厂模式的进化版, 看本文之间最好先看一下简单工厂模式。工...

    高爽
  • 常用设计模式——工厂模式

    工厂方法模式定义了一个创建对象的接口,但由子类来决定要实例化的类是哪一个。工厂方法让类把实例化推迟到子类。

    用户5325874
  • db4o 7.4 for .net3.5试用手记

    db4o虽然出来很久了,一直没怎么关注,今天随手试了下,对于小型应用还是不错的,至少省去了ORM的麻烦,一切皆对象,一切都变得那么自然。 下载地址:http:/...

    菩提树下的杨过
  • 基于Kali的Snort配置和入侵检测测试

    snort作为一个开源代码的入侵检测工具,在入侵检测系统开发的过程中有着重要的借鉴意义,其主要有

    FB客服

扫码关注云+社区

领取腾讯云代金券