Was ist responsiv? Detaillierte Einführung in responsives Layout

Der Inhalt dieses Artikels dreht sich um die Frage: Was ist Reaktionsfähigkeit? Die detaillierte Einführung in das responsive Layout hat einen gewissen Referenzwert. Ich hoffe, dass es für Sie hilfreich ist.

Responsive

Responsive: Nehmen Sie entsprechende Anpassungen am Stil des Inhalts auf der Seite entsprechend verschiedenen Geräten, unterschiedlichen Breiten und unterschiedlichen Funktionen vor.

媒询  媒体查询
    显示设备

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

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

    and  用来链接多个查询条件

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

Schreiben Sie einen Bereich und verwenden Sie ihn dieser Stil innerhalb dieses Bereichs

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

Responsive-Pixel-Verhältnis

媒体特性；
    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>

Eine Vielzahl von Schreibmethoden, die durch Reaktionsfähigkeit eingeführt werden

  @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样式表 */

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

Prozent-Layout

<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>
 <!--百分比布局适用于  布局不会发生改变  并且要求看到左右的内容-->

Wenn der Wert wird in Prozent angegeben, wer berechnet es?
Breite wird auf Basis der Breite des übergeordneten Elements berechnet
Höhe basierend auf der Höhe des übergeordneten Elements
Rand wird immer auf Basis der Breite des übergeordneten Elements berechnet
top Berechnet basierend auf der Höhe des (Positioning_Absolute Positioning) übergeordneten Elements
left Berechnet basierend auf der Breite des (Positioning_Absolute Positioning) übergeordneten Elements
padding Berechnet basierend auf der Breite des übergeordneten Elements
translatX,Y Berechnet basierend auf seiner eigenen Breite und Höhe berechnen
Zeilenhöhenausdrucksmethode: Schriftart: 20px/1.2 '宋体' bedeutet 1,2-fache Textgröße

Das obige ist der detaillierte Inhalt vonWas ist responsiv? Detaillierte Einführung in responsives Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!