响应式布局
设备划分 | 尺寸区间 |
超小屏幕(手机) | <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布局进行响应式设计会比较灵活、好用。