|
1.静态布局
最传统的布局方式，网页中所有尺寸都是由px作为单位，设置了min-width,如果宽度小于就会出现滚动条，如果大于这个宽度则内容居中外加背景。 布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。 实现方法： PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 实践案例：Float 布局、绝对布局 2.自适应布局 自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。 布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。 3.流式布局(又别名 百分比布局 %) 流式布局的特点是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。（栅格布局）。 网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。 布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。 主要案例： 左侧固定+右侧自适应 左右固定宽度+中间自适应 圣杯布局 原理：用相对定位、浮动、负边距布局、而不加任何标签 双飞翼布局 原理：中间设左右边距，左右设浮动、负边距归位，消除相对定位 4.响应式布局 通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样。利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。主要依靠是css的媒体查询。 布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。 5.弹性布局 (rem/em flex布局) 1. rem/em区别：rem是相对于html元素的font-size大小而言的，而em是相对于其父元素。 2. 使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。 3. 这类布局的特点是，包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」）。 4. 浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%， 5. 用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。 6. 使用rem单位的弹性布局在移动端也很受欢迎。 7. 其实在移动端使用所谓的弹性布局，是比较勉强的。 |
|
公众号
