HTML4和css2目前支持为不用的媒体类型设定专有的样式,如,一个页面在屏幕上时使用无衬线字体,而在打印时使用衬线字体。screen和print是两种已定义的媒体类型。媒体查询让样式表有更强的针对性,扩展了媒体类型的功能。

  媒体查询既可以在样式表中使用也可以在link中使用,甚至可以指定应用的样式表。

<!-- 在link中使用媒体查询 -->
<link rel="stylesheet" type="text/css" media="screen and (min-width:800px)" href="style.css"/>
//在css样式表中使用媒体查询
@media screen and (min-width:800px) {
p{
color:#ff00ff;
}
}
//在css样式表中引用其他的样式表
@import url('path/common.css') screen and (min-width:800px);

  screen代表设备是显示屏,and连接的是媒体的特性,如上面的代码表示显示屏的最小宽度是800px,如果设备既是显示屏,显示屏的宽度大于等于800px,那么就加载样式表或应用样式。

响应式web之媒体查询(一)的更多相关文章

  1. (响应式PC端媒体查询)电脑屏幕分辨率尺寸大全

    (响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 时间:2015-08-17 16:50:40      阅读:3961      评论:0      收藏:0      [点我收藏+] 标签:styl ...

  2. html5 响应式布局(媒体查询)

    响应式布局        响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.        响应式布局可以为不同终端的用户 ...

  3. pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

    PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.1 ...

  4. 项目总结一:响应式之CSS3 媒体查询

    1.<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scala ...

  5. 响应式布局之媒体查询 @media

    Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备. 媒体查询有两种玩法, ...

  6. 如何通过CSS3 实现响应式Web设计

    如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...

  7. css014 响应式web设计

    css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...

  8. 响应式Web初级入门

    本文来自我的前端博客,原文地址:http://www.hacke2.cn/about-responsive/ 跨终端时代的到来 当你乘坐各种交通工具(公交.地铁.轻轨.火车)时你会发现,人们都个个低下 ...

  9. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

随机推荐

  1. github教程--廖雪峰的官方网站

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

  2. zookeeper_01:zookeeper概述

    应对场景: 相对于开发在一台计算机上运行的单个程序,如何让一个应用中的多个独立的程序协同工作是一件非常困难的事情.开发这样的应用,很容易让很多开发人员陷入如何使多个程序协同工作的逻辑中,最后导致没有时 ...

  3. Linux中的读函数与块高速缓存

    为了提高Linux块设备读写的效率,Unix会在内存中建立块高速缓存,块高速缓存存储了系统最近读的数据块和刚刚写入的数据块,也就是说IO访问其实是和块高速缓存打交道的(直接IO除外),块高速缓存会适时 ...

  4. 【配置】电信华为HG8245 无线路由器配置 有贴图

          引子:家里的电信无线路由器连接之后无法直接上上网,只能再次通过PPPoe方式拨号上网.经过网上查询和一番折腾之后,整理攻略如下. 1. 用超级用户登录192.168.1.1(默认密码) 用 ...

  5. QP在STM32F10X上第一个应用

        两天没有写博客了,这两天主要还是在考虑软件的结构性问题,用不用QP?用不用ST库函数?看了ucos,freertos,tinyos以及Contiki,库函数的问题看了使用库的软件结构,直接操作 ...

  6. PIMPL设计模式的理解和使用

    以下两段不同程序的比较 //file a.h #include "a.h" #include “ b.h” class A{ void Fun(); B  b; } //file: ...

  7. (续)顺序表之单循环链表(C语言实现)

    单循环链表和单链表的唯一区别在于单循环链表的最后一个节点的指针域指向第一个节点, 使得整个链表形成一个环. C实现代码如下: #include<stdio.h> typedef struc ...

  8. poj 3753 Training little cats_矩阵快速幂

    题意: 通过各种操作进行,给第i只猫花生,第i只猫吃光花生,第i只猫和第j只猫互换花生,问n次循环操作后结果是什么 很明显是构建个矩阵,然后矩阵相乘就好了 #include <iostream& ...

  9. Dollar Dayz(大数母函数,高低位存取)

    Dollar Dayz Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5655   Accepted: 2125 Descr ...

  10. Android 4.4 Kitkat 使能 USB adb 功能

    背景 在 Linux-3.8 以后,Android 的内核分支,便去掉了 f_adb,改使用 USB function FS,在用户空间实现 USB adb 功能.这篇文章依据原作者的 Google+ ...