Day16 CSS-自适应布局

媒体查询

使用 @media 规则制定一组样式的目标媒体类型（逗号分隔），以花括号确定范围。

视口：指一个设备能够显示的屏幕区域

在 head 标签中，输入 viewport 定义原标签（meta name="viewport"）

视口单位：
    vw：1vw等于视口宽度的1%
    vh：1vh等于视口高度的1%
    vmin：选取vm和vh中最小的那个
    vmax：选取vw和vh中最大的那个
视口单位和 % 的区别：
    视口单位是由视口尺寸的百分比来定义的
    %单位则是由父元素的百分比来定义的

实例：

// 在屏幕视口大于等于576px时，使用下面的样式设定
@media (min-width:576px) {
    .container {
        width: 540px;
        background-color: green;
    }
}

栅栏系统

bootstrap框架组件

是上面两个的综合组件，用法网上搜一下就行

网址：getbootstrap.com

一些免费 icon 的网站：

Font Awesome

标签：vh,布局,width,Day16,视口,1%,viewport,576px,CSS
来源： https://www.cnblogs.com/br0sy/p/16531952.html