如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来,们将了解一下怎样通过html5css3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式web设计方案。
我们需要在页面中调用css3-mediaqueries.js文件,来帮助IE8或是之前的版本支持CSS3 media queries:

 <!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

接下来,我们要创建css样式表,并在页面中调用:

<link href="media-queries.css" rel="stylesheet" type="text/css">

弹性图片

img {max-width:100%;height:auto;width:auto9; /* ie8 */}

弹性内嵌元素(视频)

.video embed,.video object,.video iframe {width: 100%;height: auto;}

字号自动调整的问题(通过-webkit-text-size-adjust:none禁用iPhone中Safari的字号自动调整)

html{-webkit-text-size-adjust:none;}

页面宽度缩放的问题

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

让IE支持CSS3 Media Query实现响应式Web设计的更多相关文章

  1. HTML5、CSS3与响应式Web设计入门(2)

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

  2. HTML5、CSS3与响应式Web设计入门(1)

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

  3. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  4. [转]响应式web设计之CSS3 Media Queries

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

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

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

  6. <HTML5和CSS3响应式WEB设计指南>译者序

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

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

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

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

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

  9. 响应式WEB设计

    近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...

随机推荐

  1. uva 10026 Problem C: Edit Step Ladders

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  2. ural 1494 Monobilliards

    #include <cstdio> #include <cstring> #include <algorithm> using namespace std; ],b ...

  3. Altium Designer 14(或者其他版本)里更改PCB板(图纸)大小

    1.在PCB板界面下方有一行不同颜色的图层选项,找到“Keep-Out Layer”,没看见的话点击右箭头即可找到.   2.在“Place”选项里面选择“line”,也就是添加线,把你所有元件用线条 ...

  4. qt编写一个只能运行单个实例的程序,不用Windows API

    QtSingleApplicationhttp://code.qt.io/cgit/qt-solutions/qt-solutions.git/tree/qtsingleapplication 已打开 ...

  5. 使用ant自动编译安卓项目并签名

     准备阶段: 1.下载ant,jdk,android sdk        ant下载地址:ant.apache.org/bindownload.cgi 2. 设置环境变量      ANT_HO ...

  6. 理解i-node

    原文链接:http://www.ruanyifeng.com/blog/2011/12/inode.html 感觉讲得挺好,便做个记录.

  7. httpd与tomcat基于mod_jk整合

    搞定在前面述, httpd与tomcat整合方式 当前已知的有 ajp_proxy,mod_jk.so jk connecteor连接器下载地址 http://archive.apache.org/d ...

  8. 关于LOAD DATA INFILE 命令的使用问题解决

    通过LOAD DATA方式将数据导入数据表中 LOAD DATA INFILE '输入文件的路径及文件名' INTO TABLE 要导入表的表名称; LOAD DATA INFILE 'G:/p.tx ...

  9. iOS 后台定位被拒注意事项

    iOS 后台定位被拒的原因很简单就是没有达到苹果对后台定位的要求. 本地要求: 1.在plist文件中添加字段 "Privacy - Location Always Usage Descri ...

  10. asp.net 分页类

    PaginatedList.cs using System;using System.Collections.Generic;using System.Linq;using System.Web; n ...