可以请问关于自适应网页的有关问题吗？毕业设计急
可以请教关于自适应网页的问题吗？毕业设计急。。。。
网页如下：在@media screen and (max-width: 980px)等的那几个规则里该怎样写可以做到随着网页宽度的改变，DIv:content里的DIV：box能够适应网页大小而改变大小？？
<!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: 960px;
float: left;
}
#content .m1{
width:958px;
border:1px solid #eee;
height:240px;}
#content .m1 .box{
width:238px;
height:238px;
float:left;
border:1px solid #eee;}
#footer {
clear: both;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
}
/* for 480px or less */
@media screen and (max-width: 480px) {
#header {
height: auto;
}
}
/* 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>
</div>
<div id="content">
<div class="m1">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="m1">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<div id="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
------解决思路----------------------
宽度换成百分比的方式表示，
------解决思路----------------------
自适应无非是把宽度全部换成百分比，既然你用到@media screen and (max-width: 980px)那么你是想做响应式开发吧。这样的话建议你去看看bootstrap这套前端框架，非常好用！
------解决思路----------------------
楼主既用H5，，，宽度百分比即可。。。
------解决思路----------------------
http://www.cnblogs.com/flash3d/archive/2013/09/28/3343877.html
------解决思路----------------------
自适应的【流式布局】和时下流行的【响应式布局】是不一样的。
流式布局存在于CSS2年代，使用百分比布局，当改变浏览器宽度的时候可以让页面布局基本不变。
但是当时移动设备还不多，所以所谓适应也就是在常见的显示器尺寸。
而【响应式布局】的中心思想是：针对不同分辨率的设备给予合适的布局。也就是大屏幕有大屏幕的样子，小屏幕有小屏幕的样子。也就是说，你至少要做3种布局设计，写在@media 里面。
例如：980以上的分辨率（一般就是电脑屏幕了），就可以用通栏的大图、左中右3栏，等等。
如果是700~979的，就是一般的Pad，可能图片就是要小一些，栏目也是左右两栏。
而更小的手机屏，可能就是单栏的布局，而且响应的导航、登录等等也要有不同的设计。
网页如下：在@media screen and (max-width: 980px)等的那几个规则里该怎样写可以做到随着网页宽度的改变，DIv:content里的DIV：box能够适应网页大小而改变大小？？
<!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: 960px;
float: left;
}
#content .m1{
width:958px;
border:1px solid #eee;
height:240px;}
#content .m1 .box{
width:238px;
height:238px;
float:left;
border:1px solid #eee;}
#footer {
clear: both;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
}
/* for 480px or less */
@media screen and (max-width: 480px) {
#header {
height: auto;
}
}
/* 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>
</div>
<div id="content">
<div class="m1">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="m1">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<div id="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
------解决思路----------------------
宽度换成百分比的方式表示，
------解决思路----------------------
自适应无非是把宽度全部换成百分比，既然你用到@media screen and (max-width: 980px)那么你是想做响应式开发吧。这样的话建议你去看看bootstrap这套前端框架，非常好用！
------解决思路----------------------
------解决思路----------------------
http://www.cnblogs.com/flash3d/archive/2013/09/28/3343877.html
------解决思路----------------------
自适应的【流式布局】和时下流行的【响应式布局】是不一样的。
流式布局存在于CSS2年代，使用百分比布局，当改变浏览器宽度的时候可以让页面布局基本不变。
但是当时移动设备还不多，所以所谓适应也就是在常见的显示器尺寸。
而【响应式布局】的中心思想是：针对不同分辨率的设备给予合适的布局。也就是大屏幕有大屏幕的样子，小屏幕有小屏幕的样子。也就是说，你至少要做3种布局设计，写在@media 里面。
例如：980以上的分辨率（一般就是电脑屏幕了），就可以用通栏的大图、左中右3栏，等等。
如果是700~979的，就是一般的Pad，可能图片就是要小一些，栏目也是左右两栏。
而更小的手机屏，可能就是单栏的布局，而且响应的导航、登录等等也要有不同的设计。