Flex box弹性布局 及 响应式前端设计的优化

Flex box弹性布局

Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局、实现垂直等高、水平均分、按比例划分,可以实现许多我们之前做不到的自适应布局。如果你希望网站能以webapp的外观呈现在手机用户面前,那么,Flex box就是个不错的方式。Flex box和APP的结构很类似,头部底部全部固定,而中间部分的高度实现自适应。

应用于父元素上:

1、display:flex/inline-flex

2、flex-wrap:nowrap/wrap/column/column-reverse  是否换行

3、flex-direction:row/row-reverse/column/column-reverse  横着还是竖着显示

4、flex-flow:flex-direction|flex-wrap 复合元素

5、justify-comtent:flex-start/flex-end/center/space-between/space-around 水平方向对齐方式

6、align-items:flex-start/flex-end/center/baseline/stretch 纵轴对齐方式

7、align-content:flex-start/flex-end/center/space-between/space-around/stretch   在换行情况下,纵轴对齐方式

应用于子元素上

1、order:<integer>用数据值来定义排列顺序,数值越小的排在前面(可以为负值)

2、flex-grow:<number>(default 0)设置uo检索弹性盒的扩展比率(不允许负值)

3、flex-shrink:<number>(default 1)收缩比例(超出最大范围)

4、flex-basis:<length>|auto(default auto)(不允许负值)

        <percentage>用百分比来定义宽度(不允许负值)

5、flex:none|flex-grow||flex-shrink||flex-basis 复合属性

6、align-self:auto|flex-start|flex-end|center|baseline|stretch  检索自身在侧纵轴方向上的对齐方式

注意注意:在设置弹性盒子的时候css不起作用的属性:

1、float、clear、vertial-align

优化  响应式前端设计的优化。主要针对用户体验的改进。

(1)减轻Javascript库负载

对于移动端来说,jQuery表现的太过厚重,而现在针对移动端的状态来说,有jQuery Mobile、YUI、XUI等可供选择的框架。

(2)减少HTTP请求次数

移动端相比较PC端有一个特殊的限制需要考虑到,就是用户的网络流量是有限的。这时候针对这些页面内部的部分操作,可以使用Ajax异步请求来完成,针对短期内不会变化的一些数据,可以使用服务器端缓存、前端缓存等机制来保存这些数据,这样可以减少用户一定的数据请求量。

(3)Javascript和CSS需要尽量压缩

把页面中使用的Javascript和CSS进行压缩之后会有效地减少页面大小。

(4)用CDN管理页面资源

CDN的即内容分发网络,意在尽可能避开互联网上有可能影响数据传输速度和稳定性的环节,使内容传输的更稳定。

(5)列表图片实现“懒”加载

移动终端设备因为屏幕大小有限,没有必要将全屏中的图片一次性加载完成,网页加载的同时,我们可以选择逐个加载,当用户进行滑动页面的时候,再继续加载图片。

(6)图片显示的优化处理

根据用户设备的分辨率来加载不同分辨率下的不同图片,这样既能给不同终端的用户一个很好的视觉体验,又不会白白浪费用户的网络数据流量。

上一篇:Bitmap旋转方法


下一篇:Android之单选框