文档章节

响应式web设计之 Media Queries

goGit
 goGit
发布于 2014/06/10 20:53
字数 1033
阅读 11
收藏 0
点赞 0
评论 0

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

那么,Media Queries是如何工作的?

两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件:

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

意思是当屏幕的宽度大于等于400px的时候,应用styleA.css

在media属性里:

  • screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型

  • and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)

  • (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。完整的特性参看 相关的Media features部分

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时,应用styleB.css

其它属性可看这里:http://www.swordair.com/blog/2010/08/431/

另一种方式,即是直接写在<style>标签里:

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
  .class {
    background: #ccc;
  }}

写法是前面加@media ,其它跟link里的media属性相同

其实基本上就是样式覆盖~,判断设备,然后引用不同的样式文件覆盖。

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

 

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

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

盲文打印机

以下是demo

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

代码:

复制代码

<!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





本文转载自:

共有 人打赏支持
goGit
粉丝 1
博文 3
码字总数 296
作品 0
武汉
程序员
18 个详细的响应式 Web 设计教程

在这篇文章中,我想跟你分享 18 个很有用的响应式 Web 设计的教程,这些教程可以帮助你学习响应式设计,包括瀑布流表格、图片和 media queries。 创建移动优先的响应式设计 使用 Sass 和 Co...

小编辑 ⋅ 2013/06/18 ⋅ 5

响应式Web设计(三):响应式Web设计的方法

  介绍完响应式Web的背景和概念之后,是时候该介绍具体的实现方法了,其实响应式Web设计的方法很简单,就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。   首先我们一起来看...

幸福2胖纸 ⋅ 2013/05/06 ⋅ 2

用3个步骤实现响应式网页设计

写在前面的话:随着移动设备的逐渐普及和Web技术的发展,跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢?我们可以利用CSS3的Media Query来实现。本文主要介绍了移动...

阿丢丢 ⋅ 2014/01/15 ⋅ 0

什么是响应式Web设计?怎样进行?

说正事儿。准备在近期的几篇里集中翻译学习一下"响应式Web设计"的相关话题,包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文,这些文章篇幅要长的多(甚至要加分页了!),...

山哥 ⋅ 2012/02/28 ⋅ 0

响应式设计三部曲

原文:Responsive Design in 3 Steps 译文:响应式设计的三个步骤 译者:dwqs 现在,响应式Web设计无疑是非常流行的。如果你对响应式设计还不熟悉,可以看看我之前发表过的关于这方面的respo...

dwqs ⋅ 2015/01/04 ⋅ 0

响应式网页设计与应用

响应式Web设计(Responsive Web design),理念是设计和开发应根据屏幕的大小、平台的用户的行为和环境基础上自动调整;他应该有一个灵活的网格和布局,图像和CSS能够智能的组合 使用。比如说用...

沉淀岁月 ⋅ 2013/09/13 ⋅ 2

响应式网页设计1:三步走

响应式网页设计,毫无疑问地变得越来越重要了。如果你还没听说过响应式设计,可以先看看响应式网站。对新手来说,响应式设计听起来可能会有点复杂。 但事实上,它比你想象的简单得多。为了让...

山哥 ⋅ 2012/05/25 ⋅ 0

CSS3 响应式布局 Media Queries 媒体查询学习

css3 响应式布局学习 响应式:就是根据不同设备,或者设备不同分辨率,动态给出对应的样式变化 响应不同的设备 涉及到 css 中的 Media Queries ,这个词组被译为 “媒体查询” Media Queries 用法...

一介布衣 ⋅ 2015/09/23 ⋅ 0

响应式设计的现状与趋势

响应式设计的现状与趋势 从2012年开始到2014年,各大家对Web设计的趋势预测中,都提到响应式设计;2015年网页设计趋势预测中,响应式仍在继续。这个经历了几年依然大热的响应式,在过去的几年...

开元中国2015 ⋅ 2015/07/24 ⋅ 1

响应式web设计之@media screen

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

武文海 ⋅ 2014/09/24 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Kubeflow实战系列:利用TFJob导出分布式TensorFlow模型

介绍 本系列将介绍如何在阿里云容器服务上运行Kubeflow, 本文介绍如何使用TfJob导出分布式模型训练模型。 第一篇:阿里云上使用JupyterHub 第二篇:阿里云上小试TFJob 第三篇:利用TFJob运行...

全部原谅 ⋅ 22分钟前 ⋅ 0

007. 深入JVM学习—老年代

老年代空间的主要目的是用于存储由Eden发送来的对象,一般在经历好几次“Minor GC”还会保存下来的对象,才会被复制到老年代,这样就可以存放更多的对象,同时在老年代中执行GC的次数也相对较...

影狼 ⋅ 23分钟前 ⋅ 0

常见的一些C#开源框架或者开源项目

原:https://blog.csdn.net/qq_27825451/article/details/70666044 Json.NET http://json.codeplex.com/ Json.Net 是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更......

whoisliang ⋅ 24分钟前 ⋅ 0

设计模式基本原理

刚开始接触编程这行的时候看过设计模式,当时感觉学这些模式没有太大的用处,当时也看不太懂。但是随着慢慢接触这一行,经过一段时间的编程以后,再回过头来看设计模式,发现设计模式的确是太...

王子城 ⋅ 27分钟前 ⋅ 0

阿里云全面支持IPv6!一文揽尽4位大咖精彩演讲

摘要: 自从去年11月以来,阿里巴巴高度重视数据中心的网络改造、云产品改造、应用及网络改造等多个维度,经过半年以来的建设,阿里云已经完成了域名解析等关键产品的分析,现在阿里云已经完...

传授知识的天使 ⋅ 38分钟前 ⋅ 0

windows Android sdk 配置

1、下载Android SDK,点击安装,直接默认路径即可! 下载地址:http://developer.android.com/sdk/index.html 2、默认路径安装后,安装完成,开始配置环境变量。 3、打开计算机属性——高级系...

阿豪boy ⋅ 41分钟前 ⋅ 0

bash shell script 简明教程

User <--> bash <--> kernel shell is not kernel or part of kernel various shells: tcsh, csh, bash, ksh find the using shell: echo $SHELL find all the shells: cat /etc/shells what......

mskk ⋅ 43分钟前 ⋅ 0

Service Mesh简史

William Morgan Service Mesh是一个相当新的概念,讲它的“历史”似乎有些勉强。就目前而言,Service Mesh已经在部分企业生产环境中运行了超过18个月,它的源头可以追溯到2010年前后互联网公...

好雨云帮 ⋅ 43分钟前 ⋅ 0

10个免费的服务器监控工具

监控你的WEB服务器或者WEB主机运行是否正常与健康是非常重要的。你要确保用户始终可以打开你的网站并且网速不慢。服务器监控工具允许你收集和分析有关你的Web服务器的数据。 有许多非常好的服...

李朝强 ⋅ 56分钟前 ⋅ 0

压缩工具之zip-tar

zip 支持目录压缩。使用yum安装zip包,使用yum安装unzip包 zip 1.txt.zip 1.txt #将1.txt文件压缩,新生成的压缩文件为1.txt.zip,原文件保留 zip -r 123.zip 123/ #-r对目录操作。将123/目录...

ZHENG-JY ⋅ 56分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部