本文共 3185 字，大约阅读时间需要 10 分钟。

视口

设备：

屏幕：PC ~screen 手机端 打印机~print 屏幕阅读器 尺寸： 常见尺寸 320-420之间

响应式网页：同一个网页，在不同的条件下，使用不同的样式。

rem/百分比 网页：等比例缩放方式。

【注】

使用min-width时，通常将小的条件放在前面。 使用max-width时，通常将大的条件放在前面

实现方式：

内嵌式 格式：@media 设备名 逻辑关键词（and ，（逗号） not）（条件）{ 样式； }

屏幕设备宽度大于等于1200px时生效 */@media screen and (min-width: 1200px){
       body{
           background-color: brown;    }}

外链式:

通过link标签引入样式，再通过media属性设置样式引用的条件。

逻辑关键字

and 满足多个条件 , 多个条件中满足一个条件 not 逻辑非 只要不满足条件就会生效。

设备方向：

opientation 属性可以定义设备的方向            portrait 竖屏设备  高度大于宽度            landscape 横屏设备 宽度大于高度

常见的查询特性：

orientation    landscape portrait        width          设备的宽度        height         设备的高度        min-width      最小宽度        max-width      最大宽度        min-height     最小高度        max-height     最大高度

    
       
              
       1223   

栅格化系统(插件bootstrap)

首先需要下载bootstrap的css源码

bootstrap 的栅格系统 ： 把一行(每个容器)均分为12列； 每一列都是使用百分比

栅格参数：（屏幕划分的临界点的值）

大屏 ：  >= 1200px      容器的固定宽度  1170px    预定义一个类名： col-lg-*        中等屏幕 : >= 992px       容器的固定宽度  970px      预定义一个类名： col-md-*         小屏幕 : >= 768px        容器的固定宽度  750px     预定义一个类名： col-sm-*        超小屏 :  < 768px         容器的固定宽度  是100%     预定义一个类名： col-xs-*

栅格系统： 提供了两个容器：

1. 固定宽度的容器： 预定义类名 .container (.container 类用于固定宽度并支持响应式布局的容器)
2. 流式布局（宽度是全屏展示）： 预定义类名 .container-fluid (.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。)

响应式的布局： 栅格系统  统一类名前缀是     col-**-* :         **： 代表屏幕的范围: 取值：  lg  md  sm  xs        *:  每一份的占比（相当于12而言） 取值：数字 1 - 12

例如:

col-md-6: 中等屏幕上占六份 col-sm-8: 小屏幕上占8份

进行栅格布局步骤：

1. 提供一个布局容器：
2. 提供一个行的容器：
3. 开始栅格系统：

   
        
            
    
            
     
      第一个
     
            
     
      第二个
     
            
     
      第三个
     
            
     
      第四个
     
        
    
                 
            
        
   

注意:在容器中书写你的所有内容,容器外不用在套一个div了

(如果你套了div,那么不要给这个div定宽,否则效果就不对了) 栅格化布局中行的宽也不要定,靠内边距顶开

列偏移

本质就是添加margin值

预定义类名： col-**-offset-*

   
        
            
    
            
     
      1
     
            
     
      2
     
            
     
      3
     
        
    
        
            
    
            
     
      列偏移1份
     
            
                 
     
      2
     
            
     
      3
     
        
    
    
   

列排序

本质就是添加定位属性

往前排： col--pull-*

往后排: col--push-*

   
        
            
    
            
     
      1
     
            
     
      2
     
            
     
      3
     
            
     
      4
     
        
    
        
            
    
            
     
      1吖
     
            
     
      2这是列排序的体现,看到重合了
     
            
     
      3
     
往前排了2份            
     
      4
     
        
    
        
    
            
     
      1吖
     
往后排            
     
      2
     
            
     
      3
     
往前排            
     
      4
     
    达到换位置的目的        
    
    
   

导航条

找到 bootstrap网站 ->组件->导航条 里面讲解用法

转载地址：https://blog.csdn.net/z18237613052/article/details/111603875 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！