最新消息:欢迎加入小松的QQ群一起讨论一起学习,本站启用elasticsearch全文检索系统,提供搜索的精确度

css3自适应网页学习总结

前端技术 714浏览 0评论

css3自适应网页学习总结

小松主要是从事php开发的,今天来学习一下前端的自适应网页是怎么做的。
首先自适应网页要加载下面的meta

<meta name="viewport" content="width=device-width, initial-scale=1.0">

主要是告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放,没有这句网页会进行缩放
这里我们要来理解一下@media screen and (max-width: 1200px) 这个css样式的意思,全部css样式为

@media screen and (max-width: 1200px){
    #pagewrap {
        width: 95%;
    }
    #content {
        width: 70%;
    }
    #sidebar {
        width: 25%;
    }
}

上面的意思是如果窗口小于1200px,那么执行包含在里面的样式,即#pagewrap宽95%,#content宽70%,#sidebar 宽25%
这里还会出现一个问题
IE8及其更低版本不支持media这里就必须加载

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

用js的方法来解决

下面我把完整的代码粘贴处理,跟我的博客的自适应样式相似,具体的值可能不一样

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自适应学习</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- css3-mediaqueries.js for IE8 or older -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<style>
div{ border:1px solid #000}
#pagewrap {
width: 1200px;
margin: 0 auto;
}
#header {
height: 180px;
}
#content {
width: 800px;
float: left;
}
#sidebar {
width: 380px;
float: right;
}
#footer {
clear: both;
}
#headermin{
display:none;
}
@media screen and (max-width: 1200px){
#pagewrap {
width: 95%;
}
#content {
width: 70%;
}
#sidebar {
width: 25%;
}
}
@media screen and (max-width: 960px){
#pagewrap {
width: 95%;
}
#content {
width: 100%;
}
#sidebar {
display:none;
}
}
@media screen and (max-width: 470px){
#headermin {
display:block;
}
#header {
display:none;
}

}
</style>
</head>

<body>
<div id="pagewrap">
<div id="header">header</div>
<div id="headermin">headermin</div>
<div id="content">content</div>
<div id="sidebar">sidebar</div>
<div id="footer">footer</div>
</div>
</body>
</html>

 

QQ交流群:136351212

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» css3自适应网页学习总结
本文链接地址:https://www.phpsong.com/935.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!