响应式布局
设置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%, 图片永远不会大于其原始大小
背景图片响应式调整大小或缩放
- 如果 background-size 属性设置为 “contain”,背景图片将按比例自适应内容区域。图片保持其比例不变。
div {
width: 100%;
height: 400px;
background-image: url('img_flowers