屏幕尺寸 自适应
Posted lszw
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了屏幕尺寸 自适应相关的知识，希望对你有一定的参考价值。
一、index 首页布局
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="content">
<nav>导航栏</nav>
<section>博客内容</section>
<aside>侧边栏</aside>
<footer>
<p>版权</p>
</footer>
</div>
</body>
</html>
二、样式
/** 屏幕尺寸 700px+270px+5+5=980px;
*
*/
#content
width:980px;
margin:0 auto;
background-color:#666;
section
width:700px;
float:left;
background-color:blue;
aside
width:270px;
padding-left:5px;
padding-right:5px;
float:left;
background-color:yellow;
/*
*@media only screen 表示下面的css 针对屏幕有效果
*/
/**
* and (max-width:700px) 当屏幕分辨率最大为767px时下面的css起作用
*/
@media only screen and (max-width:767px) /*and 后空格一定要*/
section
min-width:100%;
aside
min-width:100%;
完整代码，HTML 、css 都需要放上去
以上是关于屏幕尺寸 自适应的主要内容，如果未能解决你的问题，请参考以下文章