今天跟大家介绍的这个网站叫 媒体查询  官网域名：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. RabbitMQ系列之RabbitMQ单机安装

    安装epel源 rpm -ivh http://download.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm #ht ...

  2. htm5本地存储方案——indexdb的封装

    不BB直接上代码 /*封装IndexdDB*/ var localDatabase = { }; localDatabase.dbName = "yiliDB"; localDat ...

  3. Python学习之字符串格式化

    Table 3.1. 字符串格式化代码 格式 描述 %% 百分号标记% %c 字符及其ASCII码 %s 字符串 %d 有符号整数(十进制) %u 无符号整数(十进制) %o 无符号整数(八进制) % ...

  4. Python爬虫个人记录（三）爬取妹子图

    这此教程可能会比较简洁,具体细节可参考我的第一篇教程: Python爬虫个人记录(一)豆瓣250 Python爬虫个人记录(二)fishc爬虫 一.目的分析 获取煎蛋妹子图并下载 http://jan ...

  5. vue 组件使用中的细节点

    1.is属性 有些 HTML 元素,诸如 <ul>.<ol>.<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的.而有些元 ...

  6. linux安装及配置c++的opencv库

    linux安装及配置c++的opencv库 前言: 最近想搞个机器视觉的比赛,要求是linux+opencv环境,没有做过opencv开发的我配置环境就配了两天,看来很多乱七八糟的博客,终于装好了.网 ...

  7. 机器学习之路： python 实践 word2vec 词向量技术

    git: https://github.com/linyi0604/MachineLearning 词向量技术 Word2Vec 每个连续词汇片段都会对后面有一定制约 称为上下文context 找到句 ...

  8. css平移动画的实现

    参考这位大佬的帖子:https://www.jianshu.com/p/5d8e77ef7f84

  9. 【对比分析二】Web Storage和cookie的区别

    1)  存储空间不同. a)  Web Storage能提供5MB的存储空间(不同浏览器的提供的空间不同).Cookie仅4KB. b)  Web Storage每个域(包括子域)有独立的存储空间,各 ...

  10. Codeforces Round #196 (Div. 2) A. Puzzles 水题

    A. Puzzles Time Limit: 2 Sec  Memory Limit: 60 MB 题目连接 http://acm.zju.edu.cn/onlinejudge/showProblem ...