响应式布局与流式布局

响应式布局

设置Viewport

<meta name="niewport" content="width=device-width,initial-scale=1.0">

width：控制viewport的大小

height：和width相对应

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放

---

方向：横屏/竖屏

orientation：portrait | landscape

portrait：指定输出设备中的页面可见区域高度大于或等于宽度

landscape：除portrait值情况外，都是landscape

---

图片

如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小

背景图片响应式调整大小或缩放

1. 如果 background-size 属性设置为 “contain”,背景图片将按比例自适应内容区域。图片保持其比例不变。

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers