标签：vh 布局 width Day16 视口 1% viewport 576px 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。