万户资源科技
万汇资源微信公众号

微信扫码有惊喜!

页面布局兼容性

luping 2016-01-30 技术

在写网站时有时会遇见兼容性的问题,对于怎样解决制作网站时兼容性的问题;在bootstrap上学到一种对页面布局兼容性很棒的方法:

可以适应手机版和电脑各种宽度;

在写之前需要在bootstrap上下载相关文档,在html里链接bootstrap的CSS;

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

bootstrap使用container容器将电脑屏幕分为4个种类,

分别是

手机宽度(<768px)       col-xs-

平板宽度(768px~992px)  col-sm-

中等屏幕(992px~1200px) col-md-

大屏(>1200px)          col-lg-

一般网站使用中等屏幕就够了 ;

CSS代码为:

.container {

    margin-left: auto;

    margin-right: auto;

    padding-left: 15px;

    padding-right: 15px;

}

@media (min-width: 768px) {

.container {

    width: 750px;

}

}

@media (min-width: 992px) {

.container {

    width: 970px;

}

}

@media (min-width: 1200px) {

.container {

    width: 1170px;

}

}

bootstrap上用12列宽定义页面宽度:

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9,.col-xs-10, .col-xs-11, .col-xs-12, 

将页面分为12份;这样计算起来就比较方便;

但是bootstrap 有一个不足的地方是container和12个col-列宽都设置了padding和margin;这在做移动端时会出现很多问题;

所以一般在自己加样式之前把padding和margin清零:

*{margin: 0; padding: 0;}

html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,code,del,em,font,img,ins,small,strong,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend{margin:0;padding:0;}

body{ margin:0 auto; padding:0; border:0; }

ul,li,p,img{ padding: 0; margin: 0; }

这样设置手机,平板,中等屏幕和大屏的兼容性就非常高了 。

 另外 在适应IE各种兼容的方法 在<head>的下面加上一句

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

就能保证兼容性多半不会出现问题了 。

当在手机屏很小的时候,在电脑上显示的很多内容就不方便显示了;这时可以用一种方法:class=“hidden-xs”;

意思是在手机版的时候是隐藏的。这样在手机上就可以看不到了;

这样不管是编写移动端或是电脑版代码的时候都可以很好的适应了。


--597

文章关键词
bootstr兼容
页面布局
页面兼容
qq qq tel
服务热线:

134-1954-9128