你的网页在手机上显示效果可以在电脑上一样好看。完成这个任务的奥秘被称为响应式设计,媒体查询(media query)是实现网页响应的关键。

在电脑上一个例子:

<div class="row">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>

css样式:

.row{
width:100%;
}
.span{
width:300px;
float:left;
margin-left:30px;
}

这个在电脑上显示,是正常的,在一定设备上布局并不是我们期望的。

Media query

在css外部设置应用相应样式的条件。有一些特征可以用来决定是否应用哪些样式。下面这些是其中重要的部分:

. width

. height

. device width

. device height

. resolution

. orientation

. aspect ratio

通过设备宽度来决定使用什么样式。下面相应的规则。

@media(max-width:500px)

如果规定屏幕宽度小于500px 的时候使用css样式。这个样式条件为true,才会引用。

有三种不同方式来应用这个条件规则:

1、<link> tag

如下 :<lin rel ="stylesheel" type="text/css" media="screen and(max-width:500px)" href="test.css">

2、media condition

一块css代码可以用花括号包围起来,css定义只有当media query 满足下面条件的时候才有效:

       @media screen and(max-width:500px){

            .row{

                     width:100%;

              }

         .span{

        width:auto;
       float:left;
        margin:;
      }
}

3、import condition

一个引用只有在media query 条件满足的时候才回将外部css导入。在外部文件里定义的css样式只有条件被满足的时候才会有效。

@import url("test.css") screen and(max-width:500px);

我们可以使用media query 来改变页面的布局,但是使用它们做类似条件css定义也是可以的。我们经常通过改变字体大小、图片质量、空白等其他元素

来更好的适应不同类型的设备。

使用media query 来实现响应式设计的更多相关文章

  1. 响应式设计的思考:媒体查询(media query)

    Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...

  2. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  3. 第一章 响应式设计之Media Quer

    书里谈到尽量不要使用Media Queriy. 但是过多使用media query,会导致CSS变得脆弱和页面难以维护.一些方法可以减少页面使用 media query. 响应式设计: (1) 使用百 ...

  4. 前端响应式设计中@media等的相关运用

    现在做前端响应式网站特别,响应式成为现在前端设计一个热点,它成为热点的最主要的原因就是,移动端设备屏幕的种类多样,那么如何设置响应式屏幕. /*打印样式*/ @mediaprint{color:red ...

  5. paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54

    paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54 #-----响应式 设计框架 Bootstrap比较热门. Foundation 号称是世界上最先进的响应式前端框架. #---绝 ...

  6. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  7. 超棒的响应式设计测试书签和工具(bookmarks)(转)

    一.测试书签(bookmarks) Viewport Resizer 这个书签号称拥有158个国家3万多活跃的用户,主要特性: 完全自定制 方便的添加自定义尺寸 手动的横竖屏切换 自动的横竖屏切换 ( ...

  8. 响应式设计:理解设备像素,CSS像素和屏幕分辨率

    概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的 ...

  9. CSS3知识点整理(五)----响应式设计及其他属性

    介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...

随机推荐

  1. yii2常用excel操作库

    yii2使用较多的excel操作库 1."phpoffice/phpexcel" https://github.com/PHPOffice/PHPExcel/archive/1.8 ...

  2. 【Arcgis for android】保存地图截图到sd卡

    关键词:arcgis for android ,截图,bitmap,sd卡 参考文章:http://blog.csdn.net/wozaifeiyang0/article/details/767972 ...

  3. SQLServer存储引擎——03.日志

    3. SQLServer存储引擎之日志篇 (3.1)日志结构 (3.1.1)物理日志 (0)物理日志即数据库的.ldf文件, 当然后缀名是可以自定义的,默认是.ldf (1)一个SqlServer数据 ...

  4. 动态变更GridView控件列名

    近段时间,确是很多专案要写,客户的个性化要求也越来越多.举个例子吧,就是从数据库取出来的字段名,在显示在GridView时,需要全部更为另外一个名称.下面的样例,并非是专案的内容,而是Insus.NE ...

  5. myql 服务启动不了怎么办

    今天,不小心手动将mysql 服务停掉后,怎么也启动不了,后面查了半天 ,终于知道要先将任务管理器里的mysql.exe 先Kill掉,然后可以启动了,记录一下

  6. CHUI类

    自定义控件程序运行流程 setNeedsLayOut和setNeedsDisplay区别 masonry使用技巧 1.普通展示 UILabel     UIView     UI控件的位置     U ...

  7. 5、OpenCV Python ROI和泛洪填充

    __author__ = "WSX" import cv2 as cv import numpy as np #泛洪填充 从一个点开始 ,填充周围和他相似的点,直到遇到一个边界 # ...

  8. ios对new Date() 的兼容问题

    移动开发的一个小坑 我们一般这样创建一个日期变量 var d = new Date("2017-08-11 12:00:00"); 但是在ios上却是返回 invalid Date ...

  9. wordpress显示FTP上传

    在开始添加的配置文件里添加以下内容 define("FS_METHOD","direct"); define("FS_CHMOD_DIR", ...

  10. Exadata扩展

    所谓Exadata扩展,也即向现有的Exadata环境中增加新的数据库服务器或存储服务器. 扩展原则 可以依循以下规则扩展Exadata: (1).可以将Exadata从某种固定配置扩展到另一种固定配 ...