首页 > 代码库 > 响应式布局二
响应式布局二
现在响应式布局用得比较大众的应该是Bootstrap,但是我并不打算使用。原因很简单,我对Bootstrap不熟悉不了解。然后 我简单的看了下Bootstrap是怎么实现的响应式布局。原理很简单,就是使用到了CSS3中的media。media何方神圣?可以用来吃吗?它可以针对不同的媒体类型定义不同的样式,也可以针对不同的屏幕尺寸设置不同的样式。且当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。既然如此,响应式何愁。
在可视区域的宽度小于 600px 的时候被应用。
@media screen and (max-width: 600px) { .class { background: #0094ff; } }
在可视区域的宽度大于600px 的时候被应用。
@media screen and (min-width: 600px) { .class { background: red; } }
简单?对,就是如此简单。您还可以 在600到900直接的启用。
@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #0094ff; } }
响应式布局二
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。