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 的文章.同时位列其中的也有前天我刚刚翻译的 ...
随机推荐
- Linux 共享内存编程
共享内存允许系统内两个或多个进程共享同一块内存空间,并且数据不用在客户进程和服务器进程间复制,因此共享内存是通信速度最快的一种IPC. 实现的机制简单描述如下:一个进程在系统中申请开辟了一块共享内存空 ...
- php时间选择器亲测可以自己修改
由于前端的离职 造成我需要自己去做后台页面 所以有一个要填写生日的我就用了这个时间选择器 <?php /** * Created by PhpStorm. * User: Administ ...
- 使用PHP脚本来写Daemon程序
什么是Daemon进程 这又是一个有趣的概念,daemon在英语中是"精灵"的意思,就像我们经常在迪斯尼动画里见到的那些,有些会飞,有些不会,经常围着动画片的主人公转来转去,啰 ...
- 将VIM配置成强大的IDE（三）
上一节,我们知道了,我们了解了怎么配置插件的下下载. 现在,我们就可以去DIY我们的IDE了,主要介绍taglist插件和NERDTree插件,最终的结果是: 1.安装Taglist插件. Tagli ...
- 工具批处理Demo
前言:用C语言写一些小型工具时,使用传递参数的方式会比较方便.如GIF文件转换为头文件工具,如果我们需要将某一个文件夹里所有的gif文件都转换为头文件,这时我们用批处理给这个工具传递参数,会方便很多. ...
- 切换view的动画
代码: #import "MainViewController.h" @interface MainViewController () @end @implementation M ...
- hdu 2012 素数判定 Miller_Rabbin
素数判定 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- dispatch_semaphore
dispatch_semaphore 信号量基于计数器的一种多线程同步机制.在多个线程访问共有资源时候,会因为多线程的特性而引发数据出错的问题. dispatch_queue_t queue = di ...
- SAAS相关技术要点
这篇文章本来是我们开发组内部用的一个小文档.因为我们公司以前没有做SAAS的经验,就成立了一个小组做一做这方面的技术前探,我是成员之一.这篇文档想从宏观的层面把开发一个SAAS应用所要用到的技术点稍微 ...
- 【Java】Java里String 的equals和==
Java里面有对象和对象的引用的概念,在String方面,==比较的是引用,equals比较的是对象的具体值. String s1 = new String("abc");Stri ...