设为首页
收藏本站
开启辅助访问
切换到宽版
登录
立即注册
快捷导航
发布信息
搜索
搜索
网站首页
自丢网
社区论坛
自丢网论坛
附件中心
源码下载
邀请码
丢币充值
帖子
搜索附件
搜索附件
自丢网
›
附件中心
›
建站程序/IT教程
›
Css/Css3教程
›
自适应css案例教程.png
板块导航
+
模板下载
+
建站程序/IT教程
·
源码下载
·
修罗xiuno教程
·
Discuz教程
·
zzz资源/教程
·
织梦教程
·
服务器教程
·
数据库教程
·
Html/Html5教程
·
JavaScript教程
·
Css/Css3教程
·
建站/web前端教程
·
PHP教程
·
其他编程教程
·
小程序app教程
·
PPT模板/素材
·
Word简历模板/素材
·
Excel模板/素材
·
素材中心
·
百科知识
+
综合教程资源
热门下载
左侧广告
版权所有:自丢网
For 2020-2050 ©
zidiu.com
自适应css案例教程.png
打开方式:
资料大小: 17.82 KB
下载次数: 327
上传会员:
admin
上传时间: 2019-07-03
本站网址:
www.zidiu.com
查看附件所在的主题
下载附件
复制链接推荐给好友
点击附件下载:下载附件
@media screen实现屏幕自适应内容案例分析详解教程:
@media screen实现屏幕自适应内容案例分析详解教程
代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3-media-queries-demo</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
.content{
zoom:1;
}
.content:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.leftBox, .rightBox{
float: left;
width: 20%;
height: 500px;
margin: 5px;
background: #ffccf7;
display: inline;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 2s ease;
transition: width 1s ease;
}
.middleBox{
float: left;
width: 50%;
height: 800px;
margin: 5px;
background: #b1fffc;
display: inline;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.rightBox{
background: #fffab1;
}
@media only screen and (min-width: 1024px){
.content{
width: 1000px;
margin: auto
}
}
@media only screen and (min-width: 400px) and (max-width: 1024px){
.rightBox{
width: 0;
}
.leftBox{ width: 30%}
.middleBox{ width: 65%}
}
@media only screen and (max-width: 400px){
.leftBox, .rightBox, .middleBox{
width: 98%;
height: 200px;
}
}
</style>
</head>
<body>
<div class="content">
<div class="leftBox">我是左边内容</div>
<div class="middleBox">我是中间内容</div>
<div class="rightBox">我是右边内容</div>
</div>
</body>
</html>
复制代码
运行效果:
如果不想要内容显示就加个CSS样式:display:none;
html5自适应响应式激活代码段
同一主题附件: