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 的文章.同时位列其中的也有前天我刚刚翻译的 ...
随机推荐
- 读书笔记之 - javascript 设计模式 - 观察者模式
在事件驱动的环境中,比如浏览器这种持续寻求用户关注的环境中,观察者模式是一种管理人与其任务(确切的讲,是对象及其行为和状态之间的关系)之间的关系的得力工具.用javascript的话来讲,这种模式的实 ...
- 滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动
今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动 ...
- juquery验证插件validation addMethod方法使用笔记
该方法有三个api接口参数,name,method,messages addMethod(name,method,message)方法 参数 name 是添加的方法的名字. 参数 method 是一个 ...
- CANoe 入门 Step by step系列（二）CAPL编程【转】
CAPL就是Communication Application Programming Laguage的缩写,CAPL类似于C语言的语法,因此所有的语法请参考C语言教程,这里不在这里进行详述,关于C语 ...
- directUI
MFC界面开发中,习惯了使用控件,亦或者是自绘制控件来美化界面,但操作起来繁琐,还不太美观.DirectUI的出现,对于界面开发,给了我们一个新的选择,目前很多公司使用了该技术对其产品进行了美化,效果 ...
- main函数的参数
一.main的参数 形式:int main(int argc,char *argv[]) 参数argc.argv可以被看做是main函数的形参,argc是整型变量,代表的是参数的个数:argv是指向字 ...
- Docker Machine
Docker Machine http://dockone.io/article/1485?utm_source=tuicool&utm_medium=referral 本地安装与使用 Doc ...
- log4j源码阅读
基于log4j1.2.17的源代码阅读 org.apache.log4j.xml.DOMConfigurator 类是log4j的xml配置文件初始化类 org.apache.log4j.Proper ...
- Chaperon简介
Chaperon是一个可以把有结构的Text转换成XML.它包括一个强大的LALR(1)解析器来解析Text和一个可以用来创建XML文档的Tree builder. http://chaperon.s ...
- Contest 高数题 樹的點分治 樹形DP
高数题 HJA最近在刷高数题,他遇到了这样一道高数题.这道高数题里面有一棵N个点的树,树上每个点有点权,每条边有颜色.一条路径的权值是这条路径上所有点的点权和,一条合法的路径需要满足该路径上任意相邻的 ...