[Bootstrap]bootstrap的简单原理 - 不坠青云之志

[Bootstrap]bootstrap的简单原理

BOOTSRAP是2010年五月份提出的一个CSS库的前端框架,就目前越来越追求前端的运行效率的背景下,引用Bootstrap框架越来越臃肿,目前都是借鉴Bootstrap框架由程序员手写出比较适合当前项目的代码.

响应式页面实现的四大核心要素

1.viewport;计算当前设备的可视区域的大小

　　用法:<meta name="viewport" content="width=device-width">

　　width设置当前页面的宽度 device-width:当前设备的宽度

　　height设置当前页面的高度,用到的机会很少

　　user-scale设置是否允许用户缩放

　　initial-scale设置页面初始化的缩放比例

2.绝对单位改为相对单位

　　宽度由像素值(px)修改为百分值(%);

　　字体由像素值(px)修改为相对大小(em);

　　图片有像素值(px)修改为百分值(%);

3.网格布局

　　将HTML页面宽度等分为12列

　　修改盒子模型为IE的怪异盒子模型

　　*{box-sizing: border-box;}

　　在标准下盒子模型中(*{box-sizing :content-box}):

　　　　　一个块的总宽度=width+padding+border+margin;

　　IE怪异盒子模型中

　　　　　一个块的总宽度=width+margin;(即width中已经包含padding和border)

4.媒体查询

　　1.<link media="媒体类型 操作符 (媒体属性)" href="" rel="stylesheet">

　　媒体类型:当前是什么设备

　　　　.screen屏幕(高度和宽度)

　　　　.print:打印机

　　　　.all:所有设备

　　操作符:

　　　　and-逻辑与

　　　　not-逻辑非

　　　　only-逻辑唯一

　　媒体属性

　　　　width:宽度

　　　　min-width:最小宽度

　　　　max-width:最大宽度

　　2.在CSS中定义样式:

　　　　@media 媒体类型 操作符 (媒体属性){CSS样式}

　　　　eg:

　　　　　　PC:

　　　　　　　　@media screen and (min-width: 992px){
    　　　　　　　　footer>div  {
        　　　　　　　　width: 24%;
    　　　　　　　　}
}
PAD:

　　　　　　　　@media screen and (min-width: 768px) and (max-width: 991px){
    　　　　　　　　footer>div  {
        　　　　　　　　width: 48%;
    　　　　　　　　}
}
PHONE:

　　　　　　　　@media screen and (max-width: 767px){
    　　　　　　　　footer>div  {
       　　　　　　　　 width: 98%;
    　　　　　　　　}
}

发表于 2018-03-03 01:31 不坠青云之志 阅读(3218) 评论(0) 编辑收藏举报