Qu'est-ce qui est réactif ? Introduction détaillée à la mise en page réactive

Le contenu de cet article porte sur ce qu'est la réactivité ? L'introduction détaillée de la mise en page réactive a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle vous sera utile.

Responsive

Responsive : effectuez les ajustements correspondants au style du contenu de la page en fonction de différents appareils, de différentes largeurs et de différentes fonctionnalités

媒询  媒体查询
    显示设备

    @media
        只有满足所有查询条件的时候，里面的样式才会被解析

    all         所有媒体
    braille     盲文触觉设备
    embossed    盲文打印机
    print       手持设备
    projection  打印预览
    screen      彩屏设备
    speech      ‘听觉’类似的媒体类型
    tty         不适用像素的设备
    tv          电视

    and  用来链接多个查询条件

    min-width :  大于等于
    max-width:   小于等于

Écrivez une plage et utilisez ce style dans cette plage

 <style>
        @media screen and (min-width:1000px) and (max-width:1300px){            
        .box{                
        width:100px;                
        height: 100px;                
        background: #333333;            
        }
        }    
</style>

Rapport de pixels réactifs

媒体特性；
    min-width:1000px  当屏幕宽度大于等于1000的时候会被解析
    max-width:1300px  当屏幕宽度小于等于1300的时候会被解析

    -webkit-min-device-pixel-ratio  最小像素比
    -webkit-max-device-pixel-ratio  最大像素比

    orientation:portrait  
    （指定输出设备中的页面可见区域高度大于或等于宽度）
    orientation:landscape
    （除portrait值情况外，都是landscape）

<style>
        @media (-webkit-min-device-pixel-ratio:2) and (orientation:landscape){
                    .box{           
                             width:100px;                   
                             height: 100px;                    
                             background: #333333;            
                        }
        }   
</style>

La réactivité introduit plusieurs méthodes d'écriture

  @import "css/a.css" all and (min-width:800px);
        /* 宽度满足800-999的时候，只会引入a.css样式表 *        
        @import "css/b.css" all and (min-width:1000px);
        /* 宽度满足1000-1199的时候，会同时引入a和b.css这两个样式表，后者覆盖前者 *        
        @import "css/c.css" all and (min-width:1200px);        
        /* 宽度满足1200的时候，会同时引入a和b、c.css这三个样式表，后者覆盖前者 */
        /* 同时会满足多个样式的查询条件，这种方式引入样式表要注意样式表的顺序 */

 @import "css/a.css" all and (min-width:800px) and (max-width:999px);        
 /* 宽度满足800-999的时候，只会引入a.css样式表 */
        @import "css/b.css" all and (min-width:1000px) and (max-width:1199px);        
        /* 宽度满足1000-1199的时候，引入b.css样式表*/
        @import "css/c.css" all and (min-width:1200px);        
        /* 宽度满足1200的时候，引入c.css样式表 */

        /* 因为同时只会满足一个样式表的查询条件，所以不需要太注意顺序 */

Pourcentage mise en page

<style>
        .box{        
            width:100%;        
           }

        .item_long{          
          width:100%;        
          }

        .item_long img{     
               width:100%;        
               }

        .item{         
           width:46%;            
           height:270px;            
           float: left;        
           }

        .item:nth-child(even){     
               float: right;        
               }
        .item img{           
         width:100%;        
         }
    </style>
 <!--百分比布局适用于  布局不会发生改变  并且要求看到左右的内容-->

Lorsque la valeur est donnée en pourcentage, qui la calculera ?
la largeur est calculée en fonction de la largeur du parent
la hauteur est calculée en fonction de la hauteur du parent
la marge est toujours calculée en fonction de la largeur du parent
le haut est calculé en fonction de la hauteur du parent (positioning_absolute positionnement)
gauche est calculé en fonction de la largeur du parent (positioning_absolute positionnement)
padding Calculez
translatX,Y en fonction de la largeur du parent Calculez
la hauteur de la ligne en fonction de sa propre largeur et hauteur La méthode de représentation de la hauteur de la ligne : font:20px/1.2 '宋体'; la taille du texte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!