关于布局

2017-02-17 本文已影响0人 _二向箔_

这里说的布局，不是指如何设计页面更加美观，而是简单介绍一下前端开发中常用到的一些布局方法。

又称为固定布局，简单理解是页面所有的元素的尺寸都是固定的。当浏览器宽高有调整时，页面上的元素大小不变，这时候会使用横线和纵向滚动条来查阅被遮盖的部分内容。这种布局是最简单的，也没有兼容性问题。但却不能根据用户的屏幕做出不同的调整。

主要是伸缩盒布局，flexbox ，一般都是采用宽度百分比配合css3的 flex 属性来划分大小。当页面的大小改变时，页面上的元素位置不会发生改变，而整个页面上的元素大小会随着页面的改变而改变。当然，也可以设置换行，使宽度到达一定的时候布局做出稍微的调整。

也就是说，当页面大小改变时，页面上的元素的位置会发生相应的变化，而元素的大小不变。

页面中的元素的尺寸是按百分比来设置的，随着页面大小的改变，位置不发生改变。其缺点是，高度和文字大小大多都是用px来固定的，若屏幕太大或太小，会导致看不清或图片文字被拉伸而失真的现象。不适合pc端与移动端的转化。

分别为不同分辨率的屏幕布局，同时也应用流式布局进行调整。确保一个页面在所有终端上都能显示出令人满意的效果。

主要应用到媒体查询来控制屏幕大小不同的不同布局
使用rem作为单位来定义元素的尺寸大小（在根元素<html>中定义了一个基本字体大小为62.5%，那么html里面的元素的单位就是1rem=10px）
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

写的不好的地方，望指正探讨！