赞
踩
什么是移动web: 就是运行在手机浏览器里面的web应用程序(网页) 虽然和网页是一样的 , 但是现代的web特别是移动web已经不再是简简单单的网页了 而是实现了和APP一样的功能 所以现代的网页已经可以称之为应用程序了
移动端的浏览器:
常见的移动web应用程序: 淘宝触屏版 京东手机版 苏宁手机版 携程手机版 小米手机版等等 这些都是在手机端浏览器运行的应用程序
如何区分什么是网页什么是应用程序
应用程序是指运行时多数为了实现某个功能,就像网站的后台,网站更侧重于前台的美观展示。
移动web应用程序都有什么特点
移动web的发展历史
理解响应式开发的原理
如何判断和改变布局方式
媒体查询的语法
@media(条件){
//条件成立执行的代码
}
条件通常有3种写法
width:1200px; 表示屏幕宽度等于1200 条件成立
min-width:1200px; 表示屏幕宽度大于等于1200 条件成立
max-width:1200px 表示屏幕宽度小于等于1200 条成立
如果有多个条件可以使用 and相连
@media(条件) and (条件2){
//条件成立执行的代码
}
条件成立执行的代码就是普通的CSS 代码 里面写选择{属性:值} 的方式 当条件成立就会执行这个CSS样式
媒体查询条件的判断顺序
min-width的写法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0px; padding: 0px; /*设置盒模型包含边框*/ box-sizing: border-box; } .col { height: 100px; float: left; border: 1px solid red; } /*如果有多个条件 可以用 and连接*/ @media (min-width: 768px){ /*和CSS一样写选择器和属性 和值*/ .col { width: 50%; } } /*如果有多个条件 可以用 and连接*/ @media (min-width: 992px) { /*和CSS一样写选择器和属性 和值*/ .col { width: 33.33%; } } @media(min-width: 1200px) { /*和CSS一样写选择器和属性 和值*/ .col { width: 25%; } } /*如果有多个条件 可以用 and连接*/ @media (max-width: 768px) { /*和CSS一样写选择器和属性 和值*/ .col { width: 100%; } } /* 由于CSS有层叠性 如果都写min-width 大于等于生效的判断 小屏幕的判断 和 大屏幕的判断同时生效 比如屏幕宽度1400 肯定大于1200 肯定大于 992 和 768 3个条件都满足 但是由于CSS层叠性 1200 最上面 992 第二 768 第三 768把前面的样式都覆盖 希望 1200 把 992 和 768 覆盖 */ /* 写媒体查询条件的时候 如果 使用min-width 大于等于做判断 应该把条件从小到大写 让大屏幕样式把小屏幕样式覆盖 向下覆盖*/ </style> </head> <body> <div class="row"> <div class="col">div1</div> <div class="col">div2</div> <div class="col">div3</div> <div class="col">div4</div> </div> </body> </html>
max-width的写法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Document</title> <style> * { margin: 0px; padding: 0px; /*设置盒模型包含边框*/ box-sizing: border-box; } .col { height: 100px; float: left; border: 1px solid red; } @media(max-width: 1200px) { /*和CSS一样写选择器和属性 和值*/ .col { width: 33.33%; } } /*如果有多个条件 可以用 and连接*/ @media (max-width: 992px) { /*和CSS一样写选择器和属性 和值*/ .col { width: 50%; } } /*如果有多个条件 可以用 and连接*/ @media (max-width: 768px) { /*和CSS一样写选择器和属性 和值*/ .col { width: 100%; } } /*如果有多个条件 可以用 and连接*/ @media (min-width: 1200px) { /*和CSS一样写选择器和属性 和值*/ .col { width: 25%; } } /* 由于CSS有层叠性 如果都写max-width 小于等于生效的判断 小屏幕的判断 和 大屏幕的判断同时生效 希望小屏幕生效 例如 750宽度 max-width:1200; max-width:992; max-width:768; 大家都成立希望生效 768最小那个 需要把最小768判断写在最后面把前面2个覆盖 */ /* 写媒体查询条件的时候 如果 使用max-width 小于等于做判断 应该把条件从大到小写 让小屏幕样式把大屏幕样式覆盖 向上覆盖*/ </style> </head> <body> <div class="row"> <div class="col">div1</div> <div class="col">div2</div> <div class="col">div3</div> <div class="col">div4</div> </div> </body> </html>
框架帮你封装好了响应式的功能 你只需要使用框架提供的类名既可实现响应式布局
常见的响应式开发框架
bootstrap: 引导程序 引导你开发程序
1. 2011 推特公司2个前端开发出来的框架 后面开源了之后有很多贡献者 一起参与开发形成了一个大型UI框架
2. Bootstrap框架: 代码比较优雅 结构很规范 代码也很规范 框架生态圈好 使用和开发维护框架的人很多
3. Bootstrap的好处: 让我们快速开发页面 更方便更快捷
下载bootstrap (推荐下载生产环境的bootstrap)
bootstrap-3.3.7-dist
如果下载整个源码需要解压使用里面的dist目录里面的代码
引入bootstrap
引包规范
移动web: 移动端(手机端)打开网页网站
移动web 已经不仅仅实现内容显示 而更多偏向应用 能够提升上网体验 生活体验 称之为应用程序了
移动web: 包含了网页(暂时只学习网页网站) APP 微信小程序公众号 内嵌页面
移动端浏览器: 都是webkit内核 兼容性少
移动web的开发方式
响应式开发原理
响应式开发框架: 为了让响应式开发更简单快捷
使用bootstrap
bootstrap文档
布局容器
栅格系统
常用的样式 组件 插件
搭建微金所项目
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。