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 Iframe富文本编辑器中的光标定位
最近在项目中碰到一个比较棘手的问题: 在iframe富文本编辑器中,有个工具栏,这个工具栏在iframe标签之外,工具栏上有一个按钮,点击该按钮向iframe正在编辑中的光标处插入一个图片,图片会插入 ...
- css重置样式表reset.css
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,/* structural elements 结构元素 */ dl, dt, dd, ul, ol, l ...
- 查看linux进程(强制中止进程),服务及端口号，
进程状态查询 ps -aux [test@pan ~]$ ps -aux USER PID %CPU %MEM VSZ RSS TTY STAT START ...
- php5.4安装ecshopphp5.4问题及解决
includes/cls_template.php line422 将 $tag_sel = array_shift(explode(＂ ＂, $tag)); 这句话拆开为两句. $tag_exp = ...
- ThinkPHP URL模式和URL重写
现在用的版本是TP3.1.3,这两天总是遇到NotFound的错误,解析路径错误,所以认真研究了一下手册,发现问题出在URL模式上面. URL模式 一般是使用U方法来生成路径,U方法的定义规则如下(方 ...
- 基于TCP的NAT子网穿透实验
不得不说,在国内IP紧缺的现状下,NAT发挥了无比巨大的作用:它以把IP和端口重新分配的方式,满足了广大人民群众上网的强烈需求.但是对于个人服务器以及在内网中基于网络的嵌入式设备,却是个比较尴尬的事情 ...
- QueryRunner的使用
在相继学习了JDBC和数据库操作之后,我们明显感到编写JDBC代码并非一件轻松的事儿.为了帮助我们更高效的学习工作,从JDBC的繁重代码中解脱出来,老佟给我们详尽介绍了一个简化JDBC操作的组件——D ...
- python 文件及文件夹操作
python 文件.目录操作(新增.移动.删除等) python 文件夹与文件操作 mport string, os, sys dir = '/var' print '----------- no s ...
- lc面试准备:Reverse Bits
1 题目 Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represente ...
- c++ RAII 资源管理就是初始化
RAII:(Resource Acquisition Is Initialization),也就是“资源获取就是初始化”,是C++语言的一种管理资源.避免泄漏的惯用法.C++标准保证任何情况下,已构造 ...