首页 > 代码库 > 移动Web - 响应式布局开篇
移动Web - 响应式布局开篇
用到的工具：
- FireFox浏览器
- Sublime Text 2
2010年，Ethan Marcotte提出，可查看原文；
通俗地讲就是：百份比布局，根据不同设备显示不同布局；
这次主要解决：传统的固定像数(px)相比：
- 不同显示设备，使用不同布局。例如：PC屏幕，显示3栏；手机，显示为1栏；用到media query(媒体查询)，它的用法，例如：
- @media screen and (min-width: 481px) ：屏幕最小481px，即大于481px适用；
- @media screen and (max-width: 480px) ：屏幕最大480px，即小于480px适用；
- @media print and (monochrome)：打印机，黑白，适用；
- 宽度使用百份比，横屏与竖屏会自动伸缩；
先看看原始素材的效果，原始素材下载：
PC屏幕，3栏显示如下：
手机屏，显示不全：
先看看html的结构：
CSS里对应使用固定像数，这为了简单，只关注布局相关的CSS:
实现PC显示3栏，手机显示1栏的CSS：
.header {background:url(images/w.png) no-repeat;height: 200px;}.navigation {min-height: 25px;}.header, .navigation, .footer {clear: both;} @media screen and (min-width: 481px){body, .header, .navigation, .footer {width: 960px;}.column {margin: 10px 10px 0 0;}.navigation ul li {width: 320px; /* 960/3 */}#visit {width: 240px;float: left;}#points {width: 240px;float: right;}#main {margin: 10px 260px 0 250px;width: 460px;}}@media screen and (max-width: 480px){body, .header, .navigation, .footer {width: 320px;}.column {margin: 10px 0;/*红色分割线*/border-bottom: 1px dashed red;}.navigation ul li {width: 106.67px; /* 320/3 */}#visit,#points,#main {width: 320px;}}
PC显示效果没变；
手机显示效果，变为了1栏，竖向滚动，这就是移动Web开始。
这里出现了横向滚动条，因为图片撑大了。
最后一步，将里面的宽度像数转为百份比，并控制图片大小不撑大父元素：
.header {background:url(images/w.png) no-repeat;height: 200px;}.navigation {min-height: 25px;}.header, .navigation, .footer {clear: both;} @media screen and (min-width: 481px){body, .header, .navigation, .footer {width: 100%;}.column {margin: 10px 1.042% 0 0;}.navigation ul li {width: 33.33%; /* 960/3 */}#visit {width: 25%;float: left;}#points {width: 25%;float: right;}#main {margin: 10px 27.083% 0 26.042%;width: 47.92%;}} @media screen and (max-width: 480px){body, .header, .navigation, .footer {width: 100%;}.column {margin: 10px 0;border-bottom: 1px dashed red;}.navigation ul li {width: 33.33%; /* 320/3 */}#visit,#points,#main {width: 100%;}}img, object{max-width: 100%;}
手机横屏效果：
全文完！
移动Web - 响应式布局开篇
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。