我就是我,一个平凡的社会人
2019/05/07 - - 暂无评论

之前做一个简单的界面,需要自适应界面大小,下面是网上找的一个demo,不需要任何依赖文件就能跑的。

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Demo: Responsive Design in 3 Steps</title>

<!-- 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 type="text/css">

body {

font: 1em/150% Arial, Helvetica, sans-serif;

}
a {

color: #669;
text-decoration: none;

}
a:hover {

text-decoration: underline;

}
h1 {

font: bold 36px/100% Arial, Helvetica, sans-serif;

}

/
STRUCTURE
*/

pagewrap {

padding: 5px;
width: 960px;
margin: 20px auto;

}

header {

height: 180px;

}

content {

width: 600px;
float: left;

}

sidebar {

width: 300px;
float: right;

}

footer {

clear: both;

}

/
MEDIA QUERIES
*/
/ for 980px or less /
@media screen and (max-width: 980px) {


#pagewrap {
    width: 94%;
}
#content {
    width: 65%;
}
#sidebar {
    width: 30%;
}

}

/ for 700px or less /
@media screen and (max-width: 700px) {

#content {
    width: auto;
    float: none;
}
#sidebar {
    width: auto;
    float: none;
}

}

/ for 480px or less /
@media screen and (max-width: 480px) {

#header {
    height: auto;
}
h1 {
    font-size: 24px;
}
#sidebar {
    display: none;
}

}

/ border & guideline (you can ignore these) /

content {

background: #f8f8f8;

}

sidebar {

background: #f0efef;

}

header, #content, #sidebar {

margin-bottom: 5px;

}

pagewrap, #header, #content, #sidebar, #footer {

border: solid 1px #ccc;

}

</style>
</head>

<body>

<div id="pagewrap">

<div id="header">
    <h1>Header</h1>
    <p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p>
</div>

<div id="content">
    <h2>Content</h2>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
</div>

<div id="sidebar">
    <h3>Sidebar</h3>
    <p>text</p>
    <p>text</p>
</div>

<div id="footer">
    <h4>Footer</h4>
</div>

</div>

</body>
</html>

    有你的评论,我才会进步