移动端web app开发学习笔记
移动web和pc端web以及web app
移动web开发跟web前端开发差别很小，使用的技术都是html+css+js。手机网页可以理解成pc网页的缩小版加一些触摸特性。在浏览器中进行的网页开发，最终代码具有跨系统平台的特性。
web app开发特指的是用html5技术开发，之所以叫web app是因为它与客户端应用程序很相似，可以和系统深度融合，调用一些只有客户端才能调用的功能（利用html5开发出的网页可以访问电话、相机等功能）.
进行移动端web开发要在头部添加这样一段代码
<meta name="viewport" content="width=device-width,initial-scale=1,
user-scalable=no"/>
viewport 表示网页视口
width=device-width 网页宽度等于设备宽度
initial-scale =1 网页初始的缩放比例 为1（不缩放））
user-scalable 用户是否可以手动缩放
Flexbox（弹性布局）
原文链接：http://caibaojian.com/flexbox-guide.html
弹性布局（flexible box）模块（目前是w3c候选的推荐）旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。·
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。
最重要的是弹性盒子布局与方向无关，相对于常规的布局（块是垂直和内联水平为基础），很显然，这些工作以及网页设计缺乏灵活性，无法支持大型和复杂的应用程序（特别当它涉及到改变方向，缩放、拉伸和收缩等）。
注意： Flexbox布局是最合适的一个应用程序的组件，以及小规模的布局，而网格布局是用于较大规模的布局。
来源：前端开发博客
最常用的Flexbox设置
<style>
.box{
/*设置弹性布局*/
display:flex;
/*主轴方向的对齐方式*/
justify-content: space-around;
/*交叉轴方向的对齐方式*/
align-items:center;
heigth:300px;
border:1px solid purple;
}
.box div{
width:20px;
heigth:20px;
background-color:pink;
}
</style>
下面介绍一下Flexbox常用的六个属性
flex-direction属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。
- row：默认值。灵活的项目将水平显示，正如一个行一样。
- row-reverse：与 row 相同，但是以相反的顺序。
- column：灵活的项目将垂直显示，正如一个列一样。
- column-reverse：与 column 相同，但是以相反的顺序。
flex-wrap属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
- nowrap:默认值。规定灵活的项目不拆行或不拆列。
- wrap:规定灵活的项目在必要的时候拆行或拆列.
- wrap-reverse:规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
flex-flow复合属性。设置或检索弹性盒模型对象的子元素排列方式
- flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
- flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
- flex-direction 属性规定灵活项目的方向。
- flex-wrap 属性规定灵活项目是否拆行或拆列。
- 注意：如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用。
justify-content属性定义了项目在主轴上的对齐方式
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items属性定义项目在交叉轴上如何对齐
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
align-content在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。
| stretch |
默认值。元素被拉伸以适应容器。 各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。 在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。 |
|
| center |
元素位于容器的中心。 各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐， 保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容 边界与第最后一行之间的距离相等。 （如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。） |
|
| flex-start |
元素位于容器的开头。 各 行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性 盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。 |
|
| flex-end |
元素位于容器的结尾 各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该 弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。 |
|
| space-between |
元素位于各行之间留有空白的容器内。 各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该 值等效于'flex-start'。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的 侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界 ，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。 |
|
| space-around |
元素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果 剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下， 各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前 面及最后一行后面的空间是其他空间的一半。 |
下面来个实例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--设置视口-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>九宫格效果实现</title>
<style>
body{
margin: 0;/*设置边距，可以有1~4个值*/
}
/*box 设置为弹性盒模型*/
.box{
display: flex;
flex-wrap: wrap;/*设置换行*/
}
/*每个item 也设置为弹性盒模型*/
.box .item{
font-size: 14px;/*font-size属性设置字体大小*/
padding: 20px 0;/*padding属性设置内边距,此处为简写，上下填充20px，左右0*/
display: flex;
flex-direction: column;/*flex-direction属性规定灵活项目的方向,此处为垂直显示*/
align-items: center;/*align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。*/
width: 33.3333%;
box-sizing: border-box;/*设置盒子大小(边框以内为盒子的内容区大小)*/
border-right: 1px solid #eeeeee;/*设置边框线*/
border-bottom: 1px solid #eeeeee;
}
/*用nth-child(N)选择器去除3,6,9位置盒子的右边框*/
.box .item:nth-child(3n) {
border-right: none;
}
.box .item img{
margin-bottom: 10px;
width: 30px;
}
</style>
</head>
<body> <div class="box">
<div class="item">
<img src="icons/grid-01.png" alt=""/>
<span>美食</span>
</div>
<div class="item">
<img src="icons/grid-02.png" alt=""/>
<span>洗浴</span>
</div>
<div class="item">
<img src="icons/grid-03.png" alt=""/>
<span>结婚啦</span>
</div>
<div class="item">
<img src="icons/grid-04.png" alt=""/>
<span>卡拉OK</span>
</div>
<div class="item">
<img src="icons/grid-05.png" alt=""/>
<span>找工作</span>
</div>
<div class="item">
<img src="icons/grid-06.png" alt=""/>
<span>辅导班</span>
</div>
<div class="item">
<img src="icons/grid-07.png" alt=""/>
<span>汽车保养</span>
</div>
<div class="item">
<img src="icons/grid-08.png" alt=""/>
<span>租房</span>
</div>
<div class="item">
<img src="icons/grid-09.png" alt=""/>
<span>装修</span>
</div>
</div> </body>
</html>
效果图
移动端web app开发学习笔记的更多相关文章
- 高性能Cordova App开发学习笔记
高性能Cordova App开发学习笔记 文件结构 添加插件 构建准备 各个www的作用,prepare命令会将hello\www的内容会拷贝到platform下的wwww目录,知道该改哪里了吧?如果 ...
- 移动端web app开发备忘
近期要做个手机html5的页面,做些知识储备,重要的点记录下来以备兴许. 1.devicePixelRatio:定义设备物理象素和设备独立象素的比例.css中的px能够看作是设备的独立象素.通过dev ...
- Web前端开发学习笔记（一）
最近在复习Web前端的开发知识,于是就把大二上学期曾经学过的东西拿出来复习一遍,把自己在做曾经的作业时遇到有意义的点都记下来吧. Homework1:http://my.ss.sysu.edu.cn/ ...
- Web前端开发学习笔记（二）
Homework2:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+2+-+Movie+Review 这份作业跟布局相关,因此很多都是布局的知识: ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- 手机web app开发笔记
各位朋友好,最近自学开发了一个手机Web APP,“编程之路”,主要功能包括文章的展示,留言,注册登录,音乐播放等.为了记录学习心得,提高自己的编程水平,也许对其他朋友有点启发,特整理开发笔记如下. ...
- ASP.NET Core Web开发学习笔记-1介绍篇
ASP.NET Core Web开发学习笔记-1介绍篇 给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...
- Rest API 开发 学习笔记(转)
Rest API 开发 学习笔记 概述 REST 从资源的角度来观察整个网络,分布在各处的资源由URI确定,而客户端的应用通过URI来获取资源的表示方式.获得这些表徵致使这些应用程序转变了其状态.随着 ...
随机推荐
- nginx配置反向代理CAS单点登录应用
新增如下配置即可: location /cas { proxy_pass http://172.16.20.155:8080/cas; proxy_redirect default; proxy_re ...
- docker上传自己的镜像
https://blog.csdn.net/boonya/article/details/74906927 需要注意的就是命名规范 docker push 注册用户名/镜像名
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- Re.FFT
前言 上虽然算是学过了但是实质上还是根本什么都不会 看大佬们的模板去A了模题(手动滑稽) 于是下定决心要理解FFT的代码 一些的证明主要是从算法导论和两位大佬的博客上学的 大佬1 大佬2 在这过程中 ...
- CentOS7防火墙问题
CentOS6关闭防火墙使用以下命令, //临时关闭service iptables stop//禁止开机启动chkconfig iptables off CentOS7中若使用同样的命令会报错, s ...
- Java基础 -- 深入理解Java异常机制
异常指不期而至的各种状况,如:文件找不到.网络连接失败.非法参数等.异常是一个事件,它发生在程序运行期间,干扰了正常的指令流程.Java通 过API中Throwable类的众多子类描述各种不同的异常. ...
- @NotNull @NotEmpty @NotBlank区别
@interface NotNull The annotated element must not be {@code null}.Accepts any type.----------------- ...
- hello1源代码分析
hello.java: package javaeetutorial.hello1; //这是一个java包 import javax.enterprise.context.RequestScoped ...
- PageRank算法初探
1. PageRank的由来和发展历史 0x1:源自搜索引擎的需求 Google早已成为全球最成功的互联网搜索引擎,在Google出现之前,曾出现过许多通用或专业领域搜索引擎.Google最终能击败所 ...
- Spring Cloud中关于Feign的常见问题总结
一.FeignClient接口,不能使用@GettingMapping 之类的组合注解 代码示例: @FeignClient("microservice-provider-user" ...