#原创# 前端布局基础及移动端运用的思考

目录:

  1. 历史及发展变化
  2. Html5的新结构元素
  3. 基于Css的布局之道
    • 考虑屏幕分辨率
    • 关于布局的几个名词
    • 基本布局样式属性
  4. 其他布局相关
    • CSS框架
    • 人类阅读舒适度的考虑
    • Css具体属性创建的目的与后期使用时和意义偏离的思考

1)历史及发展变化1

1991年第一个网页的诞生只有简单的文字及链接,涉及应用的元素较少且简单,后来设计师们发现table能更好的展现网页内容于是表格布局时代出现。

随着,w3c规范的提出,出现了块级元素和内联元素的定义,2000年后进入div布局时代;截至目前,大多数页面布局都是基于div和css2实现的。

如今,迎来了Html5+Css3的时代,一些布局通过简单的标签及属性就能实现,但还存在一定的浏览器内核支持及兼容性差异,可以根据实际开发情况酌情运用(比如columns[文章多列]如今就适用于移动端浏览器2)。

思考??:

一个重要的知识点,结构和样式相辅相成共同构成布局。截止目前发展情况来看Webkit内核对css3支持较好,通过现在手机市场的占有率报告分析,不难看出绝大部分手机浏览器都采用的Webkit内核,这使得移动端产品能实践更多Css3效果,同时Css3属性的新尝试为前端开发带来很多便利。

2)Html5的新结构元素3

<header>,结构主体头部/文章标题(强调这是一篇文章的标题头);

<nav>,标记一些链接的集合体,常用作导航条/边栏链接等,具有导向性质的链接处都可使用;

<section>,表示一块区域,书中的某一章节/网页某个工作区等;

<article>,代表一个独立的、完整的相关内容块;

<aside>,用来表示标记、侧栏、摘要、引用等常用补充内容;

<footer>,结构主体结尾部分;

思考??:

相较于前两个布局阶段,布局的结构标签从单一的table,div 到如今的多个结构标签,使得布局更加语义化的同时,我们也不得逆向思考这样布局是否也会因为太过于强调结构语义化而在Css灵活性布局上有所束缚(这里可以做一个深入思考)?

3)基于Css的布局之道

——3.1 考虑屏幕分辨率

在以前进行页面布局时是以800*600的分辨率为基准设计,随着大屏幕显示器的普及开始基于1024*768的基准,一些较出名的css框架(如960Grid)都是基于1024宽度下最完美的960px进行设计的,微软于2007年开始基于1024标准做设计基础,苹果2008年开始改版也以1024为设计基础(这些都是4:3的屏幕比例),这种固定像素的布局方式有一个严重的缺陷——更低分辨率下将隐藏一部分显示空间,出现横向滚动条;如今已经进入宽频时代(大部分比例为16:9),该方式又凸显了另一个不足——更高分辨率下将浪费一部分显示空间(白屏区域增大)。而Web应用需要注重空间的使用问题,所以100%满屏的布局方式更适合这样的需求。

——3.2 关于布局的几个名词4

固定布局(Fiexd)-以像素为单位对网页进行布局的方式;无论窗口如何改变内容宽度始终保持不变;存在一定局限,如1024的宽在800下出现横向滚动条(上面有提到)…

流式布局(Fluid)-以%百分比进行宽度设计的布局方式,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率;往往配合 min/max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

弹性布局(Elastic)-使用 em 或 rem 单位进行相对布局,相对 % 百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示。 因为em是相对父级元素的原因没有得到广泛推广。

响应式布局(Responsive)- 使用@media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。

自适应布局( Adaptive)-通常使用 @media 媒体查询和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。自适应几乎已经成为优秀页面布局的标准。

弹性盒布局模型(Flexible Box)5- CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作,用来为盒状模型提供最大的灵活性。截止目前为止,该布局模型在主流浏览器中都得到了支持。

由于弹性盒模型规范本身有过多个不同的版本,因此浏览器对于该规范的支持也存在一些不一致。浏览器一共支持 3 个不同版本规范的语法:

