今天跟大家介绍的这个网站叫 媒体查询  官网域名：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. 【POJ】1067.取石子游戏

    题解 这道题让我对SG函数有了更深刻的理解,这是道打表找规律题 我们打出来SG函数似乎是 1 2必败 3 5必败 4 7必败 6 10必败 8 13必败 哇我找到规律了-- 然而,我显然不会通项 后来 ...

  2. 三 oracle 用户管理一

    一.创建用户概述:在oracle中要创建一个新的用户使用create user语句,一般是具有dba(数据库管理员)的权限才能使用.create user 用户名 identified by 密码; ...

  3. Elasticsearch环境准备(一)

    一.ELKStack简介 中文指南:https://www.gitbook.com/book/chenryn/elk-stack-guide-cn/details ELK Stack包含:Elasti ...

  4. Python爬虫个人记录（二） 获取fishc 课件下载链接

    参考: Python爬虫个人记录(一)豆瓣250 (2017.9.6更新,通过cookie模拟登陆方法,已成功实现下载文件功能!!) 一.目的分析 获取http://bbs.fishc.com/for ...

  5. PHP编程基础学习（一）——数据类型

    PHP一共支持8种原始类型,其中: 4种标量类型: boolean(布尔型) integer(整型) float/double(浮点型) string(字符串型) 两种复合类型: array(数组) ...

  6. count 【mysql】

    如果你的需要是统计总行数时,为什么要使用count(*),而避免使用指定具体的列名? count()函数里面的参数是列名的的时候,那么会计算这个字段有值项的次数.也就是,该字段没有值的项并不会进入计算 ...

  7. Linux进程管理子系统

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

  8. 【20181103T1】地球发动机【dp优化】

    题面 一眼dp 设\(f_i\)表示前\(i\)个且\(i\)必须选的最大功率 有 \(f _i= max_{1 \leq j < i,A_i - A_j > X_j} \{f_j \}+ ...

  9. 【堆优化Dijkstra】BZOJ4152- [AMPPZ2014]The Captain

    [题目大意] 给定平面上的n个点,定义(x1,y1)到(x2,y2)的费用为min(|x1-x2|,|y1-y2|),求从1号点走到n号点的最小费用. [思路] 按照某维坐标排序,相邻两个点在这一维度 ...

  10. 慎用 new、delete

    C++ STL 为我们提供了一套容器.在多数情况下,这套容器已足够让我们使用.所以,需要我们自己去用 new/new []/delete/delete [] 来管理内存的必要性并不是很大.此外,自己管 ...