学习笔记——响应式布局

---

为了让代码能够在不同的网页上显示，并且能够给用户很好的体验。一般要是用响应式布局的技术。它能根据设备大小自动调整内容。响应式布局包括以下内容： 

1.媒体查询： 

通过媒体查询可以让不同CSS代码生效。

@media screen and (-webkit-min-device-pixel-ratio: 1) {} /*设备像素比*/

媒体查询可以根据设备像素比显示不同大小的图片。

2.宽高少用绝对长度单位：

在响应式布局中宽高尽量使用百分比或者相对长度单位。一般使用vw，vh

vw（viewport width）：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一。宽度/屏幕总宽度*100vw

vh（viewport height）：基于视窗的高度计算，1vh 等于视窗高度的百分之一。

微信小程序使用rpx。

$screenWidth: 375;
@function px2vw($px) {
        @return $px / $screenWidth * 100vw;
}

3.字体使用相对长度单位：

字体响应式布局使用相对长度单位：如rem

em：em相对于父元素的大小。如果父元素没有定义，会向上找到其祖先元素的字体大小。浏览器html的默认大小为16px

rem：相对于html中font-size的大小。浏览器html的默认大小为16px。

微信小程序使用rpx。

html {
    font-size: 16px;
}

/* 设置span标签字体大小为24px */
span { font-size: 1.5rem; }

 4.弹性布局：

在页面布局方面，一般使用弹性布局。弹性布局天生响应式。display: flex;开启弹性布局。

 5.float:

float + div也可以实现一些响应式布局。

6.栅格系统： 

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 

---

响应式布局的好处是对于样式的控制可以十分精细，缺点是控制不同设备布局的样式是写在一起的，开发和修改不太方便。