Media Queries 自适应布局展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Media Queries</title>
<style> body{
margin: 20px ;
}
#conterbody{
width:960px;
margin:auto;
}
p#top{
width:960px;
background-color: #;
line-height:200px;
}
div#left{ /*控制center和 left*/
width:740px;
float: left;
background-color: #;
}
p{
line-height:600px;
text-align: center;
font-size: 2em;
margin: 20px ;
color: #fff;
}
p#left-z{
width:200px;
float: left;
background-color: #0064ff;
}
p#left-y{
width:520px;
float: right;
background-color: #;
}
p#right{
width:200px;
float:right;
background-color: #;
} /*最大1000px时候*****************************************************/
@media screen and (min-width: 1000px){
#conterbody{
width:1000px;
}
p#top{
width:1000px;
}
p#left{
width:780px;
float: left;
}
div#left-z{
width:200px;
float: left;
}
p#left-y{
width:520px;
float: right;
}
p#right{
width:200px;
float:right;
}
}
/*最大不超过999px 最小不小于640px**************************************/
@media screen and (min-width: 640px) and (max-width: 999px){
div#conterbody{
width:640px;
}
p#top{
width:%;
}
div#left{
width:640px;
float: left;
}
p{
line-height: 430px; /*变化后高度缩小*/
}
p#left-z{
width:200px;
float: left;
}
p#left-y{
width:420px;/*640-200-20=420*/
float: right;
}
p#right{
width:%;
line-height: 150px;
}
}
/*最大不超过639px **************************************************/
@media screen and (max-width:639px){
div#conterbody{
width:%;
}
p#top{
width:%;
}
div#left{
width:%;
}
p{
line-height: 300px; /*变化后高度缩小*/
}
p#left-z{
width:%;
}
p#left-y{
width:%;
}
p#right{
width:%;
line-height: 200px;
}
}
</style>
</head>
<body>
<div id="conterbody">
<p id="top">Top</p>
<div id="left">
<p id="left-z">Left</p>
<p id="left-y">Conter</p>
</div>
<p id="right">right</p>
</div>
</body>
</html>
/*Safari 版本5.1。7（7534.57.2）支持
chrome 版本26.0.1410.64 m 支持
opera 版本12.15 支持
fireFox 版本21.0 支持
IE10 版本10.0.92000.16580 支持*/ 解决IE不支持<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
如果有什么些的不对，请各位及时指出，在下这里感谢了！！！
Media Queries 自适应布局展示的更多相关文章
- 使用CSS3 Media Queries实现网页自适应
原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...
- 使用CSS3 Media Queries实现网页自适应(转)
当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等.所以传统的固定宽度设计形式将不再是个最佳选择,网页设 ...
- html自适应布局，@media screen，媒体查询
html自适应布局,@media screen,媒体查询 自适应代码示例: <!doctype html> <html> <head> <meta chars ...
- CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
点评:Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式 Med ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- Css3 Media Queries移动页面的样式和图片的适配问题(转)
CSS3 Media Queries 摘自:http://www.w3cplus.com/content/css3-media-queries Media Queries直译过来就是“媒体查询”,在我 ...
- CSS3 Media Queries 详解
说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...
- 移动端利用rem实现自适应布局
好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...
- 【css】CSS3 Media Queries 详解【转】
说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...
随机推荐
- angularjs应用骨架(3)
好,继续上一章节我们继续聊聊angularjs骨架.开发任何一款优秀的应用都会面临一项非常困难的工作,那就是找到一种合适的方式方法把代码组织在合适的功能范围内.我们已经看过控制器的处理方式,它会提供一 ...
- YZOI Easy Round 2_化简（simplify.c/cpp/pas)
Description 给定一个多项式,输出其化简后的结果. Input 一个字符串,只含有关于字母x 的多项式,不含括号与分式,没有多余的空格. Output 一个字符串,化简后的多项式,按照次数从 ...
- 利用青瓷布局自定义加载的场景，而不是自己改写qici-loading
加载界面如果全部通过自己手动布局不仅不美观,还很难控制.借用原生的场景切换加载效果,来实现我们游戏的加载效果. 没有做加载修改的原来的加载顺序: 黑乎乎界面->(游戏定制的加载)你的第一个场 ...
- MFC笔记
一.Win32基本程序概念 所有的windows程序都必须载入windows.h MFC程序都有一个Stdafx.h文件,它载入了MFC框架必须的文件. Windows程序以消息为基础,以事件驱动之. ...
- Window7 下开发php扩展
一.首先查看phpinfo() 信息PHP Version 5.4.34Zend Extension Build API220100525,TS,VC9 PHP Extension Build ...
- MATLAB r2014a 下载+安装+激活
MATLAB r2014a,下载包就有7个多GB,装完占用9个多GB,慎装.界面还不错,稍有改良. 其实本文是下载+安装+破解啦.读书人的事,怎么能叫破解呢?所以我这里讲的是如何激活啦. MATLAB ...
- java的Arrays类的应用
(2012-08-01 14:48:27) 转载▼ 标签: java arrays类 填充 排序 查找 比较数组 分类: java基础 java.util.Arrays类能方便地操作数组,它提供的所有 ...
- 我们说的oc是动态运行时语言是什么意思？
1.KVC和KVO区别,分别在什么情况下使用? 答:KVC(Key-Value-Coding) KVO(Key-Value-Observing)理解KVC与KVO(键-值-编码与键-值-监看) 当通 ...
- hdu 1576 A/B 拓展欧几里得算法
A/B Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- 【JavsScript】XMLHttpRequest2的进步之处
本文参考自:XMLHttpRequest2 新技巧 (重点保留demo,方便自己日后查阅) HTML5是现在web开发中的热点,虽然关于web app和local app一直有争论,但是从技术学习的角 ...