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)图片显示的优化处理

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

Flex box弹性布局 及 响应式前端设计的优化的更多相关文章

  1. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  2. viewport定义,弹性布局,响应式布局及LESS和SASS框架应用

    一,移动端宽度设置 viewport视图窗口,<meta name="viewport" content="width=device-width,initial-s ...

  3. [学习笔记]viewport定义,弹性布局,响应式布局

    一,移动端宽度设置viewport视图窗口,<meta name="viewport" content="width=device-width,initial-sc ...

  4. 浅谈静态布局、流式布局,rem布局,弹性布局、响应式布局

    静态布局: 特点:没有兼容性问题 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分:移动设备:另外建立移动网站,单独 ...

  5. 响应式web设计的优化

    在响应式网页的设计过程中,其中也会涉及到一些用户体验方面的问题和弊端,需要进一步的优化. (1)减轻Javascript库负载 对于移动端来说,jQuery表现的太过厚重,而现在针对移动端的状态来说, ...

  6. 响应式Web设计 H5和CSS3实战(第二版)随笔

    第一章 响应式设计基础 1.弹性布局 <meta name = "viewport" content = "width = device-width"&g ...

  7. 响应式WEB设计

    近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...

  8. FLEX 网格布局及响应式处理

    上一篇文章用Flex实现BorderLayout,这一章我们来实现常用的网格布局和响应式处理. 首先我们定义HTML结构,主Box为grid,每项为grid-cell,下面就是我们HTML代码结构. ...

  9. CSS3:布局display属性的flex(弹性布局)

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

随机推荐

  1. TF400324: Team Foundation services are not available from server…

    Quick Fix As a quick fix you can Close Visual Studio and related apps Browse to %LocalAppData%\Micro ...

  2. 在Ubuntu环境把PPT和Word转换为swf文件

    项目需要一个在线浏览文档的功能,于是参照网上的代码写了一份利用Microsoft Office 2010和swftools-2013-04-09-1007.exe转换的程序 思路:调用电脑本机的off ...

  3. Tomcat批处理文件小结

    Tomcat批处理文件小结 一:嗯,如果你不了解Windows批处理文件,并且想了解一下,请先参看下面的链接资源(我也是因为想了解一下Windows批处理文件是用什么写的?怎么写的?才在园中找的,下面 ...

  4. 008-Scala主构造器、私有构造器、构造器重载实战详解

    008-Scala主构造器.私有构造器.构造器重载实战详解 Scala主构造器实战 无参数的主构造器 分析 1.name 需要赋初值,一般通过占位符来代表空值 2.private 声明私有的age 生 ...

  5. XCode6.0的iOS免证书真机测试方法(MAC及黑苹果均有效)[转]

    目前在XCode上开发的iOS程序只能在模拟器Simulator中运行,如果要放到真机上测试,需要苹果官方认证的开发者账号,购买开发者证书iDP,99美金一年啊!!! 作为刚开始学习iOS编程的菜鸟, ...

  6. RHEL6.4编译安装企业级LAMMP平台

    一.LAMMP简介 二.使用软件及服务器架构说明 三.配置及安装过程    1.安装arp与httpd    2.安装mysql    3.安装php(php-fpm)    4.安装Xcache   ...

  7. javascript页面加载完执行事件

    <script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成 docum ...

  8. Python开发入门与实战21-订阅事件(subscribe)

    21. 订阅事件(subscribe) 新用户关注微信公众平台,将产生一个订阅事件,即subscribe事件,在新用户关注公众平台后为新用户提供一些简明扼要的公众号说明 事件推送(event): 接收 ...

  9. Why sql is called structured query language?1 - 12

    SQL has much to do with a researcher at IBM, Edgar F. (Ted) Codd, an Oxford-trained mathematician, w ...

  10. 使用JPype实现Python调用JAVA程序

    ''' Created on 2016年6月1日 @author: cero ''' import jpype jvmPath = jpype.getDefaultJVMPath() ext_clas ...