* 新规范:最新版本规范的语法,即"display: flex"。

* 中间版本:2011 年的非官方规范的语法,即"display: flexbox"。

* 老规范:2009 年的规范的语法,即"display: box"。

弹性盒布局模型的浏览器支持——

思考??:

站在解决问题的角度,传统的布局最优方式采用自适应布局综合其他布局模式以快速实现产品目标为目的;在合适的项目上使用新技术手段实现不失为一个更高效的方式,Flex布局在移动端的支持目前可以考虑逐步在开发中运用。

——3.3 基本布局样式属性

定位(position):

static -默认值(不设置时),此时top/right/bottom/left无效;

绝对定位(absolute)-相对于该对象父级为relative的对象位置左上角定位,如果直到最上层body未出现relative,就相对于浏览器的左上角定位;

相对定位(relative)-相对于该对象原本该出现的位置左上角定位;

固定定位(fixed)-元素固定住浏览器可视区域不会随其他元素滚动。

浮动(float)7

常用于多列布局;因使用浮动后对象会脱离文档流,所以为保障布局正常要对使用浮动后紧跟的对象进行清除浮动操作;初始时用于图片使文本环绕,css中任何元素都可以应用浮动,浮动元素自身生成一个块级框,再不设置宽度的前提下宽度由内容支撑。

none -默认值,元素不浮动;

left -向左边浮动;

right -向右边浮动;

inherit -继承父级浮动。

外边距(margin):

申明元素四边外边距的值,设置方向依次top/right/bottom/left(顺时针),允许使用负值;块级元素垂直方向相邻外边距会自动合并,內联元素设置上下边距无效,浮动元素外边距不会合并。

内边距(padding):

申明元素四边内边距的值,设置方向同上,允许使用负值;內联元素垂直方向相邻内边距会自动合并,浮动元素内边距不会合并,内边距值不计算在元素设置的宽度內。

边框(border):

申明四边边框的宽度/样式/颜色,也可以单独设置某一边框;內联元素为文字内容多行时,设置边框会重合且视觉凌乱。

display6

在传统的布局方式中,我们常常会用到display对应值有block、none、inline这三个值;block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列,none用于隐藏。

单位8(以下只涉及部分常用单位):

* px,相对于显示器屏幕而言(windows用户分辨率一般为96像素/英寸)

* em,相对于当前对象内文本的字体尺寸而言(任意浏览器默认字号16px,所以1em=16px,10px=0.625em,以此我们就可以利用此公式换算出设置具体宽度)

* rem,Css3引入的新字体尺寸单位,它是相对于根节点(或者是html节点)的font size而言的

?? 初始设置font-size:62.5%;不可用于PC端环境9,对谷歌浏览器来说,默认小于12像素的字体大小依然以12px显示,所以62.5%会有问题;而移动端webkit浏览器支持是设置小于12px字体的。

flex10

采用Flex布局的元素,称为Flex容器(flex container)。它的所有子元素自动成为容器成员,称为Flex项目(flex item)。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

?? 设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

?? 目前安卓自带浏览器对flex的支持为4.4+版本,就截止3月份谷歌发布的市场占有率来说4.1-4.3差不多占有20%左右,随着时间推移不断下降中,新版本的占有率逐步升高。

思考??:

通过以上了解我们可以知道css布局方式因运用不同结构和属性而改变,但目的只有一个就是更适用于当前生产的需要。了解学习了布局的这知识后,根据开发的产品,自行结合生产实际考虑使用哪一种(或中和使用);例如弹性盒模型,因现代浏览器支持较好,所以移动端开发就显得适用。

4)其他布局相关

——4.1 CSS框架11

CSS框架是一种能够使用在你的web项目中概念上的结构,是别人已经写完的而且很完善的Css定义集合。960Grid是基于网格系统的Css布局框架,只要遵守一些简单的规则(其实就是class类),你就能快速设计出960px宽度的网页结构来。

——4.2 人类阅读舒适度的考虑

