位置:深圳网站建设 > 网站知识 >

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

  近年来,响应式网站大行其道,网上也出现了很多响应式布局网站框架,如: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) {

}
主营业务:

名匠网络有多年的网站建设小程序开发SEO优化实战经验,帮助客户打造营销型网站,快速提升网站关键词排名,抢占搜索引擎流量,提高网站转化率,为客户带来更多的订单。

联系方式:
QQ:360764540
微信:jun360764540
  • 最新
  • 推荐
  • 热门