响应式页面
1.响应式的概念
随着多种终端兴起,多种规格的页面需要向用户展示。让多种终端打开页面时展示的都是相同内容,但布局更适合当前终端。
响应式也叫"自适应"页面,根据当前设备的浏览器,视口(可视区域)变化,使用媒体查询规则,将不同宽度的css写入,来改变页面变化。
2.设备的宽度设置
如果写响应式或者移动端,必须有以下标签,必须有!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width 视口宽度等于设备宽度
initial-scale=1.0 初始化视口不缩放
3.媒体查询
媒体查询@media 给与媒体类型(可省默认pc,移动) 给与宽度范围。
宽度范围,也叫“断点”。
4.设计响应式断点
在开发中可能使用框架做响应式,也可能自己手写响应式断点。
/* 手机 */
@media (max-width:480px) {
body {}
}
/* 手机横屏和pad竖屏 */
@media (min-width:480px) {
body {}
}
/* pad横屏和平板 */
@media (min-width:768px) {
body {}
}
/* 平板和小分辨率pc */
@media (min-width:980px) {
body {}
}
/* 普通屏幕pc */
@media (min-width:1200px) {
body {}
}
/* 超大屏pc */
@media (min-width:1400px) {
body {}
}
5.相对视口的尺寸单位
参照vw代表视口的宽度单位,参照vh代表视口的高度单位。参照物是浏览器可视区域的比例大小0-100,可视区域不包括任务栏,底部工作栏,浏览器地址栏。
1vw == 视口宽度的1% 100vw == 整个视口宽度
1vh == 视口高度的1% 100vh == 整个视口高度