<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自适应布局</title> <style type="text/css"> body{ margin: 0; } .absolute_father{ width: 400px; height: 300px; background-color: #cfcfcf; position: relative; } .absolute_son{ width: 60%; height: 20%; margin-left: 10%; margin-top: 10%; padding:10%; position: absolute; top: 10%; left:10%; } .float_father{ width: 400px; height: 300px; background-color: #cfcfcf; overflow: hidden; } .float_son{ width: 20%; height: 20%; margin-left: 10%; margin-top: 10%; } .static_father{ width: 100%; height: 40%; background-color: #cfcfcf; } .static_son{ width: 50%; height: 20%; } .div_block{ margin-top: 100px; } .text_block{ } </style> </head> <body> <div> 移动端网页的自适应布局。 这样可以使屏幕大小不一的手机展示的页面布局比例一致。 我们先不用css3的box-flex属性，而是用百分比设置。 </div> <div class="div_block"> <div>绝对定位的参考标准</div> <div class="absolute_father"> <div class="absolute_son"> 我是绝对定位块,可以看到子元素的left是参照父元素的宽W，top是参照父元素的高H。子元素的宽参照W，高参照父元素的H。子元素的margin-left参照W，<span style="color:red;">margin-top也是参照W</span>。这是因为margin：10px 10px 10px 10px;，可以缩写成一个margin:10px，为了数值的统一，也就只参考了父元素的W。padding是一样的道理。 </div> </div> </div> <div class="div_block"> <div>float元素的参考标准</div> <div class="float_father"> <div class="float_son">我是float块，子元素的宽参照W，高参照父元素的H</div> </div> </div> <div class="div_block"> <div>static元素的参考标准</div> <div class="static_father"> <div class="static_son">我是static块，子元素的宽参照W，高参照父元素的H。如果父元素的父height是auto，那么父元素的height就是靠content撑起，子元素设置height的百分比无效。</div> </div> </div> <div class="div_block"> <div>自适应图片的定高</div> <div> 有时候，某个区块的高度是靠内容撑起，并没有设置高度。那么如何统一设置图片的高度呢？解决思路是，用定宽高比的透明图来撑起高度。因为只对图片设置宽度，高度会按照宽高比进行定高。 </div> </div> <div class="div_block"> <div>文字自适应大小</div> <div class="text_block"> 请看demo2 </div> </div> </body> </html>
demo2
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" /> <title>文字自适应</title> <style type="text/css"> body{ margin: 0; font-size: 62.5%; } .page{ width: 100%; font-size: 1.3em; } </style> </head> <body> <div class="page">我们拿到手的移动端网页的设计稿通常是640px宽，文字大小也通常是26px。而你实际写的网页是320px宽，文字13px大小。div和图片的宽高，可以通过设计稿的百分比得出，而文字</div> <script type="text/javascript"> function $(str) { return document.querySelectorAll(str); } var body_width = window.innerWidth; var rate = body_width / 320; $(".page")[0].style.fontSize = rate*(1.3) + "em"; console.log(body_width); console.log(rate); console.log($(".page")[0]); </script> </body> </html>