今天跟大家介绍的这个网站叫 媒体查询  官网域名：http://mediaqueri.es/

该酷站收集了很多响应式设计的案例。全部都是收集的一些励志精美而时尚的网站，使用媒体查询和响应的网页设计。

媒体查询是什么？

媒体查询 是一个W3C候选推荐标准的广泛审查了文件，这是准备实施的浏览器厂商。它是专为不同的媒体类型（即屏幕和打印），CSS2中发现的媒体依赖样式表的延伸。

在本质上，媒体查询由一个媒体类型和表达式来检查特定条件下特定媒体功能。最常用的媒体功能是宽度。

通过一定宽度的设备显示一个网页，CSS规则限制，可以根据页面的表示具有不同屏幕分辨率的设备（如智能手机，平板电脑，上网本和台式机）。

响应性的Web设计是什么？
长期 响应性的Web设计 创造 伊桑马科特 是使用流体网格， 灵活的图像和媒体查询一个网页不同的观看环境中逐步提高的做法 。

你使用的屏幕分辨率，同时截图？该网站有以下几种截图

智能手机
320px【
片剂
768PX
上网本
1024px
桌面
1600px的

酷站欣赏地址：http://mediaqueri.es/

手机网站和PC网站兼容的响应式网页设计的更多相关文章

  1. HTML5+CSS3的响应式网页设计：自动适应屏幕宽度

    这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...

  2. bootstrap响应式网页设计的9条基本原则！

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  3. 响应式网页设计：互联网web产品RWD概念

    RWD(Responsive Web Design)可称为自适应网页设计.响应式网页设计.响应式网页设计等等,是一种可以让网页的内容可以随着不同的装置的宽度来调整画面呈现的技术,让使用者可以不需要透过 ...

  4. FROONT – 超棒的可视化响应式网页设计工具

    FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...

  5. 响应式网页设计（Bootstrap）

    Bootstrap官网 AOS官网 Chrome官方教程 Chrome教程 Bootstrap官网中有许多Bootstrap网站示例,大家可以参考

  6. [转]响应式网页设计:rem、em设置网页字体大小自适应

    本文转自:http://www.cnblogs.com/aimyfly/archive/2013/07/19/3200742.html 「rem」是指根元素(root element,html)的字体 ...

  7. 响应式网页设计:rem、em设置网页字体大小自适应

    「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...

  8. 最佳的 14 个免费的响应式 Web 设计测试工具

    一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...

  9. 响应式Web设计(Responsive Web design)

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

随机推荐

  1. 第六届CCF软件能力认证

    1.数位之和 问题描述 给定一个十进制整数n,输出n的各位数字之和. 输入格式 输入一个整数n. 输出格式 输出一个整数,表示答案. 样例输入 20151220 样例输出 13 样例说明 201512 ...

  2. Spring Boot使用JavaMailSender发送邮件

    http://www.cnblogs.com/wxc-xiaohuang/p/9532631.html https://blog.csdn.net/icannotdebug/article/detai ...

  3. Ionic入门十：icon(图标)

    ionic 也默认提供了许多的图标,大概有500多个.用法也非常的简单: <i class="icon ion-star"></i> 图标列表如下:   ...

  4. qt study2

  5. 【基础知识】ASP.NET[基础一（ashx）]

    一.ASP.NET介绍 1.ASP.NET包括: 一般处理程序(ashx):WebForm ( aspx ):MVC(Model view con~~): 2.ASP.NET的常用文件(重点): 1& ...

  6. iOS Sprite Kit教程之编写程序以及Xcode的介绍

    iOS Sprite Kit教程之编写程序以及Xcode的介绍 Xcode界面介绍 一个Xcode项目由很多的文件组成,例如代码文件.资源文件等.Xcode会帮助开发者对这些文件进行管理.所以,Xco ...

  7. Revit二次开发示例：DeleteDimensions

    在本例中,创建一个命令,实现删除所选中的尺寸标注. #region Namespaces using System; using System.Collections.Generic; using S ...

  8. Linux进程管理子系统

    <进程要素> <进程与程序的区别> 程序: 存放在硬盘上一些列代码和数据的可执行映像,是一个静止的实体 进程: 是一个执行中的程序,是动态的实体 <进程4要素> 1 ...

  9. CSS HTML 常用属性备忘录

    学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...

  10. 【BZOJ 2318】 2318: Spoj4060 game with probability Problem（概率DP）

    2318: Spoj4060 game with probability Problem Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 371  Sol ...