1. 说明
移动网页开发跟pc网页开发，虽是一脉相承，却也存在着代沟。为了让传统web网页开发人员快速适应移动网页开发，特制订此文档。同时本文档 起到简化移动网页布局复杂度和约束和规范公司开发移动网页的作用。
<p >此文档可能随着经验的积累和项目的推进会有变化。</p>
本文档共有以下几个部分：
- 说明
- 传统网页布局与移动网页布局差异
- 盒模型
- Flex布局
- css 属性裁剪
- html元素的支持
- 示例
2.传统网页布局与移动网页布局差异
两者的差异并不大，甚至可以说后者是前者的子集。
传统网页开发可能在布局上考虑的更多的是浏览器的差异，而移动网页布局考虑的更多的是屏幕尺寸和分辨率的差异。
可以从我们公司的首页和用一个我编写的demo看到差异
公司首页
移动网页布局
图中的箭头是我需要调整的部分。
3.盒模型
css 盒模型
支持的css样式包含：
- border
- border-*
- border-*-*
- border-*-*-*
- height
- width
- padding
- padding-*
- margin
- margin-*
在一些较复杂布局下可以支持：
- min-height
- min-width
- max-height
- max-width
但不建议使用。
4.Flex布局
4.1设置成flex布局
请自觉使用下面的代码
.box{ display:flex; display: -webkit-flex; }
4.2 flex概念
flex布局
. 主要有主轴(main axis)，和交叉轴(cross axis)
. 主轴的起点叫main start，结束叫main end
. 交叉轴起点则叫cross start，结束则叫 cross end
如需详细了解请移步阮老师的博文
下面是能够用在父容器的样式属性：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
下面是用在子元素上的样式属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
4.3 flex-direction属性
flex-direction的值有：
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
相对应的布局图如下：
4.4 flex-wrap属性
默认情况下，项目都排在一条主轴上。flex-wrap可以设置是否“换行”
常用的值有：
nowrap(不换行，默认) | wrap（换行） | wrap-reverse（换行，在此行上面）;
4.5 flex-flow
flex-flow是flex-direction和flex-wrap的和写，写法为下：
.box { flex-flow: <flex-direction> <flex-wrap>; }
4.6 justify-content属性
justify-content属性值：
flex-start | flex-end | center | space-between | space-around
效果如下图：
4.7 order
order属性定义子元素的排列顺序。数值越小，排列越靠前，默认为0。
4.8 flex-grow
flex-grow属性定义子元素的放大比例。默认为0，即父容器有剩余空间时，也不进行放大。
4.9 flex-shrink
flex-shrink属性定义子元素的缩小比例，即当父容器空间不足时，子元素进行缩小。
4.10 flex-basis
flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
4.11 flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
用法如下：
flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;
4.12 align-self
align-self属性重写父容器align-items属性，如果没有父容器，则相当于值设置为stretch。
此属性的值为：
auto | flex-start | flex-end | center | baseline | stretch
在移动网页布局中如非必要，不建议使用align-self属性。
5. css 属性裁剪
为了简化移动网页布局，提高代码质量，方便前端代码检视，特对css3属性进行裁剪。
5.1 位置相关
position，值为absolute，absolute，relative，static
left
right
top
bottom
5.2 颜色相关
可以使用英文表示的颜色值，如red，blue
可以使用rgb表示颜色，如rgb（220，220,220）
可以使用十六进制表示的颜色，如#eee或者#eeeeee
可以使用渐变颜色
5.3 边框相关
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
5.4 文字相关
font-family
color
white-space
text-decoration
letter-spacing
font-size
font-style
font-weight
line-height
text-align
word-wrap
word-spacing
overflow
text-overflow
5.5 背景相关
background
background-color
background-image
background-repeat
background-attachment
background-position
6 html元素的支持
支持的元素有：
a
form
input
img
button
select
label
canvas
audio
source
video
ul
li
ol
dl
dt
dd
div
p
span
meter
h1-h6 需要重写样式
网友评论