138-2322-3182

巧妙设计网站响应式布局css

发布时间:2018-07-28 11:07:03发布者:金格网络

  近年来,响应式网站大行其道,网上也出现了很多响应式布局网站框架,如:bootstrap,Amaze等,但是这些框架体积都很大,会严重影响网站加载速度,如果你只是建企业网站或其他简单的网站,那这些框架就显得太臃肿,还是自己写响应式布局css最好,今天,深圳网站建设金格互联教您怎么:巧妙设计网站响应式布局css。

  一:设置reset.css,去掉html标签的默认css

@charset "utf-8";
/* reset.css */

/* 禁用iPhone中Safari的字号自动调整 */
html {
-webkit-text-size-adjust: none;
}

/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,  section{
	display:block;
}

/* 设置图片视频等自适应调整 */
img {
max-width:100%;
height:auto;
width:auto\9; /* ie8 */
}
.video embed, .video object, .video iframe {
width:100%;
height:auto;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote
 a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	outline:0;
	background:transparent
}
fieldset, img {
	border: 0;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
address, caption, cite, code, dfn, em, th, var, optgroup {
	font-style: normal;
	font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
abbr, acronym {
	border: 0;
	font-variant: normal;
}
input, button, textarea, select, optgroup, option {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
}
code, kbd, samp, tt {
	font-size: 100%;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
 *font-size: 100%;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
}
sup, sub {
	font-size: 100%;
	vertical-align: baseline;
}
/* remember to highlight anchors and inserts somehow! */
:link, :visited, ins {
	text-decoration: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

  二:把网页布局分为12列,布局的每一块的宽度都用百分比设置。

/*所有列设置左浮动*/
[class*="col-"]{
    float:left;
    padding:15px;
}
 /*每一个行清除浮动 */
.row:after{
     content:"";
    display:block;
     clear:both;
}
/*每一行分十二列,设置每列的响应百分比*/
.col-1{width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}
.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}
.col-7{width:58.33%;}
.col-8{width:66.66%;}
.col-9{width:75%;}
.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}

  三:使用@media screen设置每个具体响应式布局css,如下常用于稍微复杂的基本响应,基本可以满足所有大小尺寸的屏幕显示了。

@media all and (min-width:1200px){
...

}

@media all and (min-width: 960px) and (max-width: 1199px) {
...
}
/*平板设备*/
@media all and (min-width: 768px) and (max-width: 959px) {
...
}
/*移动设备*/
@media all and (min-width: 480px) and (max-width: 767px){
......

}

@media all and (max-width: 479px) {

}