研究表明,通常认为每行大概65~75个字符是最适合的阅读长度;这样在设计布局时存在一些限制,也导致网站无法充分利用宽屏所赋予的机会。多年来,经过杂志和报纸的不断实践,使用多列布局让内容流动起来,这种布局解决了长文本的处理以及如何把许多材料放到有限的空间的问题。(还有借鉴书籍的排版设计与舒适阅读的关系????这里有时间可以单独讨论及研究一下)

——4.3 Css具体属性创建的目的与后期使用时和意义偏离的思考

一个属性(或物品,概念等)被广泛使用是因为它解决了大部分人当下面临的问题,并受到推荐和再运用。一个最初的项目在其发展过程中很可能偏离开始的意义,我认为这并不一定是坏事儿,取决于这个项目好坏可以参考它的出现为大众的接受认可度以及广泛使用。我理解的创新就是为解决问题而存在,不断创新就是不断提升解决问题的效率。总结一个重要的点就是,为当前生产解决问题且有效率优质的解决问题。如果是这样那无论它最初是什么目的及意义结果时接受者受益就是好的。仁者见仁,智者见智。

参考:

1《大巧不工-Web前端设计修炼之道》章节3.2/3.4(2,4)/3.5(2)/5.1

2“columns-css3速查手册” http://www.css88.com/book/css/properties/multi-column/columns.htm

“手机浏览器有哪几种内核标准” http://dwz.cn/3e89zx

3“HTML5中div、article、section的区别及使用介绍” http://edu.cnzz.cn/201308/922645d5.shtml

4“web app 自适应方案总结 关键字 弹性布局之rem” http://www.cnblogs.com/breakdown/p/4231708.html

“web app变革之rem” http://isux.tencent.com/web-app-rem.html

5“深入理解 CSS3 弹性盒布局模型” http://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox//

6“display属性参考手册” http://www.css88.com/book/css/properties/layout/display.htm

7“css-float浮动的深入研究、详解及拓展一” http://dwz.cn/1k76fK

“css-float浮动的深入研究、详解及拓展二” http://dwz.cn/3jLW9q

8“CSS长度值与单位” http://www.css88.com/book/css/values/length/index.htm

“CSS中的em属性之弹性布局” http://www.jb51.net/css/77406.html

“CSS3新的字体尺寸单位rem” http://www.cnblogs.com/mguo/archive/2013/03/08/2949451.html

9“中文版Chrome浏览器不支持小于12px的字体大小” http://www.cnblogs.com/longgel/archive/2010/03/29/1699426.html

“Chrome浏览器不支持12px以下字体的解决方案” http://www.cnblogs.com/dyllove98/archive/2013/08/04/3237042.html

10“Flex 布局教程:语法篇” http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

“我就是要用CSS实现” http://www.alloyteam.com/2016/01/let-see-css-world/

11“CSS框架960Grid” http://blog.chinaunix.net/uid-22414998-id-2878529.html

时间: 2024-10-09 09:27:52

#原创# 前端布局基础及移动端运用的思考的相关文章

Web前端攻城狮培养计划之前端小白入门:网页布局基础与常见网页特效

步骤1: HTML基础超文本标记语言(英文缩写:HTML)是为"网页创建和其它可在网页浏览器中看到的信息"设计的一种标记语言,为搭建网页结构做出第一步.本阶段主要介绍了HTML的语法基础.表格.表单.等标签,并有案例结合,达到学以致用. 第1课 HTML基础HTML是网页制作必备技能,在本课程主要介绍HTML概念.语法及常用基础标签 第2课 HTML表格表格在网页中用于数据和排版,本课程介绍表格概念.语法.操作,并通过案例掌握知识. 第3课 HTML表单表单用于收集用户信息,本课程介绍

[原创]zepto打造一款移动端划屏插件

最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服 正好项目内需要一个划屏插件,就用zepto写了一个 逻辑其实很简单,但没想到测试时,在老版本android设备浏览器上的touchmove有许多bug 做兼容倒是搞了一阵 效果图 样式1 样式2 调用 正常情况下应该是后台生成的html代码,但还是写了一套操作tab页的方法 调用简便如下: <link rel="stylesheet" hr

