Rainshadow StudioRainshadow StudioRainshadow StudioRainshadow Studio
  • Home
  • Photography
  • Design
  • Techniques
    • Photography Techniques
    • Design Techniques
  • Others

响应式布局 Media Queries

    Home 设计工作站 设计技巧 响应式布局 Media Queries
    NextPrevious

    响应式布局 Media Queries

    By rainshadow | 设计技巧 | 0 comment | 1 7月, 2013 | 0

    讲到响应式布局,相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计(通过CSS3 Media Query实现响应布局)。

    一、什么是响应式布局?

    响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

    响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

    二、响应式布局有哪些优点和缺点?

    优点:
    1. 面对不同分辨率设备灵活性强
    2. 能够快捷解决多设备显示适应问题
    缺点:
    1. 兼容各种设备工作量大,效率低下
    2. 代码累赘,会出现隐藏无用的元素,加载时间加长
    3. 其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果
    4. 一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

    三、响应式布局该怎么设计?

    我们在上面了解了什么是响应式布局,那在我们的实际项目中应该怎么去设计呢?在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰,现在还要来个不同尺寸设备,我们该怎么淡定下来呢?有需求就会有解决方案,呵呵,说到响应式布局,就不得不提起CSS3中的Media Query(媒介查询),这可是个好东西,易用、强大、快捷……Media Query是制作响应式布局的一个利器,使用这个工具,我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解Media Query。

    1、CSS中的Media Query(媒介查询)是什么?

    通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如:width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。

    2、media query能够获取哪些值?
    • 设备的宽和高device-width,device-heigth显示屏幕/触觉设备。
    • 渲染窗口的宽和高width,heigth显示屏幕/触觉设备。
    • 设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。
    • 画面比例aspect-ratio点阵打印机等。
    • 设备比例device-aspect-ratio-点阵打印机等。
    • 对象颜色或颜色列表color,color-index显示屏幕。
    • 设备的分辨率resolution。
    3、语法结构及用法
    @media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}

    示例一:在link中使用@media:

    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css"/>

    上面使用中only可省略,限定于计算机显示器,第一个条件max-width是指渲染界面最大宽度,第二个条件max-device-width是指设备最大宽度。

    示例二:在样式表中内嵌@media:

    @media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

    在示例二中,设置了电脑显示器分辨率(宽度)大于或等于1024px(并且最大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。

    从上面的例子可以看出,字符间以空格相连,选取条件包含在小括号内,srules为兼容设置的样式表,包含在中括号里面。only(限定某种设备,可省略),and(逻辑与),not(排除某种设备)为逻辑关键字,多种设备用逗号分隔,这一点继承了css基本语法。

    4、可用设备名参数:
    类型 解释
    all 所有设备
    braille 盲文
    embossed 盲文打印
    handheld 手持设备
    print 文档打印或打印预览模式
    projection 项目演示,比如幻灯
    screen 彩色电脑屏幕
    speech 演讲
    tty 固定字母间距的网格的媒体,比如电传打字机
    tv 电视
    5、逻辑关键字:
    关键字 说明
    only 限定某种设备类型
    and 逻辑与,连接设备名与选择条件、选择条件1与选择条件2
    not 排除某种设备
    , 设备列表
    6、可用设备名参数:
    媒体特性 值 可用媒体类型 接受min/max 简介
    width <length> 视觉屏幕/触摸设备 yes 定义输出设备中的页面可见区域宽度(单位一般为px)
    heigth <length> 视觉屏幕/触摸设备 yes 定义输出设备中的页面可见区域高度(单位一般为px)
    device-width <length> 视觉屏幕/触摸设备 yes 定义输出设备的屏幕可见宽度(单位一般为px)
    device-heigth <length> 视觉屏幕/触摸设备 yes 定义输出设备的屏幕可见高度(单位一般为px)
    orientation portrait | landscape 位图介质类型 no 定义’height’是否大于或等于’width’。值portrait代表是,landscape代表否即设,备手持方向:portait为横向,landscape为竖向
    aspect-ratio <ratio> 位图介质类型 yes 定义’width’与’height’的比率,即浏览器的长宽比
    device-aspect-ratio <ratio> 位图介质类型 yes 定义’device-width’与’device-height’的比率,即设备屏幕长宽比。如常见的显示器比率:4/3, 16/9,16/10
    color <integer> 视觉媒体 yes 定义每一组输出设备的彩色原件个数。如果不是彩色设备,则值等于0
    color-index <integer> 视觉媒体 yes 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
    monochrome <integer> 视觉媒体 yes 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
    resolution <resolution> 位图介质类型 yes 定义设备的分辨率。如:96dpi,300dpi,118dpcm
    scan progressive | interlace 电视类 no 定义电视类设备的扫描工序, progressive逐行扫描,interlace隔行扫描
    grid <integer> 栅格设备 no 用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值,1代表是,0代表否

    页面: 1 2

    css ,html

    rainshadow

    More posts by rainshadow

    Related Post

    • 如何将页脚固定在页面底部

      By rainshadow | 0 comment

      作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当Read more

    • CSS优先级

      By rainshadow | 0 comment

      优先级顺序 下列是一份优先级逐级增加的选择器列表: 通用选择器(*) Read more

    • UI设计师不可不知的安卓屏幕知识

      By rainshadow | 0 comment

      1、了解几个概念 (1)分辨率。分辨率就是手机屏幕的像素点数,一般描述Read more

    • CSS中用背景图片做为超链接的方法

      By rainshadow | 0 comment

      a{ display:block; width:100px; heigRead more

    • chrome浏览器解除网页右键屏蔽

      By rainshadow | 0 comment

      新建一个书签,将网址改为以下代码保存。 javascript:(funRead more

    Leave a Comment

    取消回复

    您的电子邮箱地址不会被公开。 必填项已用*标注

    NextPrevious

    标签

    Adobe ai app apple BBC CIVIC code css dreamweaver excel Flash Google Gphone HD html ipad jequery js office ppt Premiere PS PS3 TV UI wordpress 上海 吃吃喝喝 奥运 婚礼 小常识 幽默 手机 报价 摄影 摄影技巧 汽车 流行 电影 电脑 网站 视频 设计 软件 音乐
    Copyright 2017 Rainshadow Studio | All Rights Reserved
    • Home
    • Photography
    • Design
    • Techniques
      • Photography Techniques
      • Design Techniques
    • Others
    Rainshadow Studio