欢迎来到 爱思资源网！ | /
CSS3 Media Queries 实现网页自适应
接下来会展示如何运用 HTML5 和 CSS3 来设计一个自适应网页。当今银屏分辨率从 320px (iPhone) 到 2560px (大屏显示器) 或者更大。人们也不再仅仅用台式机来浏览网页，现在有手机，平板电脑等等。所以
　现在屏幕分辨率的范围很大，从&320px (iPhone) 到 2560px (大型显示器)，甚至更大。用户也不只是使用台式电脑访问web站点了，他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值，已经不能满足需要了。web设计需要适应这种新要求，页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍，如何使用html5和完成跨浏览器的响应式设计。
　　demo预览地址：
　　demo下载地址：
　　第一次运行
　　在开始之前，我们可以查看&&来查看最终效果。调整你浏览器的大小，我们可以看到页面会根据视窗的大小自动调整布局。
　　更多例子
　　你可以访问下面的地址，查看更多相关例子：&。我设计了如下media queries：&,&,&,&,&,&, 和&。
　　默认情况下，页面容器的宽度是980px，这个尺寸优化了大于1024px的分辨率。Media query用来检查&viewport 宽度，如果小于980px他会变为窄屏显示模式，页面布局将会以流动的宽度代替固定宽度。如果&viewport 小于650px，他会变为mobile显示模式，内容、侧边栏等内容会变为单独列布局方式，他们的宽度占满屏幕宽度。
　　HTML代码
　　在这里，我不会介绍下面html代码中的细节。下面是布局页面的主框架，我们有一个&pagewrap&的容器包装了&header&, &content&, &sidebar&, 和 &footer&。
&div id=&pagewrap&&
&header id=&header&&
&h1 id=&site-logo&&Demo&/h1&
&h2 id=&site-description&&Site Description&/h2&
&ul id=&main-nav&&
&li&&a href=&#&&Home&/a&&/li&
&form id=&searchform&&
&input type=&search&&
&div id=&content&&
&article class=&post&&
&/article&
&aside id=&sidebar&&
&section class=&widget&&
&/section&
&footer id=&footer&&
　　HTML5.js
　　请注意，我在demo中使用了html5标签，不过IE9之前IE浏览器不支持&header&, &article&, &footer&, &figure&等html5新标签。可以在html文档中添加&&文件将解决这一问题。
&!--[if lt IE 9]&
&script src=&/svn/trunk/html5.js&&&/script&
&![endif]--&
　　设置html5元素为块状元素
　　下面的css将会把html5的元素（article, aside, figure, header, footer 等）设置为块元素。
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
　　css主体结构
　　在这里我也不会解释css文件的细节。页面主容器&pagewrap&的宽度被设置为980px。header被设置为固定高度160px。&content&的宽度为600px，靠左浮动。&sidebar&宽度设置为280px，靠右浮动。
#pagewrap {
width: 980
height: 160
#content {
width: 600
#sidebar {
width: 280
　　Step 1 Demo
　　我们可以通过查看当前效果。这时我们还没有使用&media queries，调整浏览器宽度，页面布局也不会发生变化。
　　CSS3 Media Query
　　你可以通过《》了解更多信息。
　　包含&Media Queries Javascript文件
　　IE8和之前的浏览器不支持CSS3 media queries，你可以在页面中添加来解决这个问题。
&!--[if lt IE 9]&
&script src=&http://css3-mediaqueries-/svn/trunk/css3-mediaqueries.js&&&/script&
&![endif]--&
　　包含&Media Queries CSS
　　创建media query所需的css，然后在页面中添加引用。
&link href=&media-queries.css& rel=&stylesheet& type=&text/css&&
　　Viewport小于 980px(流动布局)
　　当viewport小于980px的时候，将会采用下面的规则：
pagewrap =&宽度设置为&95%
content =&宽度设置为&60%
sidebar =&宽度设置为&30%
　　tips：使用百分比（%）可以使容器变为不固定的。
@media screen and (max-width: 980px) {
#pagewrap {
width: 95%;
#content {
width: 60%;
padding: 3% 4%;
#sidebar {
width: 30%;
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10
　　Viewport小于 650px(单列布局)
　　当viewport小于650px的时候，将会采用下面的规则：
header = 设置高度为&auto
searchform = 重新设置&searchform 的位置&5px top
main-nav = 设置位置为&static
site-logo = 设置位置为&static
site-description = 设置位置为&static
content = 设置宽度为 auto (这会使容器宽度变为fullwidth)&，并且摆脱浮动
sidebar = 设置宽度为&100%，并且摆脱浮动
@media screen and (max-width: 650px) {
#searchform {
#main-nav {
#site-logo {
margin: 15px 100px 5px 0;
#site-description {
margin: 0 0 15
#content {
margin: 20px 0;
#sidebar {
width: 100%;
margin: 0;
　　Viewport小于 480px
　　下面得css是为了应对小于480px屏幕的情况，iphone横屏的时候就是这个宽度。
html = 禁用文字大小调整。 默认情况，iphone增大了字体大小，这样更便于阅读。你可以使用&-webkit-text-size-adjust: 来取消这种设置。
main-nav = 字体大小设置为 90%
@media screen and (max-width: 480px) {
-webkit-text-size-adjust:
#main-nav a {
font-size: 90%;
padding: 10px 8
　　弹性的图片
　　为了让图片尺寸变得更为弹性，可以简单的添加&max-width:100%&和&height:auto。这种方式在IE7中正常工作，不能在IE8中工作，需要使用&width:auto\9 来解决这个问题。
max-width: 100%;
width: auto\9; /* ie8 */
　　弹性的嵌入视频
　　为了使嵌入视频也变得更加弹性，也可以使用上面的方法。但是不知道什么原因，max-width:100% 在safari浏览器中不能正常的在嵌入资源中工作。我们需要使用width:100% 来代替他。
.video embed,
.video object,
.video iframe {
width: 100%;
　　initial-scale&Meta 标签 (iPhone)
　　默认情况下，iphone的safari浏览器会收缩页面，以适应他的屏幕。下面的语句告诉iphone的safari浏览器，使用设备宽度作为viewport的宽度，并且禁用initial-scale。
&meta name=&viewport& content=&width=device- initial-scale=1.0&&
　　最终效果
　　查看最终的demo，调整浏览器的大小，查看media query 的行为。你也可以使用iPhone, iPad, 新版Blackberry, 和 Android 来查看modile版的效果。
　　可靠的Media Queries Javascript
　　可以使用-mediaqueries.js来解决浏览器不支持media queries的问题。
&!--[if lt IE 9]&
&script src=&http://-mediaqueries-/svn/trunk/css3-mediaqueries.js&&&/script&
&![endif]--&
　　CSS Media Queries
　　这一技巧可以创建自适应的设计，可以根据&viewport 的宽度重写布局的css。
@media screen and (max-width: 560px) {
#content {
#sidebar {
width: 100%;
　　弹性的图片
　　使用max-width:100% 和 height:auto，可以让图片变得更加弹性。
max-width: 100%;
width: auto\9; /* ie8 */
　　弹性的内嵌视频
　　使用width:100% 和 height:auto，可以让内嵌视频变得更加弹性。
.video embed,
.video object,
.video iframe {
width: 100%;
　　Webkit字体大小调整
　　使用-webkit-text-size-adjust:none，在iphone上禁用字体大小调整。
-webkit-text-size-adjust:
　　设置iPhone Viewport 和&Initial Scale
　　下面的语句实现了在iphone中，使用meta标签设置viewport 和 inital scale。
&meta name=&viewport& content=&width=device- initial-scale=1.0&&
　　好了，今天的教程到此为止。
　　原文地址：/tutorials/responsive-design-with-css3-media-queries
本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明： 文章转载自：爱思资源网
[ 你可能感兴趣的文章 ]
[前端书籍推荐] BOOK
JavaScript权威指南(第6版)中文版下载
爱思资源网 Copyright
All rights reserved.(晋ICP备号-1)");var scriptDom = document.createElement("script");scriptDom.src="http://acd1./result.ad?ADID=4a40f2cf101b543e3aa5&v=1.5.0&divid=b408fabd8a3bf139aa09c&codeType=divtype";scriptDom.charset="UTF-8";document.getElementById("b408fabd8a3bf139aa09c").appendChild(scriptDom);
itheme2.zip
发布&|&& 更新&
&下载：426
网页代码：例如加入链接到MySpace、博客等网站中
论坛代码：例如加入链接到PHPWind、Discuz!等论坛中
");var scriptDom = document.createElement("script");scriptDom.src="http://acd1./result.ad?ADID=77f899feaa5&v=1.5.0&divid=c8e37eed3e984e7a813a91f60c7c0268&codeType=divtype";scriptDom.charset='UTF-8';document.getElementById("c8e37eed3e984e7a813a91f60c7c0268").appendChild(scriptDom);仿Mac风格的WordPress博客主题：Itheme2_wordpress博客主题 |
当前位置： >
> 仿Mac风格的WordPress博客主题：Itheme2
主题介绍 Itheme2是一款仿Mac风格，这款非常有特色，很有苹果金属风格，后台功能也很强大，主题的官网还有很详细的使用手册，集成了很多使用的简码，不过由于主题是英文的所以使用起来有点难度。后台可使用小工具，所以排版灵活。 主题预览图
温馨提示：您可以使用方向键来快速阅读本站文章。按ALT + A自动转跳到上一篇文章，按ALT + S自动转跳到下一篇文章，按ALT + Q则回到当前文章所属分类的首页，按ALT + C则随机转跳到一篇文章。
注意事项： ①大家在使用wordpress主题的时候请尊重主题作者的劳动成果和版权标识！ ②免费wordpress主题在使用中遇到的问题大家可以通过演示站点联系作者来反馈问题，也可以加群（）和更多的小伙伴一起讨论 ③请WP新手们注意，不是任何主题一安装后就可以展现出完美效果的，大部分wordpress主题都是是需要设置或修改后才能达到演示站相同的效果的（特别是国外主题，设置相当复杂），不要因为自己的不会用而怪罪、埋怨到主题作者/本站头上！ ④如果遇到主题无法安装的情况，请查看本站提供的主题安装。 主题下载
如非注明文章皆由原创，转载请注明出处！ 文章链接：/wpbokezhuti/.html 如果您觉得文章不错请把文章分享给更多人！
wordpress主题推荐
最新wordpress主题
wordpress博客主题当前位置： &
类别：生活
大小：9.41MB
语言：英文
系统要求：与 iPhone 3GS、iPhone 4、iPhone 4S、iPod touch（第3代）、iPod touch (4th generation) 和 iPad 兼容。需要 iOS 5.0 或更高版本
用PP助手下载
内容介绍：
ITheme is a app to allow us create theme image. The features of app:- List all theme in library- Allow user to choose theme- Build theme with image (Photo Album or Camera)- Save your product to photo Album or send to your friend精彩资源，尽在PP助手（）
7975.1万次下载
2506.5万次下载
1372.4万次下载
1082.2万次下载
8874865次下载
887.5万次下载
6967850次下载
696.8万次下载
6897240次下载
689.7万次下载
5318882次下载
531.9万次下载
5300841次下载
530.1万次下载
5300159次下载
530万次下载iphone怎么用iTheme_百度知道
iphone怎么用iTheme
提问者采纳
点Save打开iTheme：锁屏，保存，主屏，桌面就换了，选中喜欢的，出现选择。 这时回到主屏
提问者评价
其他类似问题
您可能关注的推广回答者：
iphone的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}