美文网首页随手笔记
前端布局分类

前端布局分类

作者: 4d47248ee88f | 来源:发表于2017-08-21 13:58 被阅读40次

前端布局分类大致分为以下:

1. 固定布局

以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸

2. 自适应布局与响应式布局

自适应布局也叫可切换的固定布局,同样以像素作为页面单位,使用@media 媒体查询给主流设备不同尺寸,设计几套不同宽度的布局,切换不同的样式。可以给适配范围内的设备最好的体验,但是在同一个设备下实际还是固定的布局。是在你知道你的用户将会使用哪些设备而进行的有针对性的设计。例子 http://sports.163.com(网易体育)      自适应960 1200二档视口

响应式布局。自适应暴露出一个问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上查看,内容过于拥挤,响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计,布局和展示的内容可能会有所变动。针对所谓普遍设备进行的页面设计,并不是针对指定的浏览设备(boostrap,amazeui)。包含自适应,多媒体查询,100%流动布局,rem。http://www.apple.com/cn/ Apple(apple中国)

使用 em 或 rem 单位进行相对布局。避免了根据 px 布局在高分辨率下几乎无法辨认的缺点,又相对 % 百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示。需要一段时间适应而且不易从其他布局转换过来,但几乎是目前最好的布局方式。

em:

如果一个div有18px字体大小,10em将等同于180px,即10 × 18 = 180。

CSS设置padding为10em,浏览器解析出来的值为180px(或接近它)

有一个比较普遍的误解,认为em单位是相对于父元素的字体大小。 事实上,它们是相对于使用em单位的元素的字体大小。父元素的字体大小可以影响em值,但这种情况的发生,纯粹是因为继承。(css是有继承性的。一个div中包含2个p标签,1个span标签,当给div设置字体颜色为红色时,他的子标签会继承父元素的属性,因而会显示红色。 在CSS中以text-、font-、line- 开头的属性都是可以继承的。)

rem:

http://www.cnblogs.com/well-nice/p/5509589.html

流动布局:

使用 % 百分比进行相对布局。可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

3. 弹性布局

flex:

flex( flexible box:弹性布局盒模型)。使用 CSS3 Flex 系列属性进行相对布局。对于富媒体和复杂排版的支持非常强大,但是还未普及并且兼容性较差。

http://www.jianshu.com/p/0abc609ef4a3

http://www.runoob.com/w3cnote/flex-grammar.html

http://caibaojian.com/flexbox-guide.html

4. 浮动布局

Flexbox最新一版的规范,对于Android 2.3的支持,连最简单的多行商品按顺序排列,都实现不了。

块级元素如果没有给高度,那么高度是由子元素还有padding值撑起来的,当left和right浮动之后脱离了文档流,不再占据页面空间,所以它们的父级的高度只有padding值。

http://www.qdfuns.com/notes/22387/e68c648a82cd1dd32f251a62e33b7ea0.html

相关文章

  • 前端布局分类

    前端布局分类大致分为以下: 1.固定布局 以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸 2....

  • web面试汇总

    《前端面试常见问题按知识点分类整理》 《CSS 中布局终极方案》面试中经常遇到的面试题之一,居中布局,特来总结 《...

  • 前端

    前端页面布局前端页面布局——三栏布局 - magi的博客 - CSDN博客 页面高度,位置简述前端页面内的高度、位...

  • 前端技能

    HTML 常用标签/分类/属性 标签的分类 CSS 布局:position、float 响应式布局:rem布局(移...

  • CSS布局篇之二

    之前写过布局但是没有给一个具体的分类,这一篇重新补上。 布局其实就是衡量一个前端开发者对css的掌握程度,也是面试...

  • 前端网站5种布局

    前端基本布局分大致5种,table布局,float 布局,absolute布局,flexbox布局,grid布局。...

  • CSS基本布局整理

    前言 css布局是前端开发必须掌握的基本内容,前端学习之css基本布局整理。 基本布局 左右布局 div结构: f...

  • 布局分类

    正是因为 PC端上的浏览器大小会经常被改变,而且改变的范围还很大,用户会全屏浏览器,用户也会缩小浏览器到一个很小的...

  • vue后台管理系统实践方案总结

    这个是一个电商管理系统的前端项目的笔记,这个项目主要包括登录/退出功能、主页布局、用户管理模块、权限管理模块、分类...

  • 前端技能

    HTML 常用标签/分类/属性 标签的分类 语义化标签 CSS 布局:position、float 响应式布局:r...

网友评论

    本文标题:前端布局分类

    本文链接:https://www.haomeiwen.com/subject/sdxwpttx.html