-
- 1.flex布局
-
2.正padding+absolute布局实现右边压缩,左边不可压缩,兼容ie8
-
- 3.负margin+absolute实现左右两边都压缩,兼容ie8
-
4.onresize事件
=====================================================================
响应式布局是一种兼容pc、移动端等多种终端的样式布局。即根据屏幕的大小自适应布局,或者变化布局样式,(屏幕在拉伸时显示不同的效果比如一行布局变多行布局)。
1. viewport技术
viewport是pc端和移动端公用一套代码的重要神器。常遇到如下代码:
<meta name=“viewport” content=“width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no”">
viewport的属性如下:
| width | 设置layout viewport 的宽度,为一个正整数,或字符串"width-device" |
| — | — |
| initial-scale | 设置页面的初始缩放值 |
| minimum-scale | 允许用户的最小缩放值 |
| max