移动webApp大前端（二）

来源：互联网发布：战争程序员白濑第二季编辑：程序博客网时间：2024/05/14 13:14

响应式布局：

在上一篇文章中先介绍了viewport以及媒体标签的用法，利用viewport检测当前运行环境浏览器视口大小，然后用@media进行有针对性的编写样式。

接下来我们继续深入一起探讨webApp的必备之---响应式布局：

sorry，先缓一缓，我们先来说一下webApp吧，算是对上一篇的补充。

webApp区别于传统web开发，也有别于应用App。它是伴随智能手机的普及而流行的一种网站/网页浏览。

目前智能手机内置的浏览器内核基本都是webkit所以大可以不必考虑浏览器兼容性，而且最重要的是可以应用html5以及css3去做一些html4无法或者很难做到的事情，因为浏览器肯定支持。

webApp最大的好处就是程序网站运行在标准浏览器中，而标准浏览器的兼容性以及对html、css、javascript支持都是最佳的。这样我们可以利用css3进行圆角阴影等设置，利用storage进行本地存储数据

webApp区别于传统web开发：

webApp多利用客户端去操作一些应用（javascript）后台仅仅考虑处理数据，前端负责剩余的事情。而传统web开发一般都是后台负责数据+页面构造。

webApp与nativeApp（应用App）区别：

前者是基于浏览器的网站性质开发。本质与传统web开发并无区别。后者是基于平台（ios、andior）进行开发；前者开发成本低升级维护方便，后者效果绚丽，可以上架出售（appstore）；前者不需要下载安装，后者需要用户下载安装并占用内存。

根据目前趋势来看webApp虽然是一个新型的开发模式，但随着浏览器的升级标准化以及移动设备多元化必将占有很重要位置。

而且随着应用越来越五花八门，网络越来越方便，用户就会越来越少的去下载应用，从而省出内存去试试一下其他使得移动设备运行畅通的渠道。

ok，我们了解了webApp然后就可以静下心来不用担心我们探讨的话题没什么意义了，继续响应式布局：

在进行编写css布局时候，我们尽量不要把容器宽度定死，因为那样就很难去做到“响应“效果了。

简单来说响应式布局采用的是媒体查询、流式布局以及液态图片三种技术。它们组合在一起会使得页面在不同的设备（包括pc端）都能够完美的去显示。可以先看看一些响应式布局的例子：

http://www.mediaqueri.es；

http://www.unitedpixelworkers.com；

举两个例子而已，更多响应布局可以互联网一搜一大片。

我们先来实现以下如下图的效果：

pc端显示：

分辨率减小时候移动端显示如下：

点击右边按钮显示菜单最终效果如下：

上面第一个图是在分辨率大于768显示样式，第二三个是在分辨率小于768显示样式。

我们先来规划一下html结构如下：

<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>响应式布局</title></head><body><div><header class='pyc pyc_header'><div class='pyc_content clearfix'><div class='clearfix pyc_imlink pyc_left'><button type='button' class='pyc_content_btn'><span class='icon_bar'></span><span class='icon_bar'></span><span class='icon_bar'></span><span class='icon_bar'></span></button><a class='pyc_brand pyc_left'><img src='m/images/logo_s.png'></a></div><nav class='pyc_collapse pyc_right'><ul class='pyc_navul'><li class='active'><a>登陆</a></li><li><a>注册</a></li><li><a>反馈</a></li><li><a>忘记密码</a></li></ul></nav></div></header></div></body></html>

上面我将整个页面用一个div包围起来，然后用html5的header标签标示头部。进而头部中包含一个大的div，这个div下分为左右两部分，一部分是logo另一部分是菜单，这两部分用float布局，logo部分又分为两部分（纯logo、分辨率小于768后的菜单按钮），同样是用float进行布局。

整体思路如下：

1.设置meta标签的viewport属性

2.左侧logo+菜单按钮利用float进行布局，并且在分辨率大于768时候隐藏菜单按钮。

3.右侧用float：right，在分辨率小于768时候隐藏

4.整体容器不设置宽度，但是可以设置最小最大宽度

body{background-color: #fff;margin:0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.428571429;color: #333333;}html {font-size: 62.5%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.clearfix { *zoom: 1;}.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";clear:both;}.pyc {position: relative;z-index: 1000;min-height: 50px;margin-bottom: 0;border: 1px solid transparent;}@media (min-width: 768px){.pyc {border-radius: 4px;}}.pyc_header {text-shadow: 0 -1px 0 rgba(0,0,0,.15);background-color: #5C4E35;border-color: #dd9201;box-shadow: 0 1px 0 rgba(255,255,255,.1);margin-bottom: 0px;}.pyc_content{margin:auto;}@media(min-width:768px){.pyc_content{max-width: 750px;}}@media(min-width:992px){.pyc_content{max-width: 970px;}}@media(min-width:1020px){.pyc_content{max-width: 1000px;}}.pyc_collapse{margin:0;padding-right:0;max-height:380px;padding-left:15px;overflow-x: visible;border-top: 1px solid transparent;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);-webkit-overflow-scrolling: touch;display:none;}.pyc_imlink{margin-left:0;margin-right:0;}ul{list-style-type: none;padding:0;margin:0;}.pyc_navul>li>a{position:relative;display:block;padding:10px 15px;color:#fff;}.pyc_navul>.active>a{background-color: #dd9201}a{cursor:pointer;}.pyc_navul{margin:7px -15px;}@media(min-width:768px){.pyc_collapse{display: block !important;height: auto !important;padding-bottom: 0;overflow: visible !important;width: auto;border-top: 0;box-shadow: none;}.pyc_right{float:right !important;}.pyc_left{float:left;}.pyc_navul{float:left;margin:0;}.pyc_navul>li{float:left;}.pyc_navul>li>a{padding-top:15px;padding-bottom:15px;}.pyc_content_btn{display:none;}.pyc_brand{margin-left:-15px;}}.pyc_content_btn {border-color: #5C4E35;position: relative;float: right;padding: 9px 10px;margin-top: 8px;margin-right: 15px;margin-bottom: 5px;background-color: transparent;border: 1px solid transparent;border-radius: 4px;}.pyc_content_btn:hover{background-color: #756c48;cursor:pointer;}.icon_bar {display: block;width: 22px;height: 2px;border-radius: 1px;background-color: #ffffff;margin-bottom:2px;}.pyc_brand{padding:2px 15px;}.pyc_brand>img{height:40px;}

我将元素在pc以及移动端下显示的写作公共的样式，然后根据分辨率去判断，如果分辨率最小是768（也就是说分辨率大于768）就用@media(min-width:768px)里面属性去代替外面公共的。否则执行外面公共样式。

具体效果大家可以拷贝下来浏览器中去查看，然后放大缩小浏览器大小即可看到不同效果。

多谢捧场，如果疑问欢迎指教。

0 0