css网页响应式布局

1. 其他布局

1. pc和移动端分离：写两套页面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。
2. 定宽定高居中显示：大屏两端留白，小屏会有滚动条

2. 响应式布局

响应式开发一套界面，通过检测视口分辨率，不同客户端显示不同的布局和内容

3. 响应式布局方案

1. 媒体查询

根据浏览器宽度或高度的不同，渲染不同的样式

1. 直接写样式 手机（<768）
2. min-width:768px 平板（>=768）
3. min-width:992px 中等屏幕即（>=992）
4. min-width:1200px 大屏幕即（>=1200）

2. 百分比

根据浏览器宽度或高度的不同，显示不同百分比的宽度或高度的样式；如在视口宽度小于768px时，div宽度为100%；当视口宽度>=768px即min-width：768px时，div宽度为80%

1. width、padding（上下左右）、margin（上下左右）：百分比相对于直接父元素的宽度
2. height：直接父元素的高度
3. border-radius、background-size、translate：自己
4. left、right：相对于直接非static定位(默认定位)的父元素的宽度
5. top、bottom：相对于直接非static定位(默认定位)的父元素的高度
6. 相对的计算属性不是唯一的，计算比较困难

3. rem

根据浏览器宽度或高度的不同，重置html元素的font-size的大小，来改变rem的大小，从而影响以rem为单位的元素的大小来实现响应式布局

1. rem相对于html元素的font-size大小
2. em相对于父元素font-size大小
3. 假设设计图为750px，将其分成7.5份，即 750/7.5= 100；得到rem = font-size = 100，750px为7.5rem，所以设计图量出来为100px，就是1rem
4. 不同的设备宽度，都分成7.5份，总宽度都是7.5rem， 不同设备上rem代表的大小不同，从设计图上量出来的px转换成对应的rem，同样的rem都分别占据各自设备的相同比例的大小，就可以在不同设备上实现响应式布局

1. 共7.5份，即总宽度为7.5rem
2. 每份100px = 1rem，px：rem = 100:1，即设计图上量出的100px为1rem
3. font-size = 1rem = 100px

4. iphone6上

1. device-width（即设备独立像素）为375px
2. 屏幕像素比（即物理像素与逻辑像素的比值）为2
3. 所以用于显示界面的大小（即设备屏幕的物理像素，即屏幕可以显示的像素点，分辨率）为750px；
   

4. 视口单位vw、vh

1. vw：相对于视口宽度，1vw等于1%的视口宽度，即视口宽度为100vw
2. vh：相对于视口高度，1vh等于1%的视口高度，即视口高度为100vh
3. vmin：vw和vh中的较小值
4. vmax：vw和vh中的较大值
5. 使用vw布局：假设设计图为iphone6的750px，则padding可以设置为 padding:(x/750)*100vw,x为量出来的长度