响应式web设计之CSS3 Media Queries

时间：2021-07-15 02:51:51

一：设置视口  (view [vju:] 看; ==看待  port [pɔ:t] 接口)==视口

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

二：Media Query(媒体查询)
@media媒体类型and（媒体特性）{ /*CSS样式*/ }    媒体类型：screen,print...      媒体特性：max-width,max-height...
1：HTML标签加载：

<link rel="stylesheet" type="text/css"　media="screen and (max-device-width: 400px)" href="tinyScreen.css" />   //如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />   //如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件.

2:在现有CSS文件中加载。

@import  url("tinyScreen.css") screen and (max-device-width: 400px);  //如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

3：内部直接使用CSS书写方式： @当+media媒体+screen [skri:n] 屏幕、屏风...；

<style type="text/css"> @media screen and (max-width:320px){ /*css*/ }  </style>
<style type="text/css"> @media only screen and (min-width:321px) and (max-width:640px){ /*css*/ }</style>

要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。

三：补充：media query中的not only all等关键字

今天在群里一群友问起 @media only screen and (min-width: 320px) 中only是什么意思，查了些资料。

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）、

only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

all: 所有设备，这个应该经常看到

还有其它一些：

media_type

设备类型说明

all

所有设备

aural

听觉设备

braille

点字触觉设备

handled

便携设备，如手机、平板电脑

print

打印预览图等

projection

投影设备

screen

显示器、笔记本、移动端等设备

tty

如打字机或终端等设备

tv

电视机等设备类型

embossed

盲文打印机

相关资料扩展：http://book.51cto.com/art/201204/328362.htm

　　　　　　  http://www.w3cplus.com/content/css3-media-queries

　　　　　　  http://www.w3.org/TR/CSS2/media.html#media-types

----------------------------------华丽的分割线-----------------------------------------------------------

以下是demo

一个三栏布局的，在不同的尺寸下，变为两栏，再变为一栏~

响应式web设计之CSS3 Media Queries

代码：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>css3-media-queries-demo</title>

<style>

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {

    padding: 0;

    margin: 0;

}

.content{

    zoom:1;

}

.content:after{

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

}

.leftBox, .rightBox{

    float: left;

    width: 20%;

    height: 500px;

    margin: 5px;

    background: #ffccf7;

    display: inline;

    -webkit-transition: width 1s ease;

    -moz-transition: width 1s ease;

    -o-transition: width 1s ease;

    -ms-transition: width 2s ease;

    transition: width 1s ease;

}

.middleBox{

    float: left;

    width: 50%;

    height: 800px;

    margin: 5px;

    background: #b1fffc;

    display: inline;

    -webkit-transition: width 1s ease;

    -moz-transition: width 1s ease;

    -o-transition: width 1s ease;

    -ms-transition: width 1s ease;

    transition: width 1s ease;

}

.rightBox{

    background: #fffab1;

}

@media only screen and (min-width: 1024px){

    .content{

            width: 1000px;

            margin: auto

        }

}

@media only screen and (min-width: 400px) and (max-width: 1024px){

    .rightBox{

        width: 0;

    }

    .leftBox{ width: 30%}

    .middleBox{ width: 65%}

}

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

    .leftBox, .rightBox, .middleBox{

        width: 98%;

        height: 200px;

    }

}

</style>

</head>

<body>

<div class="content">

  <div class="leftBox"></div>

  <div class="middleBox"></div>

  <div class="rightBox"></div>

</div>

</body>

</html>

参考文章：http://www.swordair.com/blog/2010/08/431/

　　　　　http://www.zhangxinxu.com/wordpress/2011/08/css3-media-queries%E7%9A%84%E4%BA%9B%E9%87%8E%E5%8F%B2%E5%A4%96%E4%BC%A0/

　　　　　http://webdesignerwall.com/tutorials/css3-media-queries

　　　　　http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

原文出处：http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html

响应式web设计之CSS3 Media Queries的更多相关文章

  1. &lbrack;转&rsqb;响应式web设计之CSS3 Media Queries

    开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  2. CSS3 响应式web设计，CSS3 Media Queries

    两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件: <link rel="stylesheet" type="text/css" ...

  3. 响应式---web设计之CSS3 Media Queries

    一:设置视口  (view [vju:] 看; ==看待  port [pɔ:t] 接口)==视口 <meta name="viewport" content="w ...

  4. CSS响应式web设计

    参考 1. 响应式web设计之CSS3 Media Queries http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html 2. 用 ...

  5. HTML5、CSS3与响应式Web设计入门&lpar;1&rpar;

    HTML5与CSS3已经当仁不让的成为了这两年Web界最火爆的词,他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发,然 后一直占据着所有Web开发者的视野.HTML5本身就是一个很 ...

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

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

  7. HTML5、CSS3与响应式Web设计入门&lpar;2&rpar;

    HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...

  8. &lt&semi;HTML5和CSS3响应式WEB设计指南&gt&semi;译者序

    "不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

  9. 【01】《响应式Web设计：HTML5和CSS3实战》

    [01]   (魔芋:已看完.) [01]<响应式Web设计:HTML5和CSS3实战>(全).pdf 共246页.   2013年1月出版.   读后感:适合入门的书籍,对于响应式布局, ...

随机推荐

  1. &lbrack;转&rsqb; Windows下编译OpenSSL

    简述 OpenSSL是一个开源的第三方库,它实现了SSL(Secure SocketLayer)和TLS(Transport Layer Security)协议,被广泛企业应用所采用.对于一般的开发人 ...

  2. Spring与Quartz的整合实现定时任务调度&lpar;转&rpar;

    源:http://kevin19900306.iteye.com/blog/1397744 最近在研究Spring中的定时任务功能,最好的办法当然是使用Quartz来实现.对于一个新手来说,花了我不少 ...

  3. java 集合框架图

    Java平台提供了一个全新的集合框架.“集合框架”主要由一组用来操作对象的接口组成.不同接口描述一组不同数据类型. Java 2集合框架图集合接口:6个接口(短虚线表示),表示不同集合类型,是集合框架 ...

  4. File类与FileInfo类

    File是一个静态类,常用于文件操作,读取,修改文件等等.File类的大部分方法最终都是转换为流(Stream)的操作,只不过是.net提取帮你封装好了这些常用的流.并且会自动清理占用的资源. 例如: ...

  5. 排座椅（seat）

    排座椅(seat) 题目描述 上课的时候总有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主任小雪发现了一些有趣的现象,当同学们的座次确定下来之后,只有有限的D对同学上课 ...

  6. http&colon;&sol;&sol;codeforces&period;com&sol;contest&sol;536&sol;problem&sol;B

    B. Tavas and Malekas time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  7. &lpar;视频&rpar; 《快速创建网站》 3&period;2 WordPress多站点及Azure在线编辑器 － 扔掉你的ftp工具吧，修改代码全部云端搞定

    本文是<快速创建网站>系列的第6篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 1. 网站管理平台WordPress和云计算平台Azure简介 (6分 ...

  8. postgrepsql 创建函数

    -- 这里的CREATE OR REPLACE FUNCTION 为固定写法:   "public"."function_info_a1" 这个为函数名   C ...

  9. sql-server安装

    ubuntu安装sql-server https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-ubuntu?view ...

  10. 找不到命令 ifconfig

    centos 7中自带的查看网络的命令是: ip addr 如果还是想要 ifconfig 安装net-tools yum install net-tools

相关文章