响应式布局简介
2015-09-21 09:47
246 查看
1.什么是响应式布局?
简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。--来源百度百科
参考网址 http://www.cnblogs.com/lhb25/archive/2013/03/06/making-a-website-responsive-in-3-easy-steps.html
2.怎样实现响应式布局
现在响应式布局用得比较大众的应该是Bootstrap,但是我并不打算使用。原因很简单,我对Bootstrap不熟悉不了解。然后 我简单的看了下Bootstrap是怎么实现的响应式布局。原理很简单,就是使用到了CSS3中的media。media何方神圣?可以用来吃吗?它可以针对不同的媒体类型定义不同的样式,也可以针对不同的屏幕尺寸设置不同的样式。且当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。既然如此,响应式何愁。3.media的简单使用
Max Width:在可视区域的宽度小于 600px 的时候被应用。@media screen and (max-width: 600px) { .class { background: #0094ff; } }
Min Width:在可视区域的宽度大于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; } }
当然,您还可以,放入单独文件。爽歪歪了吧。
<link rel="stylesheet" media="screen and (max-width: 600px)" href="max600.css" />
默认样式 显示 移动端:
.blog_body_e.col-xs-12 .a_blog_user { display: inline-block; } .blog_body_e, .blog_body_b { padding-left: 10px; padding-right: 10px; }
如果是PC端:(默认 大于992px就算是PC端 当然,你也可以自定义)
@media (min-width: 992px) { .blog_body_e.col-md-3 .a_blog_user { display: block; } .blog_body .blog_body_b { width: 80%; float: left; } .blog_body .blog_body_e { width: 20%; float: left; box-sizing: border-box; padding-right: 25px; } .blog_body_e, .blog_body_b { padding-left: 20px; padding-right: 20px; } }
相关文章推荐
- 解决axis2处理java.util.Date类型对象时丢弃时间部分的问题
- <C/C++算法> 图论基础算法小结(邻接矩阵实现)
- Linux下的一些I/O统计工具
- 题目:复制带随机指针的链表
- 洛谷1220关路灯
- Java Log4j配置说明
- 学习笔记02
- Spring MVC异常统一处理(包括普通请求异常以及ajax请求异常)
- 大数据笔记11:MapReduce的运行流程
- poipdfsolr学习相关网址
- Java中List<>的用法
- Node.js 笔记(一) nodejs、npm、express安装
- 滋阴
- linux ssh 使用深度解析(key登录详解)
- 新提交审核app保留检查更新入口将被拒绝(读取App Store 版本号的)
- 合唱队问题的修正
- 省市县三级联动实现代码
- Android 深入理解Android中的自定义属性
- java 监听器ServletContextListener,服务启动加载及定时器
- Android UI之TextView