常用前端布局,CSS技巧介绍

常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. 在这个地方可以使用padding来实现,首先,元素的高度=height+padding*2+border*2;所以我们可以将widht设置为0, 然后用padding来实现盒子的高度(若元素padding的值是一个百分比,则是基于其父元素的宽度来计算的) width: 50%; height: 0;

前端总结&#183;基础篇&#183;CSS

前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;}  /* IE8+ */body {margin:0;}  /* 去除边距 */ul {margin:0;padding-left:0;}  /* 去除边距和左填充 */li {list-style-type:none;}  /* 去除列表的圆点 */a {text-decoration:none;}  /* 去除下划线 */ 2 浏览器前缀 { tran

前端开发基础学习—1

前端开发的学习还没有找到很好的入门点,就做些题吧. http://www.cnblogs.com/jQing/archive/2012/07/01/2571987.html 第一部分:用CSS实现布局 让我们一起来做一个页面 首先,我们需要一个布局. 请使用CSS控制3个div,实现如下图的布局. 第二部分:用javascript优化布局 由于我们的用户群喜欢放大看页面 于是我们给上一题的布局做一次优化. 当鼠标略过某个区块的时候,该区块会放大25%, 并且其他的区块仍然固定不动. 提示: 也许

前端工程师基础培训_问答(139邮箱)

一.问答题: (1)139邮箱资源服务器与缓存相关的响应首部是怎么配置的? (2)登录139邮箱web2.3,在浏览器有缓存的情况下,刷新页面,浏览器会不会重新发送请求获取静态资源?如果会,请列出与缓存相关的请求首部以及响应状态码:如果不会,请说明原因. (3)请指出Cache-Control与Expires的区别 (4)新功能上线后,如何清空浏览器的缓存,让用户获取最新的资源文件? 问题1.问题2 可用Fiddler抓包然后截图说明. 二.编程题: 请写一个页面,并封装相应的JS代码,完成13

[转载]前端工程——基础篇

特别声明:本文转载@云龙的<前端工程——基础篇>,感谢@云龙的分享. 喂喂喂,那个切图的,把页面写好就发给研发工程师套模板吧. 你好,切图仔. 不知道你的团队如何定义前端开发,据我所知,时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位,虽然身份之争多少有些无谓,但我对这种偏见还是心存芥蒂,酝酿了许久,决定写一个系列的文章,试着从工程的角度系统的介绍一下我对前端,尤其是Web前端的理解. 只要我们还把自己的工作看作为一项软件开发活动,那么我相信读过下面的内容你也一定会有所共鸣. 前端,是

浅谈前端性能优化(移动端)

上一篇讲了PC端的部分:前端性能优化(PC端),这次继续说移动端的.相对于PC端的,移动web浏览器上有一些明显的特点:设备的屏幕小.新特性兼容性较好.支持一些比较新的HTML5和CSS3.需要与Native应用交互等.但移动端可用的CPU资源和网络资源极为有限,因此要做好移动端web上的优化往往需要考虑做更多的事情.首先在移动web的前端页面渲染中,PC的优化规则同样适用,此外针对浏览器也要做一些更细节的优化达到更好的效果.需要注意的是,并不是移动端的优化在PC端不适用,而是由于兼容性的原因,

前端工程——基础篇

# 前端工程--基础篇 > 喂喂喂,那个切图的,把页面写好就发给研发工程师套模板吧. 你好,切图仔. 不知道你的团队如何定义前端开发,据我所知,时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位,虽然身份之争多少有些无谓,但我对这种偏见还是心存芥蒂,酝酿了许久,决定写一个系列的文章,试着从工程的角度系统的介绍一下我对前端,尤其是Web前端的理解. 只要我们还把自己的工作看作为一项软件开发活动,那么我相信读过下面的内容你也一定会有所共鸣. ## 前端,是一种GUI软件 现如今前端可谓包罗万象