静态布局、流式布局、自适应布局、响应式布局、弹性布局

  • 静态布局:

特点:没有兼容性问题

PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;
移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如wap.或m.

  • 流式布局:

特点:屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。

设计:使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围


/* device-width为屏幕的输出宽度 */
  • 自适应布局

特点:屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化

设计:使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式

  • 响应式布局

设计:媒体查询+流式布局

1.设置 Meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2.通过媒介查询来设置样式 Media Queries

@media screen and (max-width: 980px) {
  #head {}
  #content {}
  #footer {}
}
  • 弹性布局(rem/em布局)

包裹文字的各元素的尺寸采用em/rem做单位,可以使包裹文字的元素随着文字的缩放而缩放;

而页面的主要划分区域的尺寸仍使用百分数或px做单位。

你可能感兴趣的:(html,css,js学习笔记)