web完全响应式布局 原

在页面布局中响应式布局优势很明显，能适应不同的屏幕，现在很多的网站系统也都是响应式布局

通常使用bootstrap作为框架来布局，这种框架也是针对于宽度的响应式，高度根据内容的多少，

假如我们需要一台电脑上显示的页面的样式与一个很大的屏幕上显示的一样，大的屏幕字体与间距肯定要比小的屏幕大，这时候bootstrap并不能满足要求，需要另外的处理方法

如宽高比例16:9，外层div的宽度定为100%；高度js控制，然后里面的div用百分比来定义高度，以宽度640px 屏幕为基准，20px 字体，随着屏幕的变大字体随着屏幕变大

代码语言：javascript复制

<div class="wrap">
   <div class=content>
    里面内容1
   </div>
   <div class=content>
    里面内容2
   </div>
   <div class=content>
    里面内容3
   </div>
   <div class=content>
    里面内容4
   </div>
   <div class=content>
    里面内容5
   </div>
</div>

代码语言：javascript复制

<style>
.wrap{width:100%;background:#ccc;}
.content{height:20%;border:1px solid #fff;font-size:0.2rem;}
</style>

代码语言：javascript复制

<script>
$(function(){
$(".wrap").css("height",$(".wrap").width()*16/9)
});

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
document.documentElement.style.fontSize=w/6.4   'px';
</script>

下面是网上看到的一个比较好的文章

http://www.cnblogs.com/constantince/p/5708930.html

(adsbygoogle = window.adsbygoogle || []).push({});

bootstrap

0 人点赞