响应式布局

设备划分	尺寸区间
超小屏幕（手机）	<768px
小屏设备（平板）	>=768px ~ 992px
中等屏幕（桌面显示器）	>=992px ~ 1200px
宽屏设备（大桌面显示器）	>= 1200px

可使用以下技术：

• viewport用户网页的可视区域
• 使用流体宽度，设置max/min-width，不使用固定宽度
• 媒体查询
• rem,em单位转换

一、媒体查询

在css样式中

@media(设置的屏幕尺寸){ //css样式设置 }

@media (min-width:??px) and (max-width:??px){ //css样式设置 } 

@media screen and (min-width:??px) and (max-width:??px){ //css样式设置 } 

检测屏幕宽度从而外联一个Css文件

<link media="screen and (min-width:??px)" href="..." />

二、rem,em换算

em——优先根据自身字体大小（font-size），如果没有则向上寻找最近的父元素或父盒子的字体大小进行换算（倍数相乘）

ps：有时候会出现换算嵌套的问题

rem——css3新增，相对于根元素html设置的字体大小设置换算（默认16px）

三、vw,vh单位

用户视窗的尺寸，可视窗口宽、高划分100份。

区别于百分比：

百分比是相对于元素的父祖先元素；

vw，vh相对于可视窗口。

 

tip：使用flex布局进行响应式设计会比较灵活、好用。