-
移动开发
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
白羽
2018-06-26
来源 ：网络
阅读 1539
评论 0
摘要：本文将带你了解WebApp开发之前端布局的方式，希望本文对大家学WEBAPP有所帮助。
响应式布局：
在上一篇文章中先介绍了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端）都能够完美的去显示。
我们先来规划一下html结构如下：
[html] view plain copy 1. <!DOCTYPE html> 2. <html lang="zh-CN"> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 6. <title>响应式布局</title> 7. </head> 8. <body> 9. <div> 10. <header class='pyc pyc_header'> 11. <div class='pyc_content clearfix'> 12. <div class='clearfix pyc_imlink pyc_left'> 13. <button type='button' class='pyc_content_btn'> 14. <span class='icon_bar'></span> 15. <span class='icon_bar'></span> 16. <span class='icon_bar'></span> 17. <span class='icon_bar'></span> 18. </button> 19. <a class='pyc_brand pyc_left'><img src='m/images/logo_s.png'></a> 20. </div> 21. <nav class='pyc_collapse pyc_right'> 22. <ul class='pyc_navul'> 23. <li class='active'><a>登陆</a></li> 24. <li><a>注册</a></li> 25. <li><a>反馈</a></li> 26. <li><a>忘记密码</a></li> 27. </ul> 28. </nav> 29. </div> 30. </header> 31. </div> 32. </body> 33. </html>
上面我将整个页面用一个div包围起来，然后用html5的header标签标示头部。进而头部中包含一个大的div，这个div下分为左右两部分，一部分是logo另一部分是菜单，这两部分用float布局，logo部分又分为两部分（纯logo、分辨率小于768后的菜单按钮），同样是用float进行布局。
整体思路如下：
1.设置meta标签的viewport属性
2.左侧logo+菜单按钮利用float进行布局，并且在分辨率大于768时候隐藏菜单按钮。
3.右侧用float：right，在分辨率小于768时候隐藏
4.整体容器不设置宽度，但是可以设置最小最大宽度
[css] view plain copy
1. body{
2. background-color: #fff;
3. margin:0;
4. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
5. font-size: 14px;
6. line-height: 1.428571429;
7. color: #333333;
8. }
9. html {
10. <span style="white-space:pre;"> </span>font-size: 62.5%;
11. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
12. }
13. .clearfix {
14. *zoom: 1;
15. }
16.
17. .clearfix:before,
18. .clearfix:after {
19. display: table;
20. line-height: 0;
21. <span style="white-space:pre;"> </span>content: "";
22. clear:both;
23. }
24. .pyc {
25. position: relative;
26. z-index: 1000;
27. min-height: 50px;
28. margin-bottom: 0;
29. border: 1px solid transparent;
30. }
31. @media (min-width: 768px){
32. .pyc {
33. border-radius: 4px;
34. }
35. }
36. .pyc_header {
37. text-shadow: 0 -1px 0 rgba(0,0,0,.15);
38. background-color: #5C4E35;
39. border-color: #dd9201;
40. box-shadow: 0 1px 0 rgba(255,255,255,.1);
41. margin-bottom: 0px;
42. }
43. .pyc_content{
44. margin:auto;
45. }
46. @media(min-width:768px){
47. .pyc_content{
48. <span style="white-space:pre;"> </span>max-width: 750px;
49. }
50. }
51. @media(min-width:992px){
52. .pyc_content{
53. max-width: 970px;
54. }
55. }
56. @media(min-width:1020px){
57. .pyc_content{
58. max-width: 1000px;
59. }
60. }
61. .pyc_collapse{
62. margin:0;
63. padding-right:0;
64. max-height:380px;
65. padding-left:15px;
66. overflow-x: visible;
67. border-top: 1px solid transparent;
68. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
69. -webkit-overflow-scrolling: touch;
70. display:none;
71. }
72. .pyc_imlink{
73. margin-left:0;
74. margin-right:0;
75. }
76. ul{
77. list-style-type: none;
78. padding:0;
79. margin:0;
80. }
81. .pyc_navul>li>a{
82. position:relative;
83. display:block;
84. padding:10px 15px;
85. color:#fff;
86. }
87. .pyc_navul>.active>a{
88. background-color: #dd9201
89. }
90. a{
91. cursor:pointer;
92. }
93. .pyc_navul{
94. margin:7px -15px;
95. }
96. @media(min-width:768px){
97. .pyc_collapse{
98. display: block !important;
99. height: auto !important;
100. padding-bottom: 0;
101. overflow: visible !important;
102. width: auto;
103. border-top: 0;
104. box-shadow: none;
105. }
106. .pyc_right{
107. float:right !important;
108. }
109. .pyc_left{
110. float:left;
111. }
112. .pyc_navul{
113. float:left;
114. margin:0;
115. }
116. .pyc_navul>li{
117. float:left;
118. }
119. .pyc_navul>li>a{
120. padding-top:15px;
121. padding-bottom:15px;
122. }
123. .pyc_content_btn{
124. display:none;
125. }
126. .pyc_brand{
127. margin-left:-15px;
128. }
129. }
130. .pyc_content_btn {
131. border-color: #5C4E35;
132. position: relative;
133. float: right;
134. padding: 9px 10px;
135. margin-top: 8px;
136. margin-right: 15px;
137. margin-bottom: 5px;
138. background-color: transparent;
139. border: 1px solid transparent;
140. border-radius: 4px;
141. }
142. .pyc_content_btn:hover{
143. background-color: #756c48;
144. cursor:pointer;
145. }
146. .icon_bar {
147. display: block;
148. width: 22px;
149. height: 2px;
150. border-radius: 1px;
151. background-color: #ffffff;
152. margin-bottom:2px;
153. }
154. .pyc_brand{
155. <span style="white-space:pre;"> </span>padding:2px 15px;
156. }
157. .pyc_brand>img{
158. height:40px;
159. }我将元素在pc以及移动端下显示的写作公共的样式，然后根据分辨率去判断，如果分辨率最小是768（也就是说分辨率大于768）就用@media(min-width:768px)里面属性去代替外面公共的。否则执行外面公共样式。
具体效果大家可以拷贝下来浏览器中去查看，然后放大缩小浏览器大小即可看到不同效果。
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！
喜欢 | 0
不喜欢 | 1
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
