近排独自承担官网的响应式开发，用的是之前学的bootstrap框架，同时也总结下整个开发过程积累的一些小经验。
bootstrap3官网：http://v3.bootcss.com/css/
1.里面最好用的是栅格布局，由于bootstrap对针对3种设备mobile ，iPad ，pc进行自适应的，因此其栅格布局也对这三种设备的分辨率的临界值<768px ,>=769 ，>=992px,>=1200px用css媒体查询@media进行监听；
得出以下三种前缀.col-xs-*(mobile),.col-sm-*(ipad),col-md-*(pc 小屏幕)，.col-lg-*(pc大屏幕)；因此对某一模块的布局就有可能同时使用这三个不同前缀，其优先级根据屏幕的大小鉴定而生效；
eg：
<div class="container">
<div class="col-xs-12 col-sm-6 col-md-8"></div> <!--在mobile 中col-xs-12生效，在ipad中.col-sm-6生效，在pc中.col-md-8生效，如果没有设定.col-md-8则在pc中也将以.col-sm-6生效，-->
<div class="col-xs-12 col-sm-6 col-md-4"></div>
</div>
栅格布局的原理：首先由@media screen监听不同设备，并将为不同设备设置.container,.row设定一个临界值，然后根据需要，划分各自.col-xs/sm/md/lg-1~12的大小 （width:百分值）；
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
2.一些常用的全局css功能块:
.center-block{display:block;margin-left:auto;margin-right:auto;}//居中
.pull-left{float:left;}//左浮动
.pull-right{float:right;}//右浮动
.text-center{text-align:center;}//文字对齐
.text-justify{text-align:justify;}//文字两端对齐
.img-response{display:block;max-width:100%;height:auto;}//图片液态化
.img-circle{border-radius:50%;}//圆型图片
.img-rounded{border-radius:6px;}//圆角图片
.show{display:block;}//显示
.hidden{display:none;}//隐藏
.list-unstyled{ padding-left: 0;list-style: none;}//无样式列表
.list-inline{ padding-left: 0;margin-left: -5px;list-style: none;}//列表同行
.list-inline > li {display: inline-block;padding-right: 5px;padding-left:5px;}等等
3.兼容调试，先调好pc端(1200px~)，然后用@media 调ipad端(768px~1575px)实际监听（768~1200px），最后调mobile端（最低分辨率320px~480px）；
4.鉴于响应式，由于屏幕不同，通常导航，页头有两种甚至三种不同的设计，一种是pc，ipad的菜单平铺，一种是mobile 菜单 collapse如：
(mobile)
（pc）
（ipad）;
因此头部html如下:
<header>
<div class="container clearfix">
<div class="logo pull-left center-block">
<a href="index.html"><img class="img-responsive center-block" src="images/bg/logo.png"/></a>
</div>
<div class="mobile-nav pull-right">
<a class="menu-icon" href="javascript:void(0);"></a>
<div class="mobile-nav-mask"></div>
<ul class="mobile-menu clearfix ft16">
<li class="nav-item">
<a href="index.html">HOME</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);">ABOUT US</a>
<ul class="ft14">
<li><a href="company-profile.html">Company Profile</a></li>
<li><a href="our-team.html">Our Team</a></li>
</ul>
</li>
<li class="nav-item">
<a href="javascript:void(0);">BUSINESS MODEL</a>
<ul class="ft14">
<li><a href="overview.html">Overview</a></li>
<li><a href="big-data.html">Big Data</a></li>
<li><a href="benefits-to-customers.html">Benefits to Customers</a></li>
<li><a href="benefits-to-vendors.html">Benifits to Vendors</a></li>
</ul>
</li>
<li class="nav-item">
<a href="career.html">CAREER</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);">CONTACT US</a>
<ul class="ft14">
<li><a href="hong-kong.html">Hong Kong</a></li>
</ul>
</li>
</ul>
</div>
<div class="Language pull-right">
<a class="en" href="#">ENGLISH </a> |
<a class="ch" href="#"> 中文 </a>
</div>
<div class="pull-right col-xs-12 col-sm-12 col-md-7 ">
<ul class="navUL clearfix ft16">
<li class="nav-item">
<a href="index.html">HOME</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);">ABOUT US</a>
<ul class="subnav ft14">
<li><a href="company-profile.html">Company Profile</a></li>
<li><a href="our-team.html">Our Team</a></li>
</ul>
</li>
<li class="nav-item">
<a href="javascript:void(0);">BUSINESS MODEL</a>
<ul class="subnav ft14">
<li><a href="overview.html">Overview</a></li>
<li><a href="big-data.html">Big Data</a></li>
<li><a href="benefits-to-customers.html">Benefits to Customers</a></li>
<li><a href="benefits-to-vendors.html">Benifits to Vendors</a></li>
</ul>
</li>
<li class="nav-item">
<a href="career.html">CAREER</a>
</li>
<li class="nav-item">
<a href="javascript:void(0);">CONTACT US</a>
<ul class="subnav ft14">
<li><a href="hong-kong.html">Hong Kong</a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
5.鉴于某些页面内容少，不够一页的内容，可将其中间内容部分的高度进行自适应min-height=“设备窗口高度-导航头部高度-页脚底部高度”:
function setMinHeight(){
var screenHeight = $(window).height(), //设备窗口高度
headHeight = $("header").height(), //导航头部高度
footerHeight = $("footer").height()+$(".footer").height(), //页脚高度
minHeight,
actualHeight;
minHeight = screenHeight - headHeight - footerHeight-145; //计算得出中间最少高度
actualHeight = $("article").height();
if(minHeight > actualHeight){
$(".article").css({"min-height":minHeight});
}
}
/****/
setMinHeight();
$(window).on(‘resize‘, function(){
setMinHeight();
});//设定中间内容最小高度
时间： 2024-10-12 15:36:56