关于小悟志网站地图归档友情链接联系Feed

云上小悟 + 

云上小悟CSS响应式布局实战代码

网站建设
2015年2月4日 / 163次阅读
标签:CSS

拍拍贷

文章《云上小悟CSS响应式布局实战代码》的特色图片

响应式布局的好处是可以让网页自动适应不同尺寸的页面,不管是PC,各种PAD,还是手机的小屏幕,网页显示自动去适应这些不同尺寸的屏幕,并达到良好的展示效果。

合理设置CSS的响应式代码参数,可以让网站自动变成手机站,PAD站,就不需要再去通过其他SITEAPP工具做站了,而且也无需重新设置一个手机站的二级域名(很多网站的手机站的域名是m.xxxx.com),可以让很多事情简化。

不多说,先上代码:

.mt-g {
display: -webkit-flex;
display: -moz-box;
display: -webkit-flex;
display: flex;
display: -ms-flexbox;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-flow: row wrap;
}

/* when screen < 568px. */
@media screen and (max-width: 35.5em) {
.small-hidden {
display: none;
}

.mt-u-sm-1 {
display: inline-block;
*display: inline;
width: 100%;
}
}

/* when screen > 568px and < 1024px, always 1-3. */
@media screen and (min-width: 35.5em) and (max-width: 64em) {
.mt-u-md-1-4 {
display: inline-block;
*display: inline;
width: 25%;
*width: 24.9690%;
}

.mt-u-md-3-4 {
display: inline-block;
*display: inline;
width: 75%;
*width: 74.9690%;
}

h1 {
font-size:24px;
}
}

/* when screen >=1024px, always 1-3-1 */
@media screen and (min-width: 64em) {
.mt-u-1-5 {
display: inline-block;
*display: inline;
width: 20%;
*width: 19.9690%;
}

.mt-u-3-5 {
display: inline-block;
*display: inline;
width: 60%;
*width: 59.9690%;
}
}

 

以上代码将显示网页的屏幕分成3中情况:

  1. 宽度大于等于1024px的情况;
  2. 568px到1024px之间的情况;
  3. 小于568px的情况;

不同尺寸,各种不同的CSS类会生效,让页面呈现不同效果。

特别注意:IE需要使用高本版,10+,低版本对以上flexbox代码的支持有问题。

本文链接:http://www.maixj.net/wz/css-xiangyingshibuju-2200
云上小悟 麦新杰(QQ:1093023102)

-- (*^-^*) --

相关文章

评论是美德

《云上小悟CSS响应式布局实战代码》有3条评论

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.

  • 麦新杰

    响应式的问题是,布放百度联盟的广告位还有些障碍。 [ ]

  • 现在开始响应式了! [ ]

    • maixj

      不是的,最早用的响应式,后来发现不行,现在改成固定尺寸了。这个代码是当时响应式的代码,留个备份。 [ ]


前一篇:
后一篇:

栏目精选


©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号苏ICP备14045477号-1

网站二维码
拍拍贷
go to top