布局

June 26, 2018

固定布局

所有尺寸一律使用px

  • 优点：简单，无兼容性问题
  • 缺点：不能根据不同屏幕尺寸，有不同的表现

移动端也可采用固定布局

有两种方式

  1. viewport width 320 + initial-scale
    • 在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。
    • 通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。
  2. viewport width 640 + user-scale=no
    • 页面的各个元素也采用px作为单位
    • 由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏

viewport

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=640, initial-scale=1.0, user-scale=no" />
  </head>
</html>
  • width 控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
  • height 和 width 相对应，指定高度
  • initial-scale 初始缩放比例，也即是当页面第一次 load 的时候缩放比例
  • maximum-scale 允许用户缩放到的最大比例
  • minimum-scale 允许用户缩放到的最小比例
  • user-scalable 用户是否可以手动缩放

流式布局

网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用），例如，设置网页主体的宽度为80%，min-width为960px

这种布局缺点明显：宽度使用百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

弹性布局

包裹文字的各元素的尺寸采用em做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「固定布局」）

CSS编写者常常把body元素的font-size设置为62.5%（浏览器默认字体大小16px*62.5%=10px），这样1em便是10px，方便了计算。

使用了rem单位的弹性布局在移动端也很受欢迎。

其实，使用vw、vh等后起之秀的单位，可以实现完美的流式布局（高度和文字大小都可以变得“流式”），弹性布局就不再必要了。

响应式布局

随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，

但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。

Recent